touchstudy-core 0.1.72 → 0.1.74

package/dist/index.modern.js

@@ -15,7 +15,7 @@ import 'moment/locale/ko.js';
 import 'moment/locale/en-au.js';
 import Pusher from 'pusher-js';
 import { IoClose, IoCloseCircle, IoLogOut, IoCloseOutline, IoSearch, IoChevronUp, IoChevronDown } from 'react-icons/io5';
-import i18n from 'i18next';
+import i18n, { t as t$1 } from 'i18next';
 import Box$1 from '@mui/material/Box';
 import Popover from '@mui/material/Popover';
 import MenuItem from '@mui/material/MenuItem';
@@ -30,13 +30,12 @@ import { IoMdArrowBack } from 'react-icons/io';
 import _ from 'lodash';
 import { FaPencil } from 'react-icons/fa6';
 import CreatableSelect from 'react-select/creatable';
-import html2canvas from 'html2canvas';
-import { jsPDF } from 'jspdf';
 import Button$1 from '@mui/material/Button';
 import DialogTitle$1 from '@mui/material/DialogTitle';
 import DialogContent$1 from '@mui/material/DialogContent';
 import DialogActions$1 from '@mui/material/DialogActions';
 import Typography$1 from '@mui/material/Typography';
+import html2pdf from 'html2pdf.js';
 import Avatar from '@mui/material/Avatar';
 import TextField$1 from '@mui/material/TextField';
 import Paper$1 from '@mui/material/Paper';
@@ -123,10 +122,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 +171,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 {
@@ -1499,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 = useTranslation(),
@@ -1529,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) {
@@ -1670,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(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 = 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(Fragment$1, null, children);
@@ -1885,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 = useDispatch();
   var _useState = useState(),
@@ -1943,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
   };
 };
 
@@ -2604,7 +2429,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 = "학생 전화번호";
@@ -2630,6 +2455,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 }} 개의 시험 세션이 동기화되고 있습니다"
@@ -3373,6 +3205,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,
@@ -3509,8 +3348,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";
@@ -3586,8 +3425,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";
@@ -3660,8 +3499,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";
@@ -3690,7 +3530,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";
@@ -4120,6 +3960,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"
@@ -4408,6 +4255,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,
@@ -4862,6 +4710,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,
@@ -5666,7 +5521,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,
@@ -5699,13 +5553,15 @@ var ChatRightItem = function ChatRightItem(_ref) {
     alignItems: "center",
     justifyContent: "end",
     flexDirection: "row"
-  }, React__default.createElement(iconPersonNoActive, null), React__default.createElement(Typography, {
+  }, React__default.createElement(iconPersonNoActive, {
+    color: styles.gray_700
+  }), React__default.createElement(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(Stack, {
+  }, t("me"))), React__default.createElement(Stack, {
     display: "flex",
     flexDirection: "row",
     gap: "8px",
@@ -6594,7 +6450,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(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(Box, {
       display: "flex",
       alignItems: "end",
       gap: "6px",
@@ -6615,16 +6471,12 @@ var ChatHeader = function ChatHeader(_ref) {
       fontSize: "12px",
       lineHeight: "14.32px",
       color: styles.less_dark
-    }, t("points", {
-      number: score || 0
-    })), React__default.createElement(Typography, {
+    }, score || 0), React__default.createElement(Typography, {
       fontWeight: 700,
       fontSize: "12px",
       lineHeight: "14.32px",
       color: styles.gray_300
-    }, "/", t("points", {
-      number: totalScore || 0
-    }))), React__default.createElement(Typography, {
+    }, "/", totalScore || 0)), React__default.createElement(Typography, {
       fontWeight: 500,
       fontSize: "12px",
       lineHeight: "14.32px",
@@ -7575,45 +7427,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 = useDispatch();
+  var categoryList = _ref.categoryList;
   var _useState = useState(),
-    categoryList = _useState[0],
-    setCategoryList = _useState[1];
-  var _useState2 = useState(),
-    selectedCategory = _useState2[0],
-    setSelectedCategory = _useState2[1];
-  var isDomain = 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 = 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(Role.Admin) && !isDomain;
+    selectedCategory = _useState[0],
+    setSelectedCategory = _useState[1];
   var categoryOptions = useMemo(function () {
     return categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(function (category) {
       var _category$path;
@@ -7623,39 +7441,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);
-    }
-  };
-  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) {
@@ -7748,7 +7533,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,
@@ -7763,7 +7548,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   var _useTranslation = 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 = useTheme();
@@ -9628,12 +9413,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 = useTranslation(),
     t = _useTranslation.t;
+  var firstLoad = true;
+  var dispatch = useDispatch();
+  var isDomain = 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 = 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(Role.Admin) && !isDomain;
+  var _useState = useState([]),
+    categoryList = _useState[0],
+    setCategoryList = _useState[1];
   var handleChangeQuestionCount = function handleChangeQuestionCount(article, questionCount, answerCount) {
     if (!exam) return;
     var examQuestions = exam.questions;
@@ -9811,6 +9629,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);
+    }
+  };
+  useEffect(function () {
+    if (categoryList !== null && categoryList !== void 0 && categoryList.length) return;
+    getCategoryList();
+  }, [exam.subjectId, JSON.stringify(categoryList)]);
   var examGroupByArticle = useMemo(function () {
     if (!exam) return [];
     var articles = [];
@@ -9835,27 +9686,23 @@ var useExamDetailView = function useExamDetailView(props) {
   var durationOptions = 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]);
-  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,
@@ -9877,16 +9724,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,
@@ -9935,10 +9785,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
@@ -9949,6 +9799,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,
@@ -10833,18 +10684,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",
@@ -10899,6 +10738,7 @@ var EXAM_RESULT = {
     parentPhoneNumber: "",
     schoolName: "Academy",
     className: "1",
+    fullName: "Abc",
     major: "",
     roles: []
   },
@@ -11631,6 +11471,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 === 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, {
@@ -11653,19 +11505,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 = 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 = 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;
@@ -11677,7 +11528,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 = useState(false),
+  var _useState = useState(),
     isLoading = _useState[0],
     setIsLoading = _useState[1];
   var _useState2 = useState(),
@@ -11698,9 +11549,12 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
   var _useState7 = useState(0),
     dataChartIndex = _useState7[0],
     setDataChartIndex = _useState7[1];
-  var _useState8 = useState(""),
+  var _useState8 = useState(),
     openProblem = _useState8[0],
     setOpenProblem = _useState8[1];
+  var _useState9 = useState(),
+    errorMessage = _useState9[0],
+    setErrorMessage = _useState9[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var getStudentData = function getStudentData(examCode) {
@@ -11713,7 +11567,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);
@@ -11722,19 +11576,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) {
-        toast.error(getErrorMessage(t, error));
+        var message = getErrorMessage(t, error);
+        !isPrint && 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) {
@@ -11742,7 +11598,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);
@@ -11762,7 +11618,9 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
           })).then(_temp3);
         });
       }, function (error) {
-        toast.error(getErrorMessage(t, error));
+        var message = getErrorMessage(t, error);
+        !isPrint && toast.error(message);
+        setErrorMessage(message);
       });
       return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
     } catch (e) {
@@ -11777,7 +11635,9 @@ var useExamResult = function useExamResult(searchParam, history, examSessionId,
     setCategoryResponses(CATEGORY_RESPONSES);
   };
   var resetData = function resetData() {
+    setIsLoading(undefined);
     setResultData(undefined);
+    setErrorMessage(undefined);
     setLongTimeSpend([]);
     setEffectSize([]);
     setTimelyOrderQuestions([]);
@@ -11788,7 +11648,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]);
@@ -11828,7 +11688,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");
               }
@@ -11837,11 +11697,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]);
@@ -11913,7 +11773,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");
             }
@@ -11923,11 +11783,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]);
@@ -11941,7 +11801,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");
           }
@@ -11950,224 +11810,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({
-          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: [Role.Teacher]
-            })) : Promise.resolve(!isStudent && createRecentUserActionListApi({
-              userId: studentId,
-              action: RecentUserAction$1.PrintedExamResult,
-              data: "" + examSessionId,
-              roles: [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
-        });
-        toast.error(getErrorMessage(t, error));
-      });
-      return Promise.resolve(_temp23 && _temp23.then ? _temp23.then(_temp24) : _temp24(_temp23));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
   useEffect(function () {
     setDataChartIndex(0);
   }, [selectedTab]);
@@ -12190,11 +11832,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
   };
 };
 
@@ -13311,7 +12953,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,
@@ -13702,8 +13344,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
     }),
@@ -13723,6 +13364,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", {
@@ -13785,7 +13433,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"
@@ -13824,24 +13472,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(Stack, {
+      key: item.category.id
+    }, React__default.createElement("div", null, React__default.createElement(Stack, {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
@@ -13853,6 +13489,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13867,6 +13504,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13881,6 +13519,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13896,6 +13535,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13911,6 +13551,7 @@ function MyAnswer(_ref) {
         gap: "4px"
       }
     }, React__default.createElement(Typography, {
+      paddingInline: "4px",
       sx: {
         fontSize: "13px",
         fontWeight: 600,
@@ -13933,7 +13574,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,
@@ -13987,8 +13628,7 @@ var iconBtnNextChart = function iconBtnNextChart(_ref) {
 };
 
 var CompareGrass = function CompareGrass(_ref) {
-  var effectSize = _ref.effectSize,
-    isPrint = _ref.isPrint;
+  var effectSize = _ref.effectSize;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var renderTableBody = function renderTableBody(effectSize) {
@@ -14051,17 +13691,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", {
@@ -14073,8 +13704,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", {
@@ -14093,7 +13723,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) {
@@ -14145,8 +13775,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 = useTranslation(),
     t = _useTranslation.t;
   var isOpen = openProblem === keyOpen;
@@ -14185,45 +13814,12 @@ var TrickyProblem = function TrickyProblem(_ref) {
       className: styles$4["noData"]
     }, t("no_data"))));
   };
-  var renderPrintProblems = function renderPrintProblems() {
-    return React__default.createElement(Fragment$1, 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(Typography, {
     sx: {
@@ -14237,7 +13833,7 @@ var TrickyProblem = function TrickyProblem(_ref) {
   }) : React__default.createElement(IoChevronDown, {
     size: 24,
     color: styles$4.gray_300
-  })), isOpen && React__default.createElement(Fragment$1, null, isPrint ? renderPrintProblems() : renderProblems()));
+  })), isOpen && React__default.createElement(Fragment$1, null, renderProblems()));
 };
 
 var ProtractedProblem = function ProtractedProblem(_ref) {
@@ -14245,7 +13841,6 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
     data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
-    isPrint = _ref.isPrint,
     isMyStoryStudent = _ref.isMyStoryStudent;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -14320,21 +13915,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(Stack, {
     flexDirection: "row",
@@ -14370,8 +13956,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", {
@@ -14386,8 +13971,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"))));
 };
 
@@ -14396,7 +13981,6 @@ var Vulnerable = function Vulnerable(_ref) {
     keyOpen = _ref.keyOpen,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
-    isPrint = _ref.isPrint,
     isMyStoryStudent = _ref.isMyStoryStudent;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -14460,11 +14044,13 @@ var Vulnerable = function Vulnerable(_ref) {
     return questions.map(function (question) {
       return React__default.createElement(Grid, {
         container: true,
+        flexWrap: "nowrap",
         className: styles$4["content"],
         key: question.id
       }, React__default.createElement(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"]
@@ -14491,22 +14077,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(Stack, {
     flexDirection: "row",
     gap: "24px",
@@ -14533,16 +14111,15 @@ var Vulnerable = function Vulnerable(_ref) {
     className: styles$4["tableCompareGrass"]
   }, React__default.createElement("div", {
     className: styles$4["table-responsive"]
-  }, React__default.createElement(Table, {
+  }, isMyStoryStudent && React__default.createElement(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", {
@@ -14561,23 +14138,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 = 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", {
@@ -14651,21 +14249,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(Typography, {
     sx: {
@@ -14683,16 +14272,15 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
     className: styles$4["tableCompareGrass"]
   }, React__default.createElement("div", {
     className: styles$4["table-responsive"]
-  }, React__default.createElement(Table, {
+  }, isMyStoryStudent && React__default.createElement(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", {
@@ -14711,8 +14299,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"))));
 };
 
@@ -14916,23 +14504,379 @@ var useTab = function useTab() {
   };
 };
 
+var usePrintExamResult = function usePrintExamResult(isDataFetching, fileName, totalChart, onSuccess, onError, autoPrint) {
+  if (autoPrint === void 0) {
+    autoPrint = false;
+  }
+  var contentRef = useRef(null);
+  var _useState = useState([]),
+    renderedCharts = _useState[0],
+    setRenderedCharts = _useState[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState2 = 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 && 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();
+  };
+  useEffect(function () {
+    (autoPrint || printState === PrintState.Pending) && isDataFetching === false && autoPrintPdf();
+  }, [totalChart, renderedCharts.length, fileName, autoPrint, printState, isDataFetching]);
+  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 = useTranslation(),
+    t = _useTranslation.t;
+  var chartRef = useRef(null);
+  var chartOptions = _extends({}, options, {
+    chart: _extends({}, options.chart, {
+      animations: {
+        enabled: false
+      }
+    })
+  });
+  useEffect(function () {
+    if (chartRef.current) {
+      setIsRendered(timelyOrderQuestion.article);
+    }
+  }, [timelyOrderQuestion.article]);
+  return React__default.createElement("div", {
+    className: "" + printStyles["avoid-break-inside"]
+  }, React__default.createElement(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 = 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(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(Grid, {
+    container: true,
+    marginBottom: "24px"
+  }, React__default.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, React__default.createElement(Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    flexWrap: "nowrap",
+    spacing: 1,
+    marginBottom: "12px"
+  }, React__default.createElement(Stack, {
+    direction: "column"
+  }, React__default.createElement(Typography, {
+    sx: studentNameStyle
+  }, resultData.student.fullName), React__default.createElement(Typography, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, resultData.student.email)), academy && React__default.createElement(Typography, {
+    sx: _extends({}, studentNameStyle, {
+      textAlign: "end"
+    })
+  }, academy.name)), resultData.courseName && React__default.createElement(Stack, null, React__default.createElement(Typography, {
+    sx: courseNameStyle
+  }, resultData.courseName)), React__default.createElement(Box, {
+    display: "flex",
+    gap: "16px",
+    flexDirection: "column"
+  }, React__default.createElement(Stack, null, React__default.createElement(Typography, {
+    sx: examTitleStyle
+  }, resultData.title)), React__default.createElement(Stack, {
+    flexDirection: "row",
+    gap: "16px"
+  }, React__default.createElement(Stack, null, React__default.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, t$1("my_score")), React__default.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.darker
+    }
+  }, t$1("score_format", {
+    score: resultData === null || resultData === void 0 ? void 0 : resultData.score
+  }))), React__default.createElement(Stack, null, React__default.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, t$1("exam_date")), React__default.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.gray_700
+    }
+  }, utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, t$1("date_format")))), React__default.createElement(Stack, null, React__default.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, t$1("exam_time")), React__default.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.gray_700
+    }
+  }, examTime)), React__default.createElement(Stack, null, React__default.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, t$1("total_students")), React__default.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.gray_700
+    }
+  }, t$1("number_people", {
+    number: resultData === null || resultData === void 0 ? void 0 : resultData.totalStudent
+  }))), React__default.createElement(Stack, null, React__default.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: styles.gray_500
+    }
+  }, t$1("teacher_in_charge")), React__default.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: styles.gray_700
+    }
+  }, resultData === null || resultData === void 0 ? void 0 : resultData.teacherName)))))), React__default.createElement(Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  }, React__default.createElement(Typography, {
+    sx: textStyle
+  }, t$1(TabList[0].label)), React__default.createElement(MyAnswer, {
+    data: resultData,
+    categories: categoryResponses,
+    isStudent: isStudent
+  })), React__default.createElement(Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React__default.createElement(Typography, {
+    sx: textStyle
+  }, t$1(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(Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React__default.createElement(Typography, {
+    sx: textStyle
+  }, t$1(TabList[2].label)), React__default.createElement(CompareGrass, {
+    effectSize: effectSize
+  })), React__default.createElement(Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React__default.createElement(Typography, {
+    sx: textStyle
+  }, t$1(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,
@@ -14941,7 +14885,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;
@@ -14951,9 +14894,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 = useMediaQuery('(min-width:900px)');
   return React__default.createElement(Fragment$1, null, React__default.createElement(LoadingComponent, {
-    isLoading: isLoading
+    isLoading: !!isLoading
   }), timelyOrderQuestions[dataChartIndex] && longTimeSpend && resultData && effectSize ? React__default.createElement("div", {
     style: {
       width: "100%"
@@ -15069,7 +15018,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(Grid, {
     item: true,
     xs: 12
@@ -15115,7 +15064,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(Grid, {
     item: true,
     xs: 12
@@ -15152,240 +15101,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(Grid, {
-    item: true,
-    xs: 12,
-    className: "position-absolute",
-    sx: {
-      zIndex: -1,
-      width: "1024px"
-    },
-    id: "canvas"
-  }, React__default.createElement(Grid, {
-    container: true,
-    padding: "24px",
-    id: "header-canvas"
-  }, React__default.createElement(Grid, {
-    item: true
-  }, resultData.courseName && React__default.createElement(Stack, null, React__default.createElement(Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.less_dark
-    }
-  }, resultData.courseName)), React__default.createElement(Box, {
-    display: "flex",
-    gap: "16px",
-    flexDirection: "column"
-  }, React__default.createElement(Stack, null, React__default.createElement(Typography, {
-    sx: {
-      fontSize: "20px",
-      fontWeight: 600,
-      color: styles.darker
-    }
-  }, resultData.title)), React__default.createElement(Stack, {
-    flexDirection: "row",
-    gap: "16px"
-  }, React__default.createElement(Stack, null, React__default.createElement(Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("my_score")), React__default.createElement(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(Stack, null, React__default.createElement(Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("exam_date")), React__default.createElement(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(Stack, null, React__default.createElement(Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("exam_time")), React__default.createElement(Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.gray_700
-    }
-  }, examTime)), React__default.createElement(Stack, null, React__default.createElement(Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("total_students")), React__default.createElement(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(Stack, null, React__default.createElement(Typography, {
-    sx: {
-      fontSize: "13px",
-      fontWeight: 600,
-      color: styles.gray_500
-    }
-  }, t("teacher_in_charge")), React__default.createElement(Typography, {
-    sx: {
-      fontSize: "14px",
-      fontWeight: 600,
-      color: styles.gray_700
-    }
-  }, resultData === null || resultData === void 0 ? void 0 : resultData.teacherName)))))), React__default.createElement(Stack, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px"
-  }, React__default.createElement(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(Stack, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    marginTop: "24px"
-  }, React__default.createElement(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(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(Stack, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    marginTop: "24px"
-  }, React__default.createElement(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(Stack, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    marginTop: "24px"
-  }, React__default.createElement(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(Fragment$1, null));
+  }), isLoading === false && React__default.createElement(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(Fragment$1, null), React__default.createElement(LoadingComponent, {
+    isLoading: printState === PrintState.Pending || printState === PrintState.Printing
+  }));
 };
 
 var RecentUserActionSortBy;
@@ -16664,5 +16427,135 @@ var useVirtualizeList = function useVirtualizeList(totalItems, rowHeight, offset
   };
 };
 
-export { ACADEMY_DOMAIN, ACCESS_TOKEN, AcademyHeaders, AcademyList, AnswerCountSelector, ArticleCategorySelector, ArticleGroupView, BASE_URL, ChatContainer, ChatItemType, types as ChatTypes, CommonDialog, ConfirmDialog, index$1 as CoreHooks, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, CustomSelectOption, DATE_MIN_VALUE, DATE_TIME_MIN_VALUE, DEFAULT_PAGING_RESPONSE, DefaultErrorMessage, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, index as Enums, ExamDetailView, ExamEvent, ExamResultV2, Header, InputText, LANGUAGES, Language, LayoutContext, Loading, LoadingComponent, Login, SignIn as LoginWithPassword, NotFound, PUSHER_CONFIG, PassCodeCheck, QuestionCountSelector, RecentUserAction, Role, SUPER_ADMIN_BASE_URL, ScoreSelector, SubjectSelector, index$2 as Textbook, TextbookViewDetail as TextbookDetail, TextbookList, TheAcademyDropdown, TheLanguageDropdown, index$3 as Types, api, apiUpload, canAccess as canAccessRoute, checkSuperUrl, createRecentUserActionListApi, diffFromNow, formatTime, getAcademyDomain, getAccessToken, getErrorMessage, getOrdinalSuffix, getRecentUserActionListApi, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setReFetchUserAcademies, setReadyRegisterPusher, setUser, store, times as timeUtils, toISOString, useAutoAcademyDomain, useCategorySelect, useChatContainer, useCountDownTimer, useGoogleSignOut, useLanguage, useLoadMore, useLogin, usePusherConversation, useSubjectSelect, useSwitchAcademy, useVirtualizeList, utcToLocalTime };
+var usePrintView = function usePrintView(examSessionId, studentId, setNotFound, resultData, isLoading, errorMessage) {
+  var _useState = 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") + ")";
+  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(Stack, {
+    className: "mt-3",
+    direction: "row",
+    spacing: 0.5
+  }, React__default.createElement(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 = useMediaQuery("(min-width:900px)");
+  return React__default.createElement(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"
+  })));
+};
+
+export { ACADEMY_DOMAIN, ACCESS_TOKEN, AcademyHeaders, AcademyList, AnswerCountSelector, ArticleCategorySelector, ArticleGroupView, BASE_URL, ChatContainer, ChatItemType, types as ChatTypes, CommonDialog, ConfirmDialog, index$1 as CoreHooks, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, CustomSelectOption, DATE_MIN_VALUE, DATE_TIME_MIN_VALUE, DEFAULT_PAGING_RESPONSE, DefaultErrorMessage, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, index as Enums, ExamDetailView, ExamEvent, ExamResultV2, Header, InputText, LANGUAGES, Language, LayoutContext, Loading, LoadingComponent, Login, SignIn as LoginWithPassword, NotFound, PUSHER_CONFIG, PassCodeCheck, PrintExamResultView, QuestionCountSelector, RecentUserAction, Role, SUPER_ADMIN_BASE_URL, ScoreSelector, SubjectSelector, index$2 as Textbook, TextbookViewDetail as TextbookDetail, TextbookList, TheAcademyDropdown, TheLanguageDropdown, index$3 as Types, api, apiUpload, canAccess as canAccessRoute, checkSuperUrl, createRecentUserActionListApi, diffFromNow, formatTime, getAcademyDomain, getAccessToken, getErrorMessage, getOrdinalSuffix, getRecentUserActionListApi, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setReFetchUserAcademies, setReadyRegisterPusher, setUser, store, times as timeUtils, toISOString, useAutoAcademyDomain, useCategorySelect, useChatContainer, useCountDownTimer, useGoogleSignOut, useLanguage, useLoadMore, useLogin, usePusherConversation, useSubjectSelect, useSwitchAcademy, useVirtualizeList, utcToLocalTime };
 //# sourceMappingURL=index.modern.js.map