touchstudy-core 0.1.72 → 0.1.74

package/dist/index.js

@@ -17,7 +17,8 @@ require('moment/locale/ko.js');
 require('moment/locale/en-au.js');
 var Pusher = _interopDefault(require('pusher-js'));
 var io5 = require('react-icons/io5');
-var i18n = _interopDefault(require('i18next'));
+var i18n = require('i18next');
+var i18n__default = _interopDefault(i18n);
 var Box = _interopDefault(require('@mui/material/Box'));
 var Popover = _interopDefault(require('@mui/material/Popover'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
@@ -32,13 +33,12 @@ var io = require('react-icons/io');
 var _ = _interopDefault(require('lodash'));
 var fa6 = require('react-icons/fa6');
 var CreatableSelect = _interopDefault(require('react-select/creatable'));
-var html2canvas = _interopDefault(require('html2canvas'));
-var jspdf = require('jspdf');
 var Button = _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 Typography = _interopDefault(require('@mui/material/Typography'));
+var html2pdf = _interopDefault(require('html2pdf.js'));
 var Avatar = _interopDefault(require('@mui/material/Avatar'));
 var TextField = _interopDefault(require('@mui/material/TextField'));
 var Paper = _interopDefault(require('@mui/material/Paper'));
@@ -123,10 +123,6 @@ var RecentUserAction = {
   AddedStudentToClass: "added_student_to_class",
   RemovedStudentFromClass: "removed_student_from_class"
 };
-var PrintHeaderClassName = "print-header";
-var PrintTitleClassName = "print-title";
-var PrintContentClassName = "print-content";
-var PrintContainerClassName = "print-container";
 
 var utcToLocalTime = (function (time, FORMAT) {
   if (time === DATE_MIN_VALUE || time === DATE_TIME_MIN_VALUE) return "";
@@ -176,194 +172,11 @@ function _taggedTemplateLiteralLoose(strings, raw) {
 var styles = {"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","btn-login-google":"_2HqmH","block-login":"_wWIyO","box-login":"_38Lo1","btn-primary":"_rd4Uy","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","dropdown-academy":"_3CMVp","image-academy":"_2ibYC","academy-btn":"_1JMRU","switch-icon":"_N4FNf","dropdown-content-academy":"_31Dr0","dropdown-academy-item":"_3bjcz","noGutters":"_31ZQk","custom-col-2":"_3yXyK","custom-col-3":"_1RsJQ","custom-col-5":"_L42CP","custom-col-10":"_2u6eL","custom-row":"_8x7OP","custom-col":"_1JmTh","custom-col-4":"_3HO1e","custom-col-8":"_Oy31M","custom-col-12":"_3aUKo","custom-container":"_39LRs","form-label":"__Ut-u","form-control":"_2k4dX","btn-outline-primary":"_2PWdX","sort-icons":"_mQvLF","active":"_3oAH-","form-select":"_3W3aw","truncate":"_3NJzN","headers":"_3xnI5","logo-container":"_3YG70","tabBox":"_1CQPn","routerBox":"_3hx2T","tabText":"_3UyhW","router-link-active":"_1TGKA","router-link":"_1AqMh","userImg":"_2RI6G","disabled-link":"_3aVHg","line-clamp":"_3fpky"};
 
 // A type of promise-like that resolves synchronously and supports only one observer
-const _Pact = /*#__PURE__*/(function() {
-	function _Pact() {}
-	_Pact.prototype.then = function(onFulfilled, onRejected) {
-		const result = new _Pact();
-		const state = this.s;
-		if (state) {
-			const callback = state & 1 ? onFulfilled : onRejected;
-			if (callback) {
-				try {
-					_settle(result, 1, callback(this.v));
-				} catch (e) {
-					_settle(result, 2, e);
-				}
-				return result;
-			} else {
-				return this;
-			}
-		}
-		this.o = function(_this) {
-			try {
-				const value = _this.v;
-				if (_this.s & 1) {
-					_settle(result, 1, onFulfilled ? onFulfilled(value) : value);
-				} else if (onRejected) {
-					_settle(result, 1, onRejected(value));
-				} else {
-					_settle(result, 2, value);
-				}
-			} catch (e) {
-				_settle(result, 2, e);
-			}
-		};
-		return result;
-	};
-	return _Pact;
-})();
-
-// Settles a pact synchronously
-function _settle(pact, state, value) {
-	if (!pact.s) {
-		if (value instanceof _Pact) {
-			if (value.s) {
-				if (state & 1) {
-					state = value.s;
-				}
-				value = value.v;
-			} else {
-				value.o = _settle.bind(null, pact, state);
-				return;
-			}
-		}
-		if (value && value.then) {
-			value.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));
-			return;
-		}
-		pact.s = state;
-		pact.v = value;
-		const observer = pact.o;
-		if (observer) {
-			observer(pact);
-		}
-	}
-}
-
-function _isSettledPact(thenable) {
-	return thenable instanceof _Pact && thenable.s & 1;
-}
-
-// Asynchronously iterate through an object that has a length property, passing the index as the first argument to the callback (even as the length property changes)
-function _forTo(array, body, check) {
-	var i = -1, pact, reject;
-	function _cycle(result) {
-		try {
-			while (++i < array.length && (!check || !check())) {
-				result = body(i);
-				if (result && result.then) {
-					if (_isSettledPact(result)) {
-						result = result.v;
-					} else {
-						result.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));
-						return;
-					}
-				}
-			}
-			if (pact) {
-				_settle(pact, 1, result);
-			} else {
-				pact = result;
-			}
-		} catch (e) {
-			_settle(pact || (pact = new _Pact()), 2, e);
-		}
-	}
-	_cycle();
-	return pact;
-}
 
 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 implement a generic for loop
-function _for(test, update, body) {
-	var stage;
-	for (;;) {
-		var shouldContinue = test();
-		if (_isSettledPact(shouldContinue)) {
-			shouldContinue = shouldContinue.v;
-		}
-		if (!shouldContinue) {
-			return result;
-		}
-		if (shouldContinue.then) {
-			stage = 0;
-			break;
-		}
-		var result = body();
-		if (result && result.then) {
-			if (_isSettledPact(result)) {
-				result = result.s;
-			} else {
-				stage = 1;
-				break;
-			}
-		}
-		if (update) {
-			var updateValue = update();
-			if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
-				stage = 2;
-				break;
-			}
-		}
-	}
-	var pact = new _Pact();
-	var reject = _settle.bind(null, pact, 2);
-	(stage === 0 ? shouldContinue.then(_resumeAfterTest) : stage === 1 ? result.then(_resumeAfterBody) : updateValue.then(_resumeAfterUpdate)).then(void 0, reject);
-	return pact;
-	function _resumeAfterBody(value) {
-		result = value;
-		do {
-			if (update) {
-				updateValue = update();
-				if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
-					updateValue.then(_resumeAfterUpdate).then(void 0, reject);
-					return;
-				}
-			}
-			shouldContinue = test();
-			if (!shouldContinue || (_isSettledPact(shouldContinue) && !shouldContinue.v)) {
-				_settle(pact, 1, result);
-				return;
-			}
-			if (shouldContinue.then) {
-				shouldContinue.then(_resumeAfterTest).then(void 0, reject);
-				return;
-			}
-			result = body();
-			if (_isSettledPact(result)) {
-				result = result.v;
-			}
-		} while (!result || !result.then);
-		result.then(_resumeAfterBody).then(void 0, reject);
-	}
-	function _resumeAfterTest(shouldContinue) {
-		if (shouldContinue) {
-			result = body();
-			if (result && result.then) {
-				result.then(_resumeAfterBody).then(void 0, reject);
-			} else {
-				_resumeAfterBody(result);
-			}
-		} else {
-			_settle(pact, 1, result);
-		}
-	}
-	function _resumeAfterUpdate() {
-		if (shouldContinue = test()) {
-			if (shouldContinue.then) {
-				shouldContinue.then(_resumeAfterTest).then(void 0, reject);
-			} else {
-				_resumeAfterTest(shouldContinue);
-			}
-		} else {
-			_settle(pact, 1, result);
-		}
-	}
-}
-
 // Asynchronously call a function and send errors to recovery continuation
 function _catch(body, recover) {
 	try {
@@ -1498,8 +1311,11 @@ var switchSuperAdminAcademy = function switchSuperAdminAcademy(academyId, role)
   return api.post(SUPER_ADMIN_ACADEMY_URL + "/" + academyId + "/switch-academy/" + role);
 };
 
-var useLayoutContext = function useLayoutContext(role, pusherRegisterUrls) {
+var useLayoutContext = function useLayoutContext(role, pusherRegisterUrls, showLoadingAcademy) {
   var _currentPusher$connec2;
+  if (showLoadingAcademy === void 0) {
+    showLoadingAcademy = true;
+  }
   var _useGoogleSignOut = useGoogleSignOut({}),
     handleSignOut = _useGoogleSignOut.handleSignOut;
   var _useTranslation = reactI18next.useTranslation(),
@@ -1528,10 +1344,10 @@ var useLayoutContext = function useLayoutContext(role, pusherRegisterUrls) {
   var handleGetAcademyDetail = function handleGetAcademyDetail() {
     try {
       var _temp2 = function _temp2() {
-        dispatch(setLoading(false));
+        showLoadingAcademy && dispatch(setLoading(false));
       };
       if (!academyDomain) return Promise.resolve();
-      dispatch(setLoading(true));
+      showLoadingAcademy && dispatch(setLoading(true));
       var _temp = _catch(function () {
         return Promise.resolve(getAcademyDetail()).then(function (info) {
           if (info) {
@@ -1669,27 +1485,38 @@ var loadingStyle$1 = {
   alignItems: "center"
 };
 var LoadingComponent = function LoadingComponent(_ref) {
-  var isLoading = _ref.isLoading;
+  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 text-secondary",
+    className: "spinner-border " + spinClassName,
     role: "status"
   }, React__default.createElement("span", {
     className: "sr-only"
-  }))) : null;
+  })), React__default.createElement("div", null, children))) : null;
 };
 
 var LayoutContext = function LayoutContext(_ref) {
   var children = _ref.children,
     role = _ref.role,
     _ref$pusherRegisterUr = _ref.pusherRegisterUrls,
-    pusherRegisterUrls = _ref$pusherRegisterUr === void 0 ? [] : _ref$pusherRegisterUr;
+    pusherRegisterUrls = _ref$pusherRegisterUr === void 0 ? [] : _ref$pusherRegisterUr,
+    showLoadingAcademy = _ref.showLoadingAcademy;
   var user = reactRedux.useSelector(function (state) {
     var _state$common;
     return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
   });
-  useLayoutContext(role, pusherRegisterUrls);
+  useLayoutContext(role, pusherRegisterUrls, showLoadingAcademy);
   if (!(user !== null && user !== void 0 && user.email)) return React__default.createElement(LoadingComponent, {
     isLoading: true
   });else return React__default.createElement(React.Fragment, null, children);
@@ -1884,7 +1711,9 @@ var getSubjectListApi = function getSubjectListApi() {
   }
 };
 
-var useSubjectSelect = function useSubjectSelect() {
+var useSubjectSelect = function useSubjectSelect(_ref) {
+  var onChangeExam = _ref.onChangeExam,
+    exam = _ref.exam;
   var firstLoad = true;
   var dispatch = reactRedux.useDispatch();
   var _useState = React.useState(),
@@ -1942,18 +1771,15 @@ var useSubjectSelect = function useSubjectSelect() {
     var selectedSubject = subjectList === null || subjectList === void 0 ? void 0 : subjectList.find(function (subject) {
       return subject.id === id;
     });
-    setSelectedSubject(selectedSubject);
-  };
-  var handleChangeSelectedSubject = function handleChangeSelectedSubject(subject) {
-    if (!subject) return;
-    setSelectedSubject(subject);
+    onChangeExam(_extends({}, exam, {
+      subjectId: (selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id) || 0
+    }));
   };
   return {
     subjectOptions: subjectOptions,
     selectedSubject: selectedSubject,
     subjectList: subjectList,
-    handleChangeSubject: handleChangeSubject,
-    handleChangeSelectedSubject: handleChangeSelectedSubject
+    handleChangeSubject: handleChangeSubject
   };
 };
 
@@ -2602,7 +2428,7 @@ var exam = "시험";
 var me = "나";
 var teacher_name = "선생님 성함";
 var class_schedule = "수업 시간표";
-var summary = "요약";
+var summary = "전체 현황";
 var load_exam = "시험 로드";
 var exam_name = "시험 이름";
 var student_phone_number_header = "학생 전화번호";
@@ -2628,6 +2454,13 @@ var total_users = "총 사용자";
 var added_date = "추가된 날짜";
 var sync_exam_results = "시험 결과 동기화";
 var update_data_fail = "데이터 업데이트 실패";
+var add_students_to_class = "수업에 학생 추가";
+var click_to_choose_file = "파일을 선택하려면 클릭하세요.";
+var exam_data = "시험 데이터";
+var questions_correct_rate = "질문 정답률";
+var question_management = "질문 관리";
+var student_data = "학생 데이터";
+var problem_number_question_chart = "문제 {{number}}번";
 var are_you_sure_to_sync_exam_results_to_academy = "시험 결과를 아카데미 {{ academyName }}에 동기화하시겠습니까(백그라운드에서 실행되며 시간이 다소 소요됨)";
 var messages = {
 	exam_sessions_are_being_synchronized: "{{ total }} 개의 시험 세션이 동기화되고 있습니다"
@@ -3371,6 +3204,13 @@ var lang_ko = {
 	added_date: added_date,
 	sync_exam_results: sync_exam_results,
 	update_data_fail: update_data_fail,
+	add_students_to_class: add_students_to_class,
+	click_to_choose_file: click_to_choose_file,
+	exam_data: exam_data,
+	questions_correct_rate: questions_correct_rate,
+	question_management: question_management,
+	student_data: student_data,
+	problem_number_question_chart: problem_number_question_chart,
 	are_you_sure_to_sync_exam_results_to_academy: are_you_sure_to_sync_exam_results_to_academy,
 	messages: messages,
 	submit: submit,
@@ -3507,8 +3347,8 @@ var number_answer$1 = "No.{{number}}";
 var answer_no$1 = "Ans.{{number}}";
 var answer_rate$1 = "Answer rate";
 var seconds$1 = "s";
-var search_placeholder$1 = "Search by exam name";
-var search_by_student$1 = "Search by student name";
+var search_placeholder$1 = "Search by Exam Name";
+var search_by_student$1 = "Search by Student Name";
 var study_touch$1 = "Study touch";
 var exam_information$1 = "Exam information";
 var issue_number$1 = "Issue number";
@@ -3584,8 +3424,8 @@ var update_exam$1 = "Update exam";
 var create_exam$1 = "Create exam";
 var back$1 = "Back";
 var date_format_exam$1 = "MMMM YYYY";
-var date_format$1 = "MMM.D YYYY";
-var date_time_format$1 = "HH:mm MMM.D YYYY ";
+var date_format$1 = "MMM. D. YYYY";
+var date_time_format$1 = "HH:mm MMM. D YYYY ";
 var date_time_format_12h$1 = "MM-DD-YYYY HH:mm A";
 var full_date_time_format$1 = "MMM Do YYYY HH:mm:ss";
 var total_questions$1 = "Total questions";
@@ -3658,8 +3498,9 @@ var problem_number_question$1 = "Question {{number}}";
 var teacher_in_charge$1 = "Teacher In Charge";
 var counselor$1 = "Counselor";
 var new_question$1 = "New Question";
-var hour$1 = "hour";
-var minute$1 = "minutes";
+var hour$1 = "hr";
+var hours = "hrs";
+var minute$1 = "min";
 var second$1 = "second";
 var question_order$1 = "Number {{number}}";
 var send_message$1 = "Send Message";
@@ -3688,7 +3529,7 @@ var check_attendance$1 = "Check attendance";
 var attendance_check$1 = "Attendance check";
 var class_date$1 = "Class date";
 var class_time$1 = "Class time";
-var attendance$1 = "Attendance";
+var attendance$1 = "Attendance List";
 var attendance_completed$1 = "Attendance completed";
 var none_attendance$1 = "Non-attendance";
 var academy_list$1 = "Academy list";
@@ -4118,6 +3959,13 @@ var total_users$1 = "Total users";
 var added_date$1 = "Added date";
 var sync_exam_results$1 = "Sync exam results";
 var update_data_fail$1 = "Update data fail";
+var add_students_to_class$1 = "Add students to class";
+var click_to_choose_file$1 = "Click to choose file";
+var exam_data$1 = "Exam Data";
+var questions_correct_rate$1 = "Questions Correct Rate";
+var question_management$1 = "Question Management";
+var student_data$1 = "Student Data";
+var problem_number_question_chart$1 = "Q. {{number}}";
 var are_you_sure_to_sync_exam_results_to_academy$1 = "Are you sure to sync exam results to academy \"{{ academyName }}\" (it will run in the background and take a while)";
 var messages$1 = {
 	exam_sessions_are_being_synchronized: "{{ total }} exam sessions are being synchronized"
@@ -4406,6 +4254,7 @@ var lang_en = {
 	counselor: counselor$1,
 	new_question: new_question$1,
 	hour: hour$1,
+	hours: hours,
 	minute: minute$1,
 	second: second$1,
 	question_order: question_order$1,
@@ -4860,6 +4709,13 @@ var lang_en = {
 	added_date: added_date$1,
 	sync_exam_results: sync_exam_results$1,
 	update_data_fail: update_data_fail$1,
+	add_students_to_class: add_students_to_class$1,
+	click_to_choose_file: click_to_choose_file$1,
+	exam_data: exam_data$1,
+	questions_correct_rate: questions_correct_rate$1,
+	question_management: question_management$1,
+	student_data: student_data$1,
+	problem_number_question_chart: problem_number_question_chart$1,
 	are_you_sure_to_sync_exam_results_to_academy: are_you_sure_to_sync_exam_results_to_academy$1,
 	messages: messages$1,
 	submit: submit$1,
@@ -4942,7 +4798,7 @@ var lang_en = {
 	sent_at: sent_at$1
 };
 
-i18n.use(reactI18next.initReactI18next).init({
+i18n__default.use(reactI18next.initReactI18next).init({
   lng: "ko",
   fallbackLng: "ko",
   interpolation: {
@@ -5664,7 +5520,6 @@ var ContentTooltip = function ContentTooltip(_ref) {
 var ChatRightItem = function ChatRightItem(_ref) {
   var content = _ref.content,
     createdAt = _ref.createdAt,
-    sender = _ref.sender,
     showTimestamp = _ref.showTimestamp,
     isStudent = _ref.isStudent,
     showName = _ref.showName,
@@ -5697,13 +5552,15 @@ var ChatRightItem = function ChatRightItem(_ref) {
     alignItems: "center",
     justifyContent: "end",
     flexDirection: "row"
-  }, React__default.createElement(iconPersonNoActive, null), React__default.createElement(material.Typography, {
+  }, React__default.createElement(iconPersonNoActive, {
+    color: styles.gray_700
+  }), React__default.createElement(material.Typography, {
     fontWeight: 700,
     fontSize: 14,
     padding: "4px",
     lineHeight: "16.71px",
     color: styles.gray_700
-  }, sender === null || sender === void 0 ? void 0 : sender.fullName)), React__default.createElement(material.Stack, {
+  }, t("me"))), React__default.createElement(material.Stack, {
     display: "flex",
     flexDirection: "row",
     gap: "8px",
@@ -6591,7 +6448,7 @@ var ChatHeader = function ChatHeader(_ref) {
       sx: {
         color: styles.gray_500
       }
-    }, (!!filterDurationExam.hours() ? filterDurationExam.hours() + " " + t("hour") : "") + " " + (!!filterDurationExam.minutes() ? filterDurationExam.minutes() + " " + t("minute") : "") + " " + (!!filterDurationExam.seconds() ? filterDurationExam.seconds() + " " + t("second") : "")))), React__default.createElement(material.Box, {
+    }, (!!filterDurationExam.hours() ? filterDurationExam.hours() + " " + (filterDurationExam.hours() > 1 ? t("hours") : t("hour")) : "") + " " + (!!filterDurationExam.minutes() ? filterDurationExam.minutes() + " " + t("minute") : "") + " " + (!!filterDurationExam.seconds() ? filterDurationExam.seconds() + " " + t("second") : "")))), React__default.createElement(material.Box, {
       display: "flex",
       alignItems: "end",
       gap: "6px",
@@ -6612,16 +6469,12 @@ var ChatHeader = function ChatHeader(_ref) {
       fontSize: "12px",
       lineHeight: "14.32px",
       color: styles.less_dark
-    }, t("points", {
-      number: score || 0
-    })), React__default.createElement(material.Typography, {
+    }, score || 0), React__default.createElement(material.Typography, {
       fontWeight: 700,
       fontSize: "12px",
       lineHeight: "14.32px",
       color: styles.gray_300
-    }, "/", t("points", {
-      number: totalScore || 0
-    }))), React__default.createElement(material.Typography, {
+    }, "/", totalScore || 0)), React__default.createElement(material.Typography, {
       fontWeight: 500,
       fontSize: "12px",
       lineHeight: "14.32px",
@@ -7572,45 +7425,11 @@ var QuestionView = function QuestionView(_ref2) {
   }))));
 };
 
-var ADMIN_CATEGORY_URL = SUPER_ADMIN_BASE_URL + "/api/category";
-var CATEGORY_URL = BASE_URL + "/api/examcategory";
-var getCategoryListAdminApi = function getCategoryListAdminApi(data) {
-  try {
-    return Promise.resolve(api.get("" + ADMIN_CATEGORY_URL, {
-      params: data
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-var getCategoryListApi = function getCategoryListApi(data) {
-  try {
-    return Promise.resolve(api.get("" + CATEGORY_URL, {
-      params: data
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-
 var useCategorySelect = function useCategorySelect(_ref) {
-  var subjectId = _ref.subjectId;
-  var firstLoad = true;
-  var dispatch = reactRedux.useDispatch();
+  var categoryList = _ref.categoryList;
   var _useState = React.useState(),
-    categoryList = _useState[0],
-    setCategoryList = _useState[1];
-  var _useState2 = React.useState(),
-    selectedCategory = _useState2[0],
-    setSelectedCategory = _useState2[1];
-  var isDomain = reactRedux.useSelector(function (state) {
-    var _state$common, _state$common$user;
-    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.academyDomain;
-  });
-  var isSuperAdmin = reactRedux.useSelector(function (state) {
-    var _state$common2, _state$common2$user;
-    return (state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.roles) || [];
-  }).includes(exports.Role.Admin) && !isDomain;
+    selectedCategory = _useState[0],
+    setSelectedCategory = _useState[1];
   var categoryOptions = React.useMemo(function () {
     return categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(function (category) {
       var _category$path;
@@ -7620,39 +7439,6 @@ var useCategorySelect = function useCategorySelect(_ref) {
       };
     });
   }, [JSON.stringify(categoryList)]);
-  var getCategoryList = function getCategoryList(isLoading) {
-    if (isLoading === void 0) {
-      isLoading = true;
-    }
-    try {
-      var _temp2 = function _temp2() {
-        isLoading && dispatch(setLoading(false));
-      };
-      if (!subjectId) return Promise.resolve();
-      if (firstLoad) firstLoad = false;
-      isLoading && dispatch(setLoading(true));
-      var _temp = _catch(function () {
-        return Promise.resolve(isSuperAdmin ? getCategoryListAdminApi({
-          subjectId: subjectId
-        }) : getCategoryListApi({
-          subjectId: subjectId
-        })).then(function (res) {
-          var data = res.data.items;
-          setCategoryList(data || []);
-          setSelectedCategory(data[0]);
-        });
-      }, function (error) {
-        setCategoryList([]);
-        console.log(error);
-      });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  React.useEffect(function () {
-    getCategoryList();
-  }, [subjectId]);
   var handleChangeCategory = function handleChangeCategory(value) {
     var id = value.value;
     var selectedCategory = categoryList === null || categoryList === void 0 ? void 0 : categoryList.find(function (category) {
@@ -7745,7 +7531,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     questions = _ref.questions,
     answerCount = _ref.answerCount,
     questionCount = _ref.questionCount,
-    selectedSubject = _ref.selectedSubject,
+    categoryList = _ref.categoryList,
     categoryId = _ref.categoryId,
     isActive = _ref.isActive,
     isDisabled = _ref.isDisabled,
@@ -7760,7 +7546,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useCategorySelect = useCategorySelect({
-      subjectId: defaultCategoryOptions === undefined ? selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id : undefined
+      categoryList: categoryList
     }),
     categoryOptions = _useCategorySelect.categoryOptions;
   var theme = material.useTheme();
@@ -9625,12 +9411,45 @@ var DURATION_OPTIONS = Array.from({
 });
 var DEFAULT_ANSWER_COUNT$1 = 5;
 
+var ADMIN_CATEGORY_URL = SUPER_ADMIN_BASE_URL + "/api/category";
+var CATEGORY_URL = BASE_URL + "/api/examcategory";
+var getCategoryListAdminApi = function getCategoryListAdminApi(data) {
+  try {
+    return Promise.resolve(api.get("" + ADMIN_CATEGORY_URL, {
+      params: data
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var getCategoryListApi = function getCategoryListApi(data) {
+  try {
+    return Promise.resolve(api.get("" + CATEGORY_URL, {
+      params: data
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var useExamDetailView = function useExamDetailView(props) {
   var exam = props.exam,
-    selectedSubject = props.selectedSubject,
     onChangeExam = props.onChangeExam;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var firstLoad = true;
+  var dispatch = reactRedux.useDispatch();
+  var isDomain = reactRedux.useSelector(function (state) {
+    var _state$common, _state$common$user;
+    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.academyDomain;
+  });
+  var isSuperAdmin = reactRedux.useSelector(function (state) {
+    var _state$common2, _state$common2$user;
+    return (state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.roles) || [];
+  }).includes(exports.Role.Admin) && !isDomain;
+  var _useState = React.useState([]),
+    categoryList = _useState[0],
+    setCategoryList = _useState[1];
   var handleChangeQuestionCount = function handleChangeQuestionCount(article, questionCount, answerCount) {
     if (!exam) return;
     var examQuestions = exam.questions;
@@ -9808,6 +9627,39 @@ var useExamDetailView = function useExamDetailView(props) {
       }])
     }));
   };
+  var getCategoryList = function getCategoryList(isLoading) {
+    if (isLoading === void 0) {
+      isLoading = true;
+    }
+    try {
+      var _temp2 = function _temp2() {
+        isLoading && dispatch(setLoading(false));
+      };
+      if (!exam.subjectId) return Promise.resolve();
+      if (firstLoad) firstLoad = false;
+      isLoading && dispatch(setLoading(true));
+      var _temp = _catch(function () {
+        return Promise.resolve(isSuperAdmin ? getCategoryListAdminApi({
+          subjectId: exam.subjectId
+        }) : getCategoryListApi({
+          subjectId: exam.subjectId
+        })).then(function (res) {
+          var data = res.data.items;
+          setCategoryList(data || []);
+        });
+      }, function (error) {
+        setCategoryList([]);
+        console.log(error);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React.useEffect(function () {
+    if (categoryList !== null && categoryList !== void 0 && categoryList.length) return;
+    getCategoryList();
+  }, [exam.subjectId, JSON.stringify(categoryList)]);
   var examGroupByArticle = React.useMemo(function () {
     if (!exam) return [];
     var articles = [];
@@ -9832,27 +9684,23 @@ var useExamDetailView = function useExamDetailView(props) {
   var durationOptions = React.useMemo(function () {
     var options = DURATION_OPTIONS.map(function (i) {
       return {
-        label: t('mins_mins', {
+        label: t("mins_mins", {
           mins: i
         }),
         value: i
       };
     });
     if (!!exam.duration && exam.duration > DURATION_OPTIONS[DURATION_OPTIONS.length - 1]) return [].concat(options, [{
-      label: t('mins_mins', {
+      label: t("mins_mins", {
         mins: exam.duration
       }),
       value: exam.duration
     }]);
     return options;
   }, [exam.duration]);
-  React.useEffect(function () {
-    if ((selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id) !== exam.subjectId) onChangeExam(_extends({}, exam, {
-      subjectId: (selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id) || 0
-    }));
-  }, [selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id, exam.subjectId]);
   return {
     t: t,
+    categoryList: categoryList,
     durationOptions: durationOptions,
     examGroupByArticle: examGroupByArticle,
     handleAddArticle: handleAddArticle,
@@ -9874,16 +9722,19 @@ var ExamDetailView = function ExamDetailView(_ref) {
     isDisabled = _ref.isDisabled,
     isEdit = _ref.isEdit,
     onChangeExam = _ref.onChangeExam;
-  var _useSubjectSelect = useSubjectSelect(),
+  var _useSubjectSelect = useSubjectSelect({
+      onChangeExam: onChangeExam,
+      exam: exam
+    }),
     subjectOptions = _useSubjectSelect.subjectOptions,
     selectedSubject = _useSubjectSelect.selectedSubject,
     handleChangeSubject = _useSubjectSelect.handleChangeSubject;
   var _useExamDetailView = useExamDetailView({
       exam: exam,
-      onChangeExam: onChangeExam,
-      selectedSubject: selectedSubject
+      onChangeExam: onChangeExam
     }),
     t = _useExamDetailView.t,
+    categoryList = _useExamDetailView.categoryList,
     durationOptions = _useExamDetailView.durationOptions,
     examGroupByArticle = _useExamDetailView.examGroupByArticle,
     handleAddArticle = _useExamDetailView.handleAddArticle,
@@ -9932,10 +9783,10 @@ var ExamDetailView = function ExamDetailView(_ref) {
     className: 'mb-2'
   }, React__default.createElement("label", {
     className: styles["form-label"] + " " + styles$2["question-label"],
-    htmlFor: "duration"
-  }, t("subject"), " ", selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.name), React__default.createElement(CustomSelect, {
+    htmlFor: "subject"
+  }, t("subject")), React__default.createElement(CustomSelect, {
     inputId: "subject",
-    value: selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id,
+    value: exam === null || exam === void 0 ? void 0 : exam.subjectId,
     options: subjectOptions,
     onChange: handleChangeSubject,
     isDisabled: isDisabled || isEdit
@@ -9946,6 +9797,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
       xs: 12,
       className: index === examGroupByArticle.length - 1 ? "mb-2" : ''
     }, React__default.createElement(ArticleGroupView, Object.assign({}, i, {
+      categoryList: categoryList,
       isActive: index === examGroupByArticle.length - 1,
       onChangeQuestionCount: handleChangeQuestionCount,
       onChangeCategory: handleChangeCategory,
@@ -10830,18 +10682,6 @@ var createConversationApi = function createConversationApi(data) {
   return api.post(BASE_URL + "/api/conversation", data);
 };
 
-var toNumberOrder = function toNumberOrder(value) {
-  return "The " + value + (value % 10 === 1 ? 'st' : value % 10 === 2 ? 'nd' : value % 10 === 3 ? 'rd' : 'th');
-};
-var formatDuration = function formatDuration(t, duration) {
-  if (!duration) return "0" + t("seconds");
-  var totalTime = Math.round(duration);
-  return totalTime > 60 ? t("mins_mins_seconds_seconds", {
-    mins: Math.floor(totalTime / 60),
-    seconds: totalTime % 60
-  }) : "" + Math.round(duration) + t("seconds");
-};
-
 var ORDER_NUMBERS = {
   1: "the_first",
   2: "the_second",
@@ -10896,6 +10736,7 @@ var EXAM_RESULT = {
     parentPhoneNumber: "",
     schoolName: "Academy",
     className: "1",
+    fullName: "Abc",
     major: "",
     roles: []
   },
@@ -11628,6 +11469,18 @@ var defaultSeries = function defaultSeries(t) {
   }];
 };
 
+var formatDuration = function formatDuration(t, duration) {
+  if (!duration) return "0" + t("seconds");
+  var totalTime = Math.round(duration);
+  return totalTime > 60 ? t("mins_mins_seconds_seconds", {
+    mins: Math.floor(totalTime / 60),
+    seconds: totalTime % 60
+  }) : "" + Math.round(duration) + t("seconds");
+};
+var formatQuestionOrder = function formatQuestionOrder(index, t, language) {
+  return language === exports.Language.en ? "" + (index + 1) + getOrdinalSuffix(index + 1, language) : t(ORDER_NUMBERS[index + 1]);
+};
+
 var RECENT_USER_URL = BASE_URL + "/api/recentUsers";
 var getRecentUserActionListApi = function getRecentUserActionListApi(query) {
   return api.get("" + RECENT_USER_URL, {
@@ -11650,19 +11503,18 @@ var createRecentUserActionListApi = function createRecentUserActionListApi(_ref)
   });
 };
 
-var useExamResult = function useExamResult(searchParam, history, examSessionId, studentId, code, handleChangeTab, selectedTab) {
+var useExamResult = function useExamResult(props) {
   var _allSeries$dataChartI;
-  if (examSessionId === void 0) {
-    examSessionId = 0;
-  }
-  if (studentId === void 0) {
-    studentId = 0;
-  }
-  if (code === void 0) {
-    code = "";
-  }
-  var query = new URLSearchParams(searchParam);
-  var dispatch = reactRedux.useDispatch();
+  var searchParams = props.searchParams,
+    history = props.history,
+    examSessionId = props.examSessionId,
+    studentId = props.studentId,
+    _props$code = props.code,
+    code = _props$code === void 0 ? "" : _props$code,
+    handleChangeTab = props.handleChangeTab,
+    selectedTab = props.selectedTab,
+    isPrint = props.isPrint;
+  var query = new URLSearchParams(searchParams);
   var user = reactRedux.useSelector(function (state) {
     var _state$common;
     return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
@@ -11674,7 +11526,7 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
     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 _useState = React.useState(false),
+  var _useState = React.useState(),
     isLoading = _useState[0],
     setIsLoading = _useState[1];
   var _useState2 = React.useState(),
@@ -11695,9 +11547,12 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
   var _useState7 = React.useState(0),
     dataChartIndex = _useState7[0],
     setDataChartIndex = _useState7[1];
-  var _useState8 = React.useState(""),
+  var _useState8 = React.useState(),
     openProblem = _useState8[0],
     setOpenProblem = _useState8[1];
+  var _useState9 = React.useState(),
+    errorMessage = _useState9[0],
+    setErrorMessage = _useState9[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var getStudentData = function getStudentData(examCode) {
@@ -11710,7 +11565,7 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
       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;
-          handleChangeTab(0);
+          handleChangeTab === null || handleChangeTab === void 0 ? void 0 : handleChangeTab(0);
           setDataChartIndex(0);
           setResultData((_result$0$data = result[0].data) === null || _result$0$data === void 0 ? void 0 : _result$0$data.data);
           setLongTimeSpend((_result$1$data = result[1].data) === null || _result$1$data === void 0 ? void 0 : _result$1$data.data);
@@ -11719,19 +11574,21 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
           setCategoryResponses(((_result$4$data = result[4].data) === null || _result$4$data === void 0 ? void 0 : _result$4$data.data) || []);
         });
       }, function (error) {
-        reactToastify.toast.error(getErrorMessage(t, error));
+        var message = getErrorMessage(t, error);
+        !isPrint && reactToastify.toast.error(message);
+        setErrorMessage(message);
       });
       return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  var getStudentDataByTeacher = function getStudentDataByTeacher(examCode, examSessionId, studentId) {
+  var getStudentDataByTeacher = function getStudentDataByTeacher(examSessionId, studentId) {
     try {
       var _temp5 = function _temp5() {
         setIsLoading(false);
       };
-      if (!examCode || !examSessionId || !studentId) return Promise.resolve();
+      if (!examSessionId || !studentId) return Promise.resolve();
       setIsLoading(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) {
@@ -11739,7 +11596,7 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
           function _temp3(_createRecentUserActi) {
             _createRecentUserActi;
           }
-          handleChangeTab(0);
+          handleChangeTab === null || handleChangeTab === void 0 ? void 0 : handleChangeTab(0);
           setDataChartIndex(0);
           setResultData((_result$0$data2 = result[0].data) === null || _result$0$data2 === void 0 ? void 0 : _result$0$data2.data);
           setLongTimeSpend((_result$1$data2 = result[1].data) === null || _result$1$data2 === void 0 ? void 0 : _result$1$data2.data);
@@ -11759,7 +11616,9 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
           })).then(_temp3);
         });
       }, function (error) {
-        reactToastify.toast.error(getErrorMessage(t, error));
+        var message = getErrorMessage(t, error);
+        !isPrint && reactToastify.toast.error(message);
+        setErrorMessage(message);
       });
       return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
     } catch (e) {
@@ -11774,7 +11633,9 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
     setCategoryResponses(CATEGORY_RESPONSES);
   };
   var resetData = function resetData() {
+    setIsLoading(undefined);
     setResultData(undefined);
+    setErrorMessage(undefined);
     setLongTimeSpend([]);
     setEffectSize([]);
     setTimelyOrderQuestions([]);
@@ -11785,7 +11646,7 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
       resetData();
       if (!(user !== null && user !== void 0 && user.email)) return;
       isStudent && getStudentData(examCode);
-      !isStudent && getStudentDataByTeacher(code, examSessionId, studentId);
+      !isStudent && getStudentDataByTeacher(examSessionId, studentId);
     };
     examCode === "example-code" ? setExampleData() : getData();
   }, [examCode, isStudent, code, examSessionId, studentId, user === null || user === void 0 ? void 0 : user.email]);
@@ -11825,7 +11686,7 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
               var dataPointIndex = _ref.dataPointIndex;
               if (dataPointIndex > 0) {
                 var _questions;
-                return val != null ? t("problem_number_question", {
+                return val != null ? t("problem_number_question_chart", {
                   number: questions !== null ? (((_questions = questions[questionLength - val]) === null || _questions === void 0 ? void 0 : _questions.questionOrder) || 0) + 1 : val
                 }) : t("no_data");
               }
@@ -11834,11 +11695,11 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
           }
         }),
         xaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.xaxis, {
-          categories: [""].concat(Array.from({
+          categories: ["s"].concat(Array.from({
             length: questionLength
           }, function (_, i) {
-            return ORDER_NUMBERS[i + 1] ? t(ORDER_NUMBERS[i + 1]) : toNumberOrder(i + 1);
-          }), [""]),
+            return formatQuestionOrder(i, t, language);
+          }), ["e"]),
           tooltip: {
             formatter: function formatter(val) {
               if (val > 1) return t(ORDER_NUMBERS[val - 1]);
@@ -11910,7 +11771,7 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
             var dataPointIndex = _ref2.dataPointIndex;
             if (dataPointIndex > 0) {
               var _questions3;
-              return val != null ? t("problem_number_question", {
+              return val != null ? t("problem_number_question_chart", {
                 number: questions !== null ? (((_questions3 = questions[questionLength - val]) === null || _questions3 === void 0 ? void 0 : _questions3.questionOrder) || 0) + 1 : val
               }) : t("no_data");
             }
@@ -11920,11 +11781,11 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
       }),
       colors: ['#3DC674', '#C3099A'],
       xaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.xaxis, {
-        categories: [""].concat(Array.from({
+        categories: ["s"].concat(Array.from({
           length: questionLength
         }, function (_, i) {
-          return ORDER_NUMBERS[i + 1] ? t(ORDER_NUMBERS[i + 1]) : toNumberOrder(i + 1);
-        }), [""]),
+          return formatQuestionOrder(i, t, language);
+        }), ["e"]),
         tooltip: {
           formatter: function formatter(val) {
             if (val > 1) return t(ORDER_NUMBERS[val - 1]);
@@ -11938,7 +11799,7 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
         labels: _extends({}, DEFAULT_LINE_CHART_OPTIONS.yaxis.labels, {
           formatter: function formatter(val) {
             var _questions4;
-            return val != null ? t("problem_number_question", {
+            return val != null ? t("problem_number_question_chart", {
               number: questions !== null ? (((_questions4 = questions[questionLength - val]) === null || _questions4 === void 0 ? void 0 : _questions4.questionOrder) || 0) + 1 : val
             }) : t("no_data");
           }
@@ -11947,224 +11808,6 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
     });
   }, [JSON.stringify(allChartOptions), dataChartIndex, language]);
   var series = (_allSeries$dataChartI = allSeries[dataChartIndex]) != null ? _allSeries$dataChartI : defaultSeries(t);
-  var handleExportPdf = function handleExportPdf() {
-    try {
-      var _temp24 = function _temp24(_result) {
-        if (_exit) return _result;
-        dispatch(setLoading(false));
-      };
-      var _exit = false;
-      dispatch(setLoading(true));
-      var _temp23 = _catch(function () {
-        var canvas = document.querySelector("#canvas");
-        var headerCanvas = document.querySelector("#header-canvas");
-        if (!canvas || !headerCanvas) {
-          _exit = true;
-          return;
-        }
-        var doc = new jspdf.jsPDF({
-          orientation: "p",
-          unit: "px",
-          format: "a4"
-        });
-        var WIDTH_PAPER = doc.internal.pageSize.width;
-        var HEIGHT_PAPER = doc.internal.pageSize.height;
-        var line = 0;
-        var breakPage = function breakPage() {
-          doc.addPage();
-          line = 20;
-        };
-        var imgWidth = WIDTH_PAPER;
-        var chartWidth = WIDTH_PAPER - 20;
-        return Promise.resolve(html2canvas(headerCanvas)).then(function (header) {
-          function _temp22() {
-            function _temp20(_createRecentUserActi2) {
-              _createRecentUserActi2;
-            }
-            doc.save("download.pdf");
-            return isStudent ? _temp20(!isStudent && createRecentUserActionListApi({
-              userId: studentId,
-              action: RecentUserAction$1.PrintedExamResult,
-              data: "" + examSessionId,
-              roles: [exports.Role.Teacher]
-            })) : Promise.resolve(!isStudent && createRecentUserActionListApi({
-              userId: studentId,
-              action: RecentUserAction$1.PrintedExamResult,
-              data: "" + examSessionId,
-              roles: [exports.Role.Teacher]
-            })).then(_temp20);
-          }
-          var imgHeaderHeight = header.height * imgWidth / header.width;
-          var imgHeaderData = header.toDataURL('image/png');
-          doc.addImage(imgHeaderData, 'PNG', 0, 0, imgWidth, imgHeaderHeight);
-          line += imgHeaderHeight;
-          if (line > HEIGHT_PAPER) breakPage();
-          var _temp21 = function () {
-            if (canvas && canvas.childElementCount > 0) {
-              var _index = 0;
-              var _temp19 = _for(function () {
-                return _index < canvas.childElementCount;
-              }, function () {
-                return _index++;
-              }, function () {
-                function _temp18() {
-                  function _temp16() {
-                    line += 20;
-                  }
-                  var printChartTitle = function printChartTitle() {
-                    try {
-                      if (chartTitleData && chartTitleHeight) {
-                        if (line + chartTitleHeight + 10 > HEIGHT_PAPER) breakPage();else line + 10;
-                        doc.addImage(chartTitleData, 'PNG', 10, line, chartWidth, chartTitleHeight);
-                        line += chartTitleHeight;
-                      }
-                      return Promise.resolve();
-                    } catch (e) {
-                      return Promise.reject(e);
-                    }
-                  };
-                  var _temp15 = function () {
-                    if (printContainerEls.length) {
-                      var _temp14 = _forTo(printContainerEls, function (i) {
-                        function _temp13() {
-                          function _temp11() {
-                            var printTitle = function printTitle() {
-                              try {
-                                if (!printTitleHeight || !printTitleData) return Promise.resolve();
-                                doc.addImage(printTitleData, 'PNG', 0, line, chartWidth, printTitleHeight);
-                                line += printTitleHeight;
-                                return Promise.resolve();
-                              } catch (e) {
-                                return Promise.reject(e);
-                              }
-                            };
-                            var printHeader = function printHeader(top) {
-                              if (top === void 0) {
-                                top = 0;
-                              }
-                              try {
-                                if (!printHeaderData || !printHeaderHeight) return Promise.resolve();
-                                line += top;
-                                if (line + printHeaderHeight > HEIGHT_PAPER) breakPage();
-                                doc.addImage(printHeaderData, 'PNG', 10, line, chartWidth, printHeaderHeight);
-                                line += printHeaderHeight;
-                                return Promise.resolve();
-                              } catch (e) {
-                                return Promise.reject(e);
-                              }
-                            };
-                            var printContents = printContainerEl.querySelectorAll("." + PrintContentClassName);
-                            if (!printContents.length) return;
-                            printTitle();
-                            var _temp9 = _forTo(printContents, function (j) {
-                              var rowItem = printContents[j];
-                              return Promise.resolve(html2canvas(rowItem)).then(function (rowItemCanvas) {
-                                function _temp8() {
-                                  doc.addImage(data, 'PNG', 10, line, chartWidth, height);
-                                  line += height;
-                                }
-                                var height = rowItemCanvas.height * chartWidth / rowItemCanvas.width;
-                                var data = rowItemCanvas.toDataURL('image/png');
-                                if (i === 0 && j === 0 && line + height + (printHeaderHeight || 0) + ((chartTitleHeight || 0) + 10) + 20 > HEIGHT_PAPER) breakPage();
-                                i === 0 && j === 0 && printChartTitle();
-                                var _temp7 = function () {
-                                  if (line + height + 20 > HEIGHT_PAPER) {
-                                    breakPage();
-                                    return Promise.resolve(printHeader()).then(function () {});
-                                  } else {
-                                    var _temp25 = function () {
-                                      if (j === 0) {
-                                        return Promise.resolve(printHeader(10)).then(function () {});
-                                      }
-                                    }();
-                                    if (_temp25 && _temp25.then) return _temp25.then(function () {});
-                                  }
-                                }();
-                                return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
-                              });
-                            });
-                            if (_temp9 && _temp9.then) return _temp9.then(function () {});
-                          }
-                          var _temp10 = function () {
-                            if (printHeaderEl) {
-                              return Promise.resolve(html2canvas(printHeaderEl)).then(function (_html2canvas3) {
-                                printHeaderCanvas = _html2canvas3;
-                                printHeaderHeight = printHeaderCanvas.height * chartWidth / printHeaderCanvas.width;
-                                printHeaderData = printHeaderCanvas.toDataURL('image/png');
-                              });
-                            }
-                          }();
-                          return _temp10 && _temp10.then ? _temp10.then(_temp11) : _temp11(_temp10);
-                        }
-                        var printContainerEl = printContainerEls[i];
-                        var printTitleEl = printContainerEl.querySelector("." + PrintTitleClassName);
-                        var printHeaderEl = printContainerEl.querySelector("." + PrintHeaderClassName);
-                        var printTitleCanvas = null;
-                        var printTitleHeight = null;
-                        var printTitleData = "";
-                        var printHeaderCanvas = null;
-                        var printHeaderHeight = null;
-                        var printHeaderData = "";
-                        var _temp12 = function () {
-                          if (printTitleEl) {
-                            return Promise.resolve(html2canvas(printTitleEl)).then(function (_html2canvas2) {
-                              printTitleCanvas = _html2canvas2;
-                              printTitleHeight = printTitleCanvas.height * chartWidth / printTitleCanvas.width;
-                              printTitleData = printTitleCanvas.toDataURL('image/png');
-                            });
-                          }
-                        }();
-                        return _temp12 && _temp12.then ? _temp12.then(_temp13) : _temp13(_temp12);
-                      });
-                      if (_temp14 && _temp14.then) return _temp14.then(function () {});
-                    } else {
-                      return Promise.resolve(html2canvas(chart)).then(function (chartCanvas) {
-                        var imgBodyHeight = chartCanvas.height * chartWidth / chartCanvas.width;
-                        var imgBodyData = chartCanvas.toDataURL('image/png');
-                        line += 10;
-                        if (line + imgBodyHeight + 20 + (chartTitleHeight || 0) > HEIGHT_PAPER) breakPage();
-                        printChartTitle();
-                        doc.addImage(imgBodyData, 'PNG', 10, line, chartWidth, imgBodyHeight);
-                        line += imgBodyHeight;
-                      });
-                    }
-                  }();
-                  return _temp15 && _temp15.then ? _temp15.then(_temp16) : _temp16(_temp15);
-                }
-                var chart = canvas.children.item(_index);
-                if (chart.getAttribute("id") === "header-canvas") return;
-                var chartTitle = chart.querySelector(".chart-title");
-                var printContainerEls = chart.querySelectorAll("." + PrintContainerClassName);
-                var printChartTitleCanvas = null;
-                var chartTitleHeight = null;
-                var chartTitleData = "";
-                var _temp17 = function () {
-                  if (chartTitle && printContainerEls.length) {
-                    return Promise.resolve(html2canvas(chartTitle)).then(function (_html2canvas) {
-                      printChartTitleCanvas = _html2canvas;
-                      chartTitleHeight = printChartTitleCanvas.height * chartWidth / printChartTitleCanvas.width;
-                      chartTitleData = printChartTitleCanvas.toDataURL('image/png');
-                    });
-                  }
-                }();
-                return _temp17 && _temp17.then ? _temp17.then(_temp18) : _temp18(_temp17);
-              });
-              if (_temp19 && _temp19.then) return _temp19.then(function () {});
-            }
-          }();
-          return _temp21 && _temp21.then ? _temp21.then(_temp22) : _temp22(_temp21);
-        });
-      }, function (error) {
-        console.log({
-          error: error
-        });
-        reactToastify.toast.error(getErrorMessage(t, error));
-      });
-      return Promise.resolve(_temp23 && _temp23.then ? _temp23.then(_temp24) : _temp24(_temp23));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
   React.useEffect(function () {
     setDataChartIndex(0);
   }, [selectedTab]);
@@ -12187,11 +11830,11 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
     timelyOrderQuestions: timelyOrderQuestions,
     openProblem: openProblem,
     categoryResponses: categoryResponses,
+    errorMessage: errorMessage,
     setOpenProblem: setOpenProblem,
     handlePrevChart: handlePrevChart,
     handleNextChart: handleNextChart,
-    handleExit: handleExit,
-    handleExportPdf: handleExportPdf
+    handleExit: handleExit
   };
 };
 
@@ -13308,7 +12951,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","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","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"};
+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","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","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 iconStarQuestion = function iconStarQuestion(_ref) {
   var _ref$width = _ref.width,
@@ -13699,8 +13342,7 @@ function CreateNewQuestionDialog(_ref) {
 function MyAnswer(_ref) {
   var data = _ref.data,
     categories = _ref.categories,
-    isStudent = _ref.isStudent,
-    isPrint = _ref.isPrint;
+    isStudent = _ref.isStudent;
   var _useCreateQuestionDia = useCreateQuestionDialog({
       questions: data.questions
     }),
@@ -13720,6 +13362,13 @@ function MyAnswer(_ref) {
     handleSelectQuestionOrder(id);
     toggleCreateQuestion();
   };
+  var formatTimeDiff = function formatTimeDiff(my, top) {
+    var diff = Math.round(my - top);
+    var prefix = "";
+    if (diff < 0) prefix = "-";
+    if (diff > 0) prefix = "+";
+    return "" + prefix + formatTimeSecond(Math.abs(diff), t);
+  };
   var renderQuestions = function renderQuestions(questions) {
     return questions.map(function (question, index) {
       return React__default.createElement("div", {
@@ -13782,7 +13431,7 @@ function MyAnswer(_ref) {
           margin: 0
         },
         className: styles$4["answer-response"] + " " + styles$4["answer-response-" + question.answerResponseSignal]
-      }, formatTimeSecond(Math.round(question.topDuration - question.duration), t)) : React__default.createElement("p", {
+      }, formatTimeDiff(question.duration, question.topDuration)) : React__default.createElement("p", {
         style: {
           margin: 0,
           textAlign: "center"
@@ -13821,24 +13470,12 @@ function MyAnswer(_ref) {
       })))));
     });
   };
-  var renderPrintQuestions = function renderPrintQuestions(questions) {
-    var chunkedQuestions = _.chunk(questions, 10);
-    return chunkedQuestions.map(function (i, index) {
-      return React__default.createElement("div", {
-        key: index,
-        className: PrintContentClassName
-      }, renderQuestions(i));
-    });
-  };
   return React__default.createElement("div", {
     className: styles$4["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     return React__default.createElement("div", {
-      key: item.category.id,
-      className: isPrint ? PrintContainerClassName : ""
-    }, React__default.createElement("div", {
-      className: isPrint ? PrintHeaderClassName : ""
-    }, React__default.createElement(material.Stack, {
+      key: item.category.id
+    }, React__default.createElement("div", null, React__default.createElement(material.Stack, {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
@@ -13850,6 +13487,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(material.Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13864,6 +13502,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(material.Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13878,6 +13517,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(material.Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13893,6 +13533,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(material.Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13908,6 +13549,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(material.Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13930,7 +13572,7 @@ function MyAnswer(_ref) {
       }
     }, item.category.name))), React__default.createElement("div", {
       className: styles$4["contentMyAnswer"]
-    }, isPrint ? renderPrintQuestions(item.questions) : renderQuestions(item.questions)));
+    }, renderQuestions(item.questions)));
   }), React__default.createElement(CreateNewQuestionDialog, {
     questionOptions: questionOptions,
     questionOrderSelected: questionOrderSelected,
@@ -13984,8 +13626,7 @@ var iconBtnNextChart = function iconBtnNextChart(_ref) {
 };
 
 var CompareGrass = function CompareGrass(_ref) {
-  var effectSize = _ref.effectSize,
-    isPrint = _ref.isPrint;
+  var effectSize = _ref.effectSize;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var renderTableBody = function renderTableBody(effectSize) {
@@ -14048,17 +13689,8 @@ var CompareGrass = function CompareGrass(_ref) {
       }))));
     });
   };
-  var renderPrintTableBody = function renderPrintTableBody(effectSize) {
-    var chunkedEffectSizeQuestions = _.chunk(effectSize, 10);
-    return chunkedEffectSizeQuestions.map(function (i, index) {
-      return React__default.createElement("tbody", {
-        key: index,
-        className: PrintContentClassName
-      }, renderTableBody(i));
-    });
-  };
   return React__default.createElement("div", {
-    className: styles$4["compareGrass"] + " " + (isPrint ? PrintContainerClassName : "")
+    className: "" + styles$4["compareGrass"]
   }, React__default.createElement("div", {
     className: styles$4["tableCompareGrass"]
   }, React__default.createElement("div", {
@@ -14070,8 +13702,7 @@ var CompareGrass = function CompareGrass(_ref) {
   }, React__default.createElement("thead", {
     style: {
       borderBottom: "1px solid #E4E7EC"
-    },
-    className: isPrint ? PrintHeaderClassName : ""
+    }
   }, React__default.createElement("tr", null, React__default.createElement("th", {
     className: styles$4["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
@@ -14090,7 +13721,7 @@ var CompareGrass = function CompareGrass(_ref) {
     style: {
       textAlign: "center"
     }
-  }, t("problem_classification")))), isPrint ? renderPrintTableBody(effectSize) : React__default.createElement("tbody", null, renderTableBody(effectSize))))));
+  }, t("problem_classification")))), React__default.createElement("tbody", null, renderTableBody(effectSize))))));
 };
 
 var iconX = function iconX(_ref) {
@@ -14142,8 +13773,7 @@ var TrickyProblem = function TrickyProblem(_ref) {
   var keyOpen = _ref.keyOpen,
     data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen,
-    isPrint = _ref.isPrint;
+    changeOpen = _ref.changeOpen;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var isOpen = openProblem === keyOpen;
@@ -14182,45 +13812,12 @@ var TrickyProblem = function TrickyProblem(_ref) {
       className: styles$4["noData"]
     }, t("no_data"))));
   };
-  var renderPrintProblems = function renderPrintProblems() {
-    return React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-      className: PrintContentClassName
-    }, React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"]
-    }, 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"]
-    }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
-      return React__default.createElement("span", {
-        key: question.id,
-        className: styles$4["question"]
-      }, t("number_question", {
-        number: question.questionOrder + 1
-      }));
-    }), !data.questions.length && React__default.createElement("div", {
-      className: styles$4["noData"]
-    }, t("no_data")))), React__default.createElement("div", {
-      className: PrintContentClassName
-    }, React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"]
-    }, 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"]
-    }, !!correctQuestions.length && correctQuestions.map(function (question) {
-      return React__default.createElement("div", {
-        key: question.id,
-        className: styles$4["question"]
-      }, t("number_question", {
-        number: question.questionOrder + 1
-      }));
-    }), !data.questions.length && React__default.createElement("div", {
-      className: styles$4["noData"]
-    }, t("no_data")))));
-  };
   return React__default.createElement("div", {
-    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
+    className: "" + styles$4["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: "" + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
     onClick: function onClick() {
-      return changeOpen(isOpen ? "" : keyOpen);
+      return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -14234,7 +13831,7 @@ var TrickyProblem = function TrickyProblem(_ref) {
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
     color: styles$4.gray_300
-  })), isOpen && React__default.createElement(React.Fragment, null, isPrint ? renderPrintProblems() : renderProblems()));
+  })), isOpen && React__default.createElement(React.Fragment, null, renderProblems()));
 };
 
 var ProtractedProblem = function ProtractedProblem(_ref) {
@@ -14242,7 +13839,6 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
     data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
-    isPrint = _ref.isPrint,
     isMyStoryStudent = _ref.isMyStoryStudent;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -14317,21 +13913,12 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
       }, formatTimeSecond(item.topDuration, t)))));
     });
   };
-  var renderPrintQuestions = function renderPrintQuestions() {
-    var chunkedData = _.chunk(data, 5);
-    return chunkedData.map(function (i, index) {
-      return React__default.createElement("tbody", {
-        key: index,
-        className: PrintContentClassName
-      }, isMyStoryStudent ? renderTableBody(i) : renderQuestions(i));
-    });
-  };
   return React__default.createElement("div", {
-    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
+    className: "" + styles$4["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintTitleClassName : ""),
+    className: "" + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
     onClick: function onClick() {
-      return changeOpen(isOpen ? "" : keyOpen);
+      return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
   }, React__default.createElement(material.Stack, {
     flexDirection: "row",
@@ -14367,8 +13954,7 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
   }, isMyStoryStudent && React__default.createElement("thead", {
     style: {
       borderBottom: "1px solid #E4E7EC"
-    },
-    className: isPrint ? PrintHeaderClassName : ""
+    }
   }, React__default.createElement("tr", null, React__default.createElement("th", {
     className: styles$4["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
@@ -14383,8 +13969,8 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
     style: {
       textAlign: "center"
     }
-  }, t("time_comparison")))), isPrint ? renderPrintQuestions() : React__default.createElement("tbody", null, isMyStoryStudent ? renderTableBody(data) : renderQuestions(data))))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
+  }, t("time_comparison")))), React__default.createElement("tbody", null, isMyStoryStudent ? renderTableBody(data) : renderQuestions(data))))) : React__default.createElement("div", {
+    className: "" + styles$4["noData"]
   }, t("no_data"))));
 };
 
@@ -14393,7 +13979,6 @@ var Vulnerable = function Vulnerable(_ref) {
     keyOpen = _ref.keyOpen,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
-    isPrint = _ref.isPrint,
     isMyStoryStudent = _ref.isMyStoryStudent;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -14457,11 +14042,13 @@ var Vulnerable = function Vulnerable(_ref) {
     return questions.map(function (question) {
       return React__default.createElement(material.Grid, {
         container: true,
+        flexWrap: "nowrap",
         className: styles$4["content"],
         key: question.id
       }, React__default.createElement(material.Grid, {
         item: true,
         xs: 1.5,
+        minWidth: "120px",
         className: styles$4["contentColumn1"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
         className: styles$4["span1"]
@@ -14488,22 +14075,14 @@ var Vulnerable = function Vulnerable(_ref) {
       }), ")"))));
     });
   };
-  var renderPrintQuestions = function renderPrintQuestions(questions) {
-    var chunkedQuestions = _.chunk(questions, 5);
-    return chunkedQuestions.map(function (i, index) {
-      return React__default.createElement("tbody", {
-        key: index,
-        className: PrintContentClassName
-      }, isMyStoryStudent ? renderTableBody(i) : renderQuestions(i));
-    });
+  var handleToggle = function handleToggle() {
+    changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
   };
   return React__default.createElement("div", {
-    className: styles$4["wrapperProblem"] + " " + PrintContainerClassName
+    className: "" + styles$4["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintTitleClassName : ""),
-    onClick: function onClick() {
-      return changeOpen(isOpen ? "" : keyOpen);
-    }
+    className: "" + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    onClick: handleToggle
   }, React__default.createElement(material.Stack, {
     flexDirection: "row",
     gap: "24px",
@@ -14530,16 +14109,15 @@ var Vulnerable = function Vulnerable(_ref) {
     className: styles$4["tableCompareGrass"]
   }, React__default.createElement("div", {
     className: styles$4["table-responsive"]
-  }, React__default.createElement(material.Table, {
+  }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
       marginBottom: isMyStoryStudent ? "120px" : 0
     }
-  }, isMyStoryStudent && React__default.createElement("thead", {
+  }, React__default.createElement("thead", {
     style: {
       borderBottom: "1px solid #E4E7EC"
-    },
-    className: isPrint ? PrintHeaderClassName : ""
+    }
   }, React__default.createElement("tr", null, React__default.createElement("th", {
     className: styles$4["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
@@ -14558,23 +14136,44 @@ var Vulnerable = function Vulnerable(_ref) {
     style: {
       textAlign: "center"
     }
-  }, t("_category")))), isPrint ? renderPrintQuestions(incorrectQuestions) : React__default.createElement("tbody", null, isMyStoryStudent ? renderTableBody(incorrectQuestions) : renderQuestions(incorrectQuestions))))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
+  }, t("_category")))), React__default.createElement("tbody", null, renderTableBody(incorrectQuestions))), !isMyStoryStudent && renderQuestions(incorrectQuestions))) : React__default.createElement("div", {
+    className: "" + styles$4["noData"]
   }, t("no_data"))));
 };
 
+var AnswerResponseSignal;
+(function (AnswerResponseSignal) {
+  AnswerResponseSignal[AnswerResponseSignal["Purple"] = 0] = "Purple";
+  AnswerResponseSignal[AnswerResponseSignal["Red"] = 1] = "Red";
+  AnswerResponseSignal[AnswerResponseSignal["Yellow"] = 2] = "Yellow";
+  AnswerResponseSignal[AnswerResponseSignal["Green"] = 3] = "Green";
+  AnswerResponseSignal[AnswerResponseSignal["Black"] = 4] = "Black";
+})(AnswerResponseSignal || (AnswerResponseSignal = {}));
+var ProblemKey;
+(function (ProblemKey) {
+  ProblemKey[ProblemKey["TrickyProblem"] = 0] = "TrickyProblem";
+  ProblemKey[ProblemKey["ProtractedProblem"] = 1] = "ProtractedProblem";
+  ProblemKey[ProblemKey["GradesByTerritory"] = 2] = "GradesByTerritory";
+  ProblemKey[ProblemKey["Vulnerable"] = 3] = "Vulnerable";
+})(ProblemKey || (ProblemKey = {}));
+var PrintState;
+(function (PrintState) {
+  PrintState[PrintState["Default"] = 0] = "Default";
+  PrintState[PrintState["Printing"] = 1] = "Printing";
+  PrintState[PrintState["Pending"] = 2] = "Pending";
+  PrintState[PrintState["Printed"] = 3] = "Printed";
+})(PrintState || (PrintState = {}));
+
 var GradesByTerritory = function GradesByTerritory(_ref) {
-  var keyOpen = _ref.keyOpen,
-    data = _ref.data,
+  var data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
-    isPrint = _ref.isPrint,
     resultData = _ref.resultData,
     isMyStoryStudent = _ref.isMyStoryStudent;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var formattedData = totalSolveTimeCategories(resultData, data);
-  var isOpen = openProblem === keyOpen;
+  var isOpen = openProblem === ProblemKey.GradesByTerritory;
   var renderTableBody = function renderTableBody(data) {
     return data.map(function (item, index) {
       return React__default.createElement("tr", {
@@ -14648,21 +14247,12 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       }))));
     });
   };
-  var renderPrintCategories = function renderPrintCategories() {
-    var chunkedCategories = _.chunk(formattedData, 10);
-    return chunkedCategories.map(function (i, index) {
-      return React__default.createElement("tbody", {
-        key: index,
-        className: PrintContentClassName
-      }, isMyStoryStudent ? renderTableBody(i) : renderCategories(i));
-    });
-  };
   return React__default.createElement("div", {
-    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
+    className: "" + styles$4["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintTitleClassName : ""),
+    className: "" + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
     onClick: function onClick() {
-      return changeOpen(isOpen ? "" : keyOpen);
+      return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : ProblemKey.GradesByTerritory);
     }
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -14680,16 +14270,15 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
     className: styles$4["tableCompareGrass"]
   }, React__default.createElement("div", {
     className: styles$4["table-responsive"]
-  }, React__default.createElement(material.Table, {
+  }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
       marginBottom: isMyStoryStudent ? "120px" : 0
     }
-  }, isMyStoryStudent && React__default.createElement("thead", {
+  }, React__default.createElement("thead", {
     style: {
       borderBottom: "1px solid #E4E7EC"
-    },
-    className: isPrint ? PrintHeaderClassName : ""
+    }
   }, React__default.createElement("tr", null, React__default.createElement("th", {
     className: styles$4["thcolumn1"]
   }, t("categories")), React__default.createElement("th", {
@@ -14708,8 +14297,8 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
     style: {
       textAlign: "center"
     }
-  }, t("total_solve_time")))), isPrint ? renderPrintCategories() : React__default.createElement("tbody", null, isMyStoryStudent ? renderTableBody(formattedData) : renderCategories(formattedData))))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
+  }, t("total_solve_time")))), React__default.createElement("tbody", null, renderTableBody(formattedData))), !isMyStoryStudent && renderCategories(formattedData))) : React__default.createElement("div", {
+    className: "" + styles$4["noData"]
   }, t("no_data"))));
 };
 
@@ -14913,23 +14502,379 @@ var useTab = function useTab() {
   };
 };
 
+var usePrintExamResult = function usePrintExamResult(isDataFetching, fileName, totalChart, onSuccess, onError, autoPrint) {
+  if (autoPrint === void 0) {
+    autoPrint = false;
+  }
+  var contentRef = React.useRef(null);
+  var _useState = React.useState([]),
+    renderedCharts = _useState[0],
+    setRenderedCharts = _useState[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState2 = React.useState(PrintState.Default),
+    printState = _useState2[0],
+    setPrintState = _useState2[1];
+  var setRenderedChart = function setRenderedChart(chart) {
+    setRenderedCharts(function (state) {
+      return [].concat(state, [chart]);
+    });
+  };
+  var reset = function reset() {
+    setRenderedCharts([]);
+    setPrintState(PrintState.Default);
+  };
+  var autoPrintPdf = function autoPrintPdf() {
+    if (printState === PrintState.Printing) return;
+    if (autoPrint && printState !== PrintState.Default) return;
+    if (totalChart !== renderedCharts.length) {
+      !autoPrint && setPrintState(PrintState.Pending);
+      return;
+    }
+    var name = !fileName ? "Exam-Result_" + new Date().getTime() : fileName;
+    if (contentRef.current && contentRef.current != null) {
+      setPrintState(PrintState.Printing);
+      setTimeout(function () {
+        try {
+          var _temp2 = function _temp2() {
+            setPrintState(PrintState.Printed);
+          };
+          var _temp = _catch(function () {
+            var element = contentRef.current;
+            var options = {
+              margin: 5,
+              filename: name + ".pdf",
+              html2canvas: {
+                scale: 2
+              },
+              jsPDF: {
+                format: 'a4',
+                orientation: 'portrait'
+              },
+              pagebreak: {
+                mode: ['avoid-all', 'css', 'legacy']
+              }
+            };
+            return Promise.resolve(html2pdf().from(element).set(options).save()).then(function () {
+              onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+            });
+          }, function (error) {
+            !window.opener && reactToastify.toast.error(getErrorMessage(t, error));
+            onError === null || onError === void 0 ? void 0 : onError(error === null || error === void 0 ? void 0 : error.message);
+          });
+          return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }, 300);
+    }
+  };
+  var handlePrintPdf = function handlePrintPdf() {
+    autoPrintPdf();
+  };
+  React.useEffect(function () {
+    (autoPrint || printState === PrintState.Pending) && isDataFetching === false && autoPrintPdf();
+  }, [totalChart, renderedCharts.length, fileName, autoPrint, printState, isDataFetching]);
+  React.useEffect(function () {
+    isDataFetching && reset();
+  }, [isDataFetching]);
+  return {
+    contentRef: contentRef,
+    printState: printState,
+    setRenderedChart: setRenderedChart,
+    handlePrintPdf: handlePrintPdf,
+    reset: reset
+  };
+};
+
+var printStyles = {"page-break":"_35kyG","print-exact-color":"_1PFgl","avoid-break-inside":"_3rPGh"};
+
+var TimeOrderChart = function TimeOrderChart(_ref) {
+  var timelyOrderQuestion = _ref.timelyOrderQuestion,
+    options = _ref.options,
+    series = _ref.series,
+    setIsRendered = _ref.setIsRendered;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var chartRef = React.useRef(null);
+  var chartOptions = _extends({}, options, {
+    chart: _extends({}, options.chart, {
+      animations: {
+        enabled: false
+      }
+    })
+  });
+  React.useEffect(function () {
+    if (chartRef.current) {
+      setIsRendered(timelyOrderQuestion.article);
+    }
+  }, [timelyOrderQuestion.article]);
+  return React__default.createElement("div", {
+    className: "" + printStyles["avoid-break-inside"]
+  }, React__default.createElement(material.Typography, {
+    className: "pb-2",
+    sx: {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: "#414E62"
+    }
+  }, t("article_number"), " ", timelyOrderQuestion.article), React__default.createElement("div", {
+    className: "" + styles$4["compareChart"]
+  }, React__default.createElement("div", {
+    className: "" + styles$4["prevChart"]
+  }), React__default.createElement("div", {
+    className: styles$4["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"]
+  })));
+};
+
+var textStyle = {
+  fontSize: "18px",
+  fontWeight: 700,
+  color: styles.gray_500
+};
+var courseNameStyle = {
+  fontSize: "14px",
+  fontWeight: 600,
+  color: styles.less_dark
+};
+var examTitleStyle = {
+  fontSize: "20px",
+  fontWeight: 600,
+  color: styles.darker
+};
+var studentNameStyle = {
+  fontSize: "24px",
+  fontWeight: 600,
+  color: styles.darker,
+  lineHeight: 1
+};
+var PrintExamResult = function PrintExamResult(_ref) {
+  var resultData = _ref.resultData,
+    examTime = _ref.examTime,
+    isStudent = _ref.isStudent,
+    categoryResponses = _ref.categoryResponses,
+    timelyOrderQuestions = _ref.timelyOrderQuestions,
+    allChartOptions = _ref.allChartOptions,
+    allSeries = _ref.allSeries,
+    effectSize = _ref.effectSize,
+    isMyStoryStudent = _ref.isMyStoryStudent,
+    longTimeSpend = _ref.longTimeSpend,
+    contentRef = _ref.contentRef,
+    setRenderedChart = _ref.setRenderedChart;
+  var academy = reactRedux.useSelector(function (state) {
+    var _state$common;
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.academy;
+  });
+  return React__default.createElement(material.Box, {
+    sx: {
+      minWidth: "768px",
+      width: "768px",
+      maxWidth: "768px!important",
+      background: "#FFF",
+      padding: "24px",
+      overflow: "auto"
+    },
+    id: "canvas",
+    className: printStyles["print-exact-color"] + " " + printStyles["container"],
+    ref: contentRef
+  }, React__default.createElement(material.Grid, {
+    container: true,
+    marginBottom: "24px"
+  }, React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, React__default.createElement(material.Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    flexWrap: "nowrap",
+    spacing: 1,
+    marginBottom: "12px"
+  }, React__default.createElement(material.Stack, {
+    direction: "column"
+  }, React__default.createElement(material.Typography, {
+    sx: studentNameStyle
+  }, resultData.student.fullName), React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, resultData.student.email)), academy && React__default.createElement(material.Typography, {
+    sx: _extends({}, studentNameStyle, {
+      textAlign: "end"
+    })
+  }, academy.name)), resultData.courseName && React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
+    sx: courseNameStyle
+  }, resultData.courseName)), React__default.createElement(material.Box, {
+    display: "flex",
+    gap: "16px",
+    flexDirection: "column"
+  }, React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
+    sx: examTitleStyle
+  }, resultData.title)), React__default.createElement(material.Stack, {
+    flexDirection: "row",
+    gap: "16px"
+  }, React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, i18n.t("my_score")), React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.darker
+    }
+  }, i18n.t("score_format", {
+    score: resultData === null || resultData === void 0 ? void 0 : resultData.score
+  }))), React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, i18n.t("exam_date")), React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.gray_700
+    }
+  }, utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, i18n.t("date_format")))), React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, i18n.t("exam_time")), React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.gray_700
+    }
+  }, examTime)), React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, i18n.t("total_students")), React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.gray_700
+    }
+  }, i18n.t("number_people", {
+    number: resultData === null || resultData === void 0 ? void 0 : resultData.totalStudent
+  }))), React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, i18n.t("teacher_in_charge")), React__default.createElement(material.Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.gray_700
+    }
+  }, resultData === null || resultData === void 0 ? void 0 : resultData.teacherName)))))), React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  }, React__default.createElement(material.Typography, {
+    sx: textStyle
+  }, i18n.t(TabList[0].label)), React__default.createElement(MyAnswer, {
+    data: resultData,
+    categories: categoryResponses,
+    isStudent: isStudent
+  })), React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React__default.createElement(material.Typography, {
+    sx: textStyle
+  }, i18n.t(TabList[1].label)), timelyOrderQuestions.map(function (timelyOrderQuestion, index) {
+    return React__default.createElement(TimeOrderChart, {
+      key: index,
+      timelyOrderQuestion: timelyOrderQuestion,
+      options: allChartOptions[index],
+      series: allSeries[index],
+      setIsRendered: setRenderedChart
+    });
+  })), React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React__default.createElement(material.Typography, {
+    sx: textStyle
+  }, i18n.t(TabList[2].label)), React__default.createElement(CompareGrass, {
+    effectSize: effectSize
+  })), React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React__default.createElement(material.Typography, {
+    sx: textStyle
+  }, i18n.t(TabList[3].label)), React__default.createElement(TrickyProblem, {
+    keyOpen: ProblemKey.TrickyProblem,
+    data: resultData,
+    openProblem: ProblemKey.TrickyProblem
+  }), React__default.createElement(Vulnerable, {
+    keyOpen: ProblemKey.Vulnerable,
+    data: resultData,
+    openProblem: ProblemKey.Vulnerable,
+    isMyStoryStudent: isMyStoryStudent
+  }), React__default.createElement(ProtractedProblem, {
+    keyOpen: ProblemKey.ProtractedProblem,
+    data: longTimeSpend,
+    openProblem: ProblemKey.ProtractedProblem,
+    isMyStoryStudent: isMyStoryStudent
+  }), React__default.createElement(GradesByTerritory, {
+    data: categoryResponses,
+    resultData: resultData,
+    openProblem: ProblemKey.GradesByTerritory,
+    isMyStoryStudent: isMyStoryStudent
+  })));
+};
+
 var ExamResultV2 = function ExamResultV2(_ref) {
   var searchParams = _ref.searchParams,
     history = _ref.history,
-    examSessionId = _ref.examSessionId,
-    studentId = _ref.studentId,
+    _ref$examSessionId = _ref.examSessionId,
+    examSessionId = _ref$examSessionId === void 0 ? 0 : _ref$examSessionId,
+    _ref$studentId = _ref.studentId,
+    studentId = _ref$studentId === void 0 ? 0 : _ref$studentId,
     code = _ref.code,
     isMyStoryStudent = _ref.isMyStoryStudent;
   var _useTab = useTab(),
     selected = _useTab.selected,
     handleChangeTab = _useTab.handleChangeTab;
-  var _useExamResult = useExamResult(searchParams, history, examSessionId, studentId, code, handleChangeTab, selected),
+  var _useExamResult = useExamResult({
+      searchParams: searchParams,
+      history: history,
+      examSessionId: examSessionId,
+      studentId: studentId,
+      code: code,
+      handleChangeTab: handleChangeTab,
+      selectedTab: selected
+    }),
     isLoading = _useExamResult.isLoading,
     examTime = _useExamResult.examTime,
     series = _useExamResult.series,
     allSeries = _useExamResult.allSeries,
-    chartOptions = _useExamResult.chartOptions,
     allChartOptions = _useExamResult.allChartOptions,
+    chartOptions = _useExamResult.chartOptions,
     dataChartIndex = _useExamResult.dataChartIndex,
     timelyOrderQuestions = _useExamResult.timelyOrderQuestions,
     isStudent = _useExamResult.isStudent,
@@ -14938,7 +14883,6 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     longTimeSpend = _useExamResult.longTimeSpend,
     effectSize = _useExamResult.effectSize,
     categoryResponses = _useExamResult.categoryResponses,
-    handleExportPdf = _useExamResult.handleExportPdf,
     setOpenProblem = _useExamResult.setOpenProblem,
     handlePrevChart = _useExamResult.handlePrevChart,
     handleNextChart = _useExamResult.handleNextChart;
@@ -14948,9 +14892,15 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     handleCreateQuestion = _useCreateQuestionDia.handleCreateQuestion,
     openCreateQuestionDialog = _useCreateQuestionDia.openCreateQuestionDialog,
     toggleCreateQuestion = _useCreateQuestionDia.toggleCreateQuestion;
+  var fileName = !resultData ? "" : "Exam-Result_" + resultData.student.fullName + "_" + resultData.title + "_(" + utcToLocalTime(resultData.startTime, "MM-DD-YYYY HH:mm") + ")";
+  var _usePrintExamResult = usePrintExamResult(isLoading, fileName, timelyOrderQuestions.length),
+    contentRef = _usePrintExamResult.contentRef,
+    printState = _usePrintExamResult.printState,
+    handlePrintPdf = _usePrintExamResult.handlePrintPdf,
+    setRenderedChart = _usePrintExamResult.setRenderedChart;
   var isTabletUp = material.useMediaQuery('(min-width:900px)');
   return React__default.createElement(React.Fragment, null, React__default.createElement(LoadingComponent, {
-    isLoading: isLoading
+    isLoading: !!isLoading
   }), timelyOrderQuestions[dataChartIndex] && longTimeSpend && resultData && effectSize ? React__default.createElement("div", {
     style: {
       width: "100%"
@@ -15066,7 +15016,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     className: styles$4["pdfBtnBox"]
   }, React__default.createElement("button", {
     className: styles$4["pdfBtn"] + " " + styles["truncate"],
-    onClick: handleExportPdf
+    onClick: handlePrintPdf
   }, React__default.createElement(iconPrintFill, null), React__default.createElement("p", null, t("print_all"))))))), React__default.createElement(material.Grid, {
     item: true,
     xs: 12
@@ -15112,7 +15062,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     className: styles$4["pdfBtnBox"]
   }, React__default.createElement("button", {
     className: styles$4["pdfBtn"] + " " + styles["truncate"],
-    onClick: handleExportPdf
+    onClick: handlePrintPdf
   }, React__default.createElement(iconPrintFill, null), React__default.createElement("p", null, t("print"))))))), React__default.createElement(material.Grid, {
     item: true,
     xs: 12
@@ -15149,240 +15099,54 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     value: selected,
     index: 3
   }, React__default.createElement(TrickyProblem, {
-    keyOpen: "TrickyProblem",
+    keyOpen: ProblemKey.TrickyProblem,
     data: resultData,
     openProblem: openProblem,
     changeOpen: setOpenProblem
   }), React__default.createElement(Vulnerable, {
-    keyOpen: "Vulnerable",
+    keyOpen: ProblemKey.Vulnerable,
     data: resultData,
     openProblem: openProblem,
     changeOpen: setOpenProblem,
     isMyStoryStudent: isMyStoryStudent
   }), React__default.createElement(ProtractedProblem, {
-    keyOpen: "ProtractedProblem",
+    keyOpen: ProblemKey.ProtractedProblem,
     data: longTimeSpend,
     openProblem: openProblem,
     changeOpen: setOpenProblem,
     isMyStoryStudent: isMyStoryStudent
   }), React__default.createElement(GradesByTerritory, {
-    keyOpen: "GradesByTerritory",
     data: categoryResponses,
     resultData: resultData,
     openProblem: openProblem,
     isMyStoryStudent: isMyStoryStudent,
     changeOpen: setOpenProblem
-  }))), React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12,
-    className: "position-absolute",
-    sx: {
-      zIndex: -1,
-      width: "1024px"
-    },
-    id: "canvas"
-  }, React__default.createElement(material.Grid, {
-    container: true,
-    padding: "24px",
-    id: "header-canvas"
-  }, React__default.createElement(material.Grid, {
-    item: true
-  }, resultData.courseName && React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.less_dark
-    }
-  }, resultData.courseName)), React__default.createElement(material.Box, {
-    display: "flex",
-    gap: "16px",
-    flexDirection: "column"
-  }, React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "20px",
-      fontWeight: 600,
-      color: styles.darker
-    }
-  }, resultData.title)), React__default.createElement(material.Stack, {
-    flexDirection: "row",
-    gap: "16px"
-  }, React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("my_score")), React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.darker
-    }
-  }, t("score_format", {
-    score: resultData === null || resultData === void 0 ? void 0 : resultData.score
-  }))), React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("exam_date")), React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.gray_700
-    }
-  }, utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, t("date_format")))), React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("exam_time")), React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.gray_700
-    }
-  }, examTime)), React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("total_students")), React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.gray_700
-    }
-  }, t("number_people", {
-    number: resultData === null || resultData === void 0 ? void 0 : resultData.totalStudent
-  }))), React__default.createElement(material.Stack, null, React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("teacher_in_charge")), React__default.createElement(material.Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.gray_700
-    }
-  }, resultData === null || resultData === void 0 ? void 0 : resultData.teacherName)))))), React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px"
-  }, React__default.createElement(material.Typography, {
-    className: "chart-title",
-    sx: {
-      fontSize: "18px",
-      fontWeight: 700,
-      color: styles.gray_500
-    }
-  }, t(TabList[0].label)), React__default.createElement(MyAnswer, {
-    data: resultData,
-    categories: categoryResponses,
-    isStudent: isStudent,
-    isPrint: true
-  })), React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    marginTop: "24px"
-  }, React__default.createElement(material.Typography, {
-    className: "chart-title",
-    sx: {
-      fontSize: "18px",
-      fontWeight: 700,
-      color: styles.gray_500
-    }
-  }, t(TabList[1].label)), timelyOrderQuestions.map(function (timelyOrderQuestion, index) {
-    return React__default.createElement("div", {
-      key: index,
-      className: PrintContainerClassName
-    }, React__default.createElement(material.Typography, {
-      className: "pb-2 " + PrintHeaderClassName,
-      sx: {
-        fontSize: "14px",
-        fontWeight: 700,
-        color: "#414E62"
-      }
-    }, t("article_number"), " ", timelyOrderQuestion.article), React__default.createElement("div", {
-      className: styles$4["compareChart"] + " " + PrintContentClassName
-    }, React__default.createElement("div", {
-      className: "" + styles$4["prevChart"]
-    }), React__default.createElement("div", {
-      className: styles$4["chart"] + " sr-line-chart"
-    }, React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
-      height: 389,
-      options: allChartOptions[index],
-      series: allSeries[index]
-    }))), React__default.createElement("div", {
-      className: "" + styles$4["nextChart"]
-    })));
-  })), React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    marginTop: "24px"
-  }, React__default.createElement(material.Typography, {
-    className: "chart-title",
-    sx: {
-      fontSize: "18px",
-      fontWeight: 700,
-      color: styles.gray_500
-    }
-  }, t(TabList[2].label)), React__default.createElement(CompareGrass, {
-    effectSize: effectSize,
-    isPrint: true
-  })), React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    marginTop: "24px"
-  }, React__default.createElement(material.Typography, {
-    className: "chart-title",
-    sx: {
-      fontSize: "18px",
-      fontWeight: 700,
-      color: styles.gray_500
-    }
-  }, t(TabList[3].label)), React__default.createElement(TrickyProblem, {
-    keyOpen: "TrickyProblem",
-    data: resultData,
-    openProblem: "TrickyProblem",
-    changeOpen: setOpenProblem,
-    isPrint: true
-  }), React__default.createElement(Vulnerable, {
-    keyOpen: "Vulnerable",
-    data: resultData,
-    openProblem: "Vulnerable",
-    changeOpen: setOpenProblem,
-    isMyStoryStudent: isMyStoryStudent,
-    isPrint: true
-  }), React__default.createElement(ProtractedProblem, {
-    keyOpen: "ProtractedProblem",
-    data: longTimeSpend,
-    openProblem: "ProtractedProblem",
-    changeOpen: setOpenProblem,
-    isPrint: true,
-    isMyStoryStudent: isMyStoryStudent
-  }), React__default.createElement(GradesByTerritory, {
-    keyOpen: "GradesByTerritory",
-    data: categoryResponses,
-    resultData: resultData,
-    openProblem: "GradesByTerritory",
-    changeOpen: setOpenProblem,
-    isPrint: true,
-    isMyStoryStudent: isMyStoryStudent
   })))), React__default.createElement(CreateNewQuestionDialog$1, {
     examSessionId: resultData === null || resultData === void 0 ? void 0 : resultData.examSessionId,
     handleCreateQuestion: handleCreateQuestion,
     openCreateQuestionDialog: openCreateQuestionDialog,
     toggleCreateQuestion: toggleCreateQuestion
-  })) : React__default.createElement(React.Fragment, null));
+  }), isLoading === false && React__default.createElement(material.Box, {
+    width: 0,
+    height: 0,
+    overflow: "hidden"
+  }, React__default.createElement(PrintExamResult, {
+    contentRef: contentRef,
+    allChartOptions: allChartOptions,
+    allSeries: allSeries,
+    categoryResponses: categoryResponses,
+    effectSize: effectSize,
+    examTime: examTime,
+    isStudent: isStudent,
+    longTimeSpend: longTimeSpend,
+    resultData: resultData,
+    timelyOrderQuestions: timelyOrderQuestions,
+    isMyStoryStudent: isMyStoryStudent,
+    fileName: fileName,
+    setRenderedChart: setRenderedChart
+  }))) : React__default.createElement(React.Fragment, null), React__default.createElement(LoadingComponent, {
+    isLoading: printState === PrintState.Pending || printState === PrintState.Printing
+  }));
 };
 
 var RecentUserActionSortBy;
@@ -16661,6 +16425,136 @@ var useVirtualizeList = function useVirtualizeList(totalItems, rowHeight, offset
   };
 };
 
+var usePrintView = function usePrintView(examSessionId, studentId, setNotFound, resultData, isLoading, errorMessage) {
+  var _useState = React.useState(false),
+    isDone = _useState[0],
+    setDone = _useState[1];
+  var handelPrintSuccess = function handelPrintSuccess() {
+    var _window$opener$postMe, _window$opener;
+    var data = {
+      examSessionId: examSessionId,
+      studentId: studentId,
+      succeed: true
+    };
+    if (window.opener && !window.opener.closed) (_window$opener$postMe = (_window$opener = window.opener).postMessage) === null || _window$opener$postMe === void 0 ? void 0 : _window$opener$postMe.call(_window$opener, data, window.location.origin);
+    setDone(true);
+  };
+  var handelPrintError = function handelPrintError(errorMessage) {
+    var _window$opener$postMe2, _window$opener2;
+    var data = {
+      examSessionId: examSessionId,
+      studentId: studentId,
+      succeed: false,
+      errorMessage: errorMessage
+    };
+    if (window.opener && !window.opener.closed) (_window$opener$postMe2 = (_window$opener2 = window.opener).postMessage) === null || _window$opener$postMe2 === void 0 ? void 0 : _window$opener$postMe2.call(_window$opener2, data, window.location.origin);
+    setDone(true);
+  };
+  var fileName = !resultData ? "" : "Exam-Result_" + resultData.student.fullName + "_" + resultData.title + "_(" + utcToLocalTime(resultData.startTime, "MM-DD-YYYY HH:mm") + ")";
+  React.useEffect(function () {
+    setNotFound === null || setNotFound === void 0 ? void 0 : setNotFound(isLoading === false && !!errorMessage);
+    if (isLoading === false && !!errorMessage) handelPrintError(errorMessage);
+  }, [isLoading, errorMessage]);
+  return {
+    fileName: fileName,
+    isDone: isDone,
+    handelPrintSuccess: handelPrintSuccess,
+    handelPrintError: handelPrintError
+  };
+};
+
+var LoadingDots = function LoadingDots(_ref) {
+  var text = _ref.text;
+  return React__default.createElement(material.Stack, {
+    className: "mt-3",
+    direction: "row",
+    spacing: 0.5
+  }, React__default.createElement(material.Typography, {
+    color: "#FFF",
+    fontSize: 20
+  }, text), React__default.createElement("div", {
+    className: styles$4["loader"]
+  }, React__default.createElement("div", {
+    className: styles$4["dot"]
+  }), React__default.createElement("div", {
+    className: styles$4["dot"]
+  }), React__default.createElement("div", {
+    className: styles$4["dot"]
+  })));
+};
+
+var PrintExamResultView = function PrintExamResultView(_ref) {
+  var isMyStoryStudent = _ref.isMyStoryStudent,
+    _ref$searchParams = _ref.searchParams,
+    searchParams = _ref$searchParams === void 0 ? "" : _ref$searchParams,
+    history = _ref.history,
+    _ref$examSessionId = _ref.examSessionId,
+    examSessionId = _ref$examSessionId === void 0 ? 0 : _ref$examSessionId,
+    _ref$studentId = _ref.studentId,
+    studentId = _ref$studentId === void 0 ? 0 : _ref$studentId,
+    code = _ref.code,
+    setNotFound = _ref.setNotFound;
+  var _useExamResult = useExamResult({
+      searchParams: searchParams,
+      history: history,
+      examSessionId: examSessionId,
+      studentId: studentId,
+      code: code,
+      isPrint: true
+    }),
+    isLoading = _useExamResult.isLoading,
+    examTime = _useExamResult.examTime,
+    allSeries = _useExamResult.allSeries,
+    allChartOptions = _useExamResult.allChartOptions,
+    timelyOrderQuestions = _useExamResult.timelyOrderQuestions,
+    isStudent = _useExamResult.isStudent,
+    resultData = _useExamResult.resultData,
+    longTimeSpend = _useExamResult.longTimeSpend,
+    effectSize = _useExamResult.effectSize,
+    categoryResponses = _useExamResult.categoryResponses,
+    errorMessage = _useExamResult.errorMessage;
+  var _usePrintView = usePrintView(examSessionId, studentId, setNotFound, resultData, isLoading, errorMessage),
+    fileName = _usePrintView.fileName,
+    isDone = _usePrintView.isDone,
+    handelPrintSuccess = _usePrintView.handelPrintSuccess,
+    handelPrintError = _usePrintView.handelPrintError;
+  var _usePrintExamResult = usePrintExamResult(isLoading, fileName, timelyOrderQuestions.length, handelPrintSuccess, handelPrintError, true),
+    contentRef = _usePrintExamResult.contentRef,
+    setRenderedChart = _usePrintExamResult.setRenderedChart;
+  var isTabletUp = material.useMediaQuery("(min-width:900px)");
+  return React__default.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      justifyContent: "center"
+    },
+    displayPrint: "block"
+  }, isLoading === false && resultData && effectSize ? React__default.createElement(PrintExamResult, {
+    contentRef: contentRef,
+    allChartOptions: allChartOptions,
+    allSeries: allSeries,
+    categoryResponses: categoryResponses,
+    effectSize: effectSize,
+    examTime: examTime,
+    isStudent: isStudent,
+    longTimeSpend: longTimeSpend,
+    resultData: resultData,
+    timelyOrderQuestions: timelyOrderQuestions,
+    isMyStoryStudent: isMyStoryStudent,
+    fileName: fileName,
+    setRenderedChart: setRenderedChart
+  }) : isLoading === undefined || isLoading === true ? React__default.createElement(LoadingComponent, {
+    isLoading: !!isLoading,
+    spinClassName: "text-white"
+  }, isTabletUp && React__default.createElement(LoadingDots, {
+    text: "Loading data"
+  })) : React__default.createElement(NotFound, null), React__default.createElement(LoadingComponent, {
+    isLoading: isDone !== true && isLoading === false && !!resultData,
+    spinClassName: "text-white"
+  }, isTabletUp && React__default.createElement(LoadingDots, {
+    text: "Please wait for a while! Printing"
+  })));
+};
+
 exports.moment = moment;
 Object.defineProperty(exports, 'I18nextProvider', {
     enumerable: true,
@@ -16724,6 +16618,7 @@ exports.LoginWithPassword = SignIn;
 exports.NotFound = NotFound;
 exports.PUSHER_CONFIG = PUSHER_CONFIG;
 exports.PassCodeCheck = PassCodeCheck;
+exports.PrintExamResultView = PrintExamResultView;
 exports.QuestionCountSelector = QuestionCountSelector;
 exports.RecentUserAction = RecentUserAction;
 exports.SUPER_ADMIN_BASE_URL = SUPER_ADMIN_BASE_URL;
@@ -16747,7 +16642,7 @@ exports.getAccessToken = getAccessToken;
 exports.getErrorMessage = getErrorMessage;
 exports.getOrdinalSuffix = getOrdinalSuffix;
 exports.getRecentUserActionListApi = getRecentUserActionListApi;
-exports.i18n = i18n;
+exports.i18n = i18n__default;
 exports.minutesToTimeSpan = minutesToTimeSpan;
 exports.setAlert = setAlert;
 exports.setLanguage = setLanguage;