touchstudy-core 0.1.33 → 0.1.35

package/dist/index.modern.js

@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import axios from 'axios';
 import { useTranslation, initReactI18next } from 'react-i18next';
 export { I18nextProvider, useTranslation } from 'react-i18next';
-import { Grid, Dialog, DialogTitle, IconButton, DialogContent, TextField, DialogActions, Button, Box, Typography, Pagination, styled, Tooltip, tooltipClasses, Stack, ClickAwayListener, useMediaQuery, CircularProgress, FormControl, RadioGroup, FormControlLabel, Radio, FormGroup, FormLabel, InputLabel, Container, Table, TableBody, TableRow, TableCell, TableHead, Paper, InputBase } from '@mui/material';
+import { Grid, Dialog, DialogTitle, IconButton, DialogContent, TextField, DialogActions, Button, Box, Typography, Pagination, styled, Tooltip, tooltipClasses, Stack, ClickAwayListener, useTheme, useMediaQuery, CircularProgress, FormControl, RadioGroup, FormControlLabel, Radio, FormGroup, FormLabel, Checkbox, InputLabel, Container, Table, TableBody, TableRow, TableCell, TableHead, Paper, InputBase } from '@mui/material';
 import { gapi } from 'gapi-script';
 import Pusher from 'pusher-js';
 import { IoClose, IoCloseOutline, IoSearch } from 'react-icons/io5';
@@ -24,9 +24,9 @@ import { GoArrowSwitch } from 'react-icons/go';
 import { toast } from 'react-toastify';
 export { ToastContainer, toast } from 'react-toastify';
 import Select, { components } from 'react-select';
-import { FaCaretDown, FaTrash, FaPlus, FaSave, FaPencilAlt, FaSortUp, FaSortDown, FaEye, FaPlusCircle } from 'react-icons/fa';
+import { FaCaretDown, FaTrash, FaPlus, FaSave, FaPencilAlt, FaPlusCircle, FaTimes, FaSortUp, FaSortDown, FaEye } from 'react-icons/fa';
 import { PiDotsNineLight } from 'react-icons/pi';
-import { IoMdArrowBack } from 'react-icons/io';
+import { IoMdArrowBack, IoIosLogOut } from 'react-icons/io';
 import _ from 'lodash';
 import { FaPencil } from 'react-icons/fa6';
 import CreatableSelect from 'react-select/creatable';
@@ -37,6 +37,7 @@ 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 { useLocation, Link } from 'react-router-dom';
 
 var setLoading = createAction("common/setLoading");
 var setAlert = createAction("common/setAlert");
@@ -136,7 +137,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var styleGlobal = {"btn-login-google":"_2HqmH","block-login":"_wWIyO","box-login":"_38Lo1","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"};
+var styles = {"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","image-academy--item":"_3RDWF","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"};
 
 var AuthenticationMessage;
 (function (AuthenticationMessage) {
@@ -463,18 +464,18 @@ var BlockLogin = function BlockLogin(_ref) {
     var handleSubmit = formikProps.handleSubmit;
     return React.createElement(Grid, {
       container: true,
-      className: "" + styleGlobal["box-login"]
+      className: "" + styles["box-login"]
     }, React.createElement(Grid, {
       item: true,
       className: "p-0 d-flex justify-content-center"
     }, React.createElement("form", {
-      className: "" + styleGlobal["block-login"],
+      className: "" + styles["block-login"],
       onSubmit: handleSubmit
     }, React.createElement("div", {
-      className: "" + styleGlobal["block-form"]
+      className: "" + styles["block-form"]
     }, React.createElement("img", {
       src: "/images/logo.jpeg",
-      className: "" + styleGlobal["img-login-rectangle"]
+      className: "" + styles["img-login-rectangle"]
     }), React.createElement("div", {
       className: "p-0 mt-1 mb-4"
     }, React.createElement(GoogleLogin, {
@@ -483,7 +484,7 @@ var BlockLogin = function BlockLogin(_ref) {
       onSuccess: onSuccessGoogle,
       onFailure: onFailureGoogle,
       cookiePolicy: "single_host_origin",
-      className: "" + styleGlobal["btn-login-google"],
+      className: "" + styles["btn-login-google"],
       isSignedIn: true
     }))))));
   });
@@ -547,7 +548,7 @@ var Login = function Login(_ref) {
   var _useLogin = useLogin$1(onNavigate),
     defaultInfo = _useLogin.defaultInfo;
   return React.createElement("div", {
-    className: styleGlobal["login"] + " container-fluid font-family-lato"
+    className: styles["login"] + " container-fluid font-family-lato"
   }, React.createElement(Grid, {
     container: true,
     spacing: 3,
@@ -880,6 +881,7 @@ var switchAcademy = function switchAcademy(academyId) {
 };
 
 var LayoutContext = function LayoutContext(_ref) {
+  var _currentPusher$connec, _currentPusher$connec3;
   var children = _ref.children,
     role = _ref.role,
     _ref$pusherRegisterUr = _ref.pusherRegisterUrls,
@@ -904,6 +906,7 @@ var LayoutContext = function LayoutContext(_ref) {
     var _state$common3;
     return state === null || state === void 0 ? void 0 : (_state$common3 = state.common) === null || _state$common3 === void 0 ? void 0 : _state$common3.concurrentConnectionPusher;
   });
+  var currentPusher = concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.pusher;
   var roles = (user === null || user === void 0 ? void 0 : user.roles) || [];
   var academyDomain = user === null || user === void 0 ? void 0 : user.academyDomain;
   var pathname = window.location.pathname;
@@ -970,31 +973,41 @@ var LayoutContext = function LayoutContext(_ref) {
       return Promise.reject(e);
     }
   };
+  console.log({
+    connection: currentPusher === null || currentPusher === void 0 ? void 0 : (_currentPusher$connec = currentPusher.connection) === null || _currentPusher$connec === void 0 ? void 0 : _currentPusher$connec.state,
+    pusherRegisterUrls: pusherRegisterUrls,
+    pathname: pathname
+  });
   var registerPusher = useCallback(function () {
-    if (pusherRegisterUrls.includes(pathname.toLocaleLowerCase()) && academyDomain && academyDomain !== (concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.academyDomain) && isReadyRegisterPusher) {
-      var _headers;
-      if (concurrentConnectionPusher.pusher) {
-        concurrentConnectionPusher.pusher.disconnect();
-      }
-      var token = getAccessToken();
-      var pusher = new Pusher(PUSHER_CONFIG.key, {
-        cluster: PUSHER_CONFIG.cluster,
-        authEndpoint: BASE_URL + "/api/auth/pusher",
-        auth: {
-          params: {},
-          headers: (_headers = {
-            Authorization: "Bearer " + token
-          }, _headers[AcademyHeaders] = academyDomain, _headers)
+    if (pusherRegisterUrls.includes(pathname.toLocaleLowerCase())) {
+      var _currentPusher$connec2;
+      if (academyDomain && academyDomain !== (concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.academyDomain) && isReadyRegisterPusher) {
+        var _headers;
+        if (currentPusher) {
+          currentPusher.disconnect();
         }
-      });
-      dispatch(setConcurrentConnectionPusher({
-        pusher: pusher,
-        academyDomain: academyDomain
-      }));
+        var token = getAccessToken();
+        var pusher = new Pusher(PUSHER_CONFIG.key, {
+          cluster: PUSHER_CONFIG.cluster,
+          authEndpoint: BASE_URL + "/api/auth/pusher",
+          auth: {
+            params: {},
+            headers: (_headers = {
+              Authorization: "Bearer " + token
+            }, _headers[AcademyHeaders] = academyDomain, _headers)
+          }
+        });
+        dispatch(setConcurrentConnectionPusher({
+          pusher: pusher,
+          academyDomain: academyDomain
+        }));
+      } else if ((currentPusher === null || currentPusher === void 0 ? void 0 : (_currentPusher$connec2 = currentPusher.connection) === null || _currentPusher$connec2 === void 0 ? void 0 : _currentPusher$connec2.state) === "disconnected") {
+        currentPusher.connect();
+      }
     }
-    if ((!pusherRegisterUrls.includes(pathname.toLocaleLowerCase()) || !isReadyRegisterPusher) && !!(concurrentConnectionPusher !== null && concurrentConnectionPusher !== void 0 && concurrentConnectionPusher.pusher)) {
-      if (concurrentConnectionPusher.pusher) {
-        concurrentConnectionPusher.pusher.disconnect();
+    if (!pusherRegisterUrls.includes(pathname.toLocaleLowerCase()) && !!currentPusher) {
+      if (currentPusher) {
+        currentPusher.disconnect();
       }
       dispatch(setConcurrentConnectionPusher({
         pusher: null,
@@ -1004,7 +1017,7 @@ var LayoutContext = function LayoutContext(_ref) {
     if (!pusherRegisterUrls.includes(pathname.toLocaleLowerCase()) && isReadyRegisterPusher) {
       dispatch(setReadyRegisterPusher(false));
     }
-  }, [pusherRegisterUrls.join(","), academyDomain, pathname, isReadyRegisterPusher]);
+  }, [pusherRegisterUrls.join(","), academyDomain, pathname, isReadyRegisterPusher, currentPusher === null || currentPusher === void 0 ? void 0 : (_currentPusher$connec3 = currentPusher.connection) === null || _currentPusher$connec3 === void 0 ? void 0 : _currentPusher$connec3.state]);
   useEffect(function () {
     !user && loadInfo();
     !!user && checkRoleUser();
@@ -1015,8 +1028,8 @@ var LayoutContext = function LayoutContext(_ref) {
   useEffect(function () {
     registerPusher();
     return function () {
-      if (concurrentConnectionPusher.pusher) {
-        concurrentConnectionPusher.pusher.disconnect();
+      if (currentPusher) {
+        currentPusher.disconnect();
       }
     };
   }, [registerPusher]);
@@ -1305,6 +1318,7 @@ var recent_exam_results = "최근 시험 결과";
 var instructor_name = "강사이름";
 var academy_name = "학원 이름";
 var total_students = "총 학생수";
+var total_class = "반 수";
 var total_number_students = "총 학생수";
 var student = "학생";
 var students = "재학생";
@@ -1321,8 +1335,9 @@ var mins_mins_seconds_seconds = "{{mins}}분 {{seconds}}초";
 var mins_mins = "{{mins}}분";
 var class_name = "반 이름";
 var create_new_exam = "새 시험 생성";
+var live_exam = "시험 생성";
 var there_are_no_recent_exams = "최근 시험이 없습니다";
-var you_have_created_a_exam_with_code_code_do_you_want_to_continue = "코드가 {{code}}인 시험을 생성했습니다. 계속하시겠습니까?";
+var you_have_started_an_exam_with_code_code_do_you_want_to_continue = "{{code}} 코드로 시험을 시작했습니다. 계속하시겠습니까?";
 var here = "여기";
 var do_you_want_to_complete_the_exam = "시험을 완료처리 하시겠습니까?";
 var are_you_sure_you_want_to_delete_the_exam = "시험을 삭제하시겠습니까?";
@@ -1561,6 +1576,7 @@ var course = "진로";
 var etc = "그 외";
 var consultation_category = "상담 카테고리";
 var points = "{{number}} 점";
+var noun_number_of_people = "인원 수";
 var number_of_people = "{{ number }} 명";
 var total_classes = "반수";
 var number_of_classes = "{{ number }} 개";
@@ -1579,6 +1595,30 @@ var comparison_of_top_rankings_and_problem_solving_order = "상위권과 문제
 var my_answers = "내 해답";
 var request_for_consultation = "상담요청";
 var ask_a_question_with_a_problem = "문제로 질문하기";
+var live = "살다";
+var user_email = "사용자 이메일";
+var user_academy = {
+	add: "사용자 추가",
+	update_user_roles: "사용자 역할 업데이트",
+	add_failed: "아카데미에 사용자 추가 실패",
+	add_successfully: "사용자를 아카데미에 추가했습니다",
+	remove_failed: "아카데미에서 사용자를 제거하지 못했습니다",
+	remove_successfully: "아카데미에서 사용자를 성공적으로 제거했습니다",
+	update_user_roles_failed: "아카데미 사용자 역할 업데이트에 실패했습니다",
+	update_user_roles__successfully: "아카데미 사용자 역할을 성공적으로 제거했습니다",
+	get_failed: "아카데미 사용자 가져오기 실패"
+};
+var get_users_failed = "사용자 가져오기 실패";
+var status_of_each_class = "각 반별 현황";
+var attendance_rate = "출석률";
+var select_article_create_exam = "시험을 만들 기사를 선택하세요.";
+var comprehensive_analysis = "내 해답";
+var solution_order = "풀이 순서";
+var compare_solution = "풀이 비교";
+var problem_analysis = "문제 분석";
+var class_information = "수업정보";
+var teachers = "교사";
+var lessons = "수업";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -1596,6 +1636,7 @@ var lang_ko = {
 	instructor_name: instructor_name,
 	academy_name: academy_name,
 	total_students: total_students,
+	total_class: total_class,
 	total_number_students: total_number_students,
 	student: student,
 	students: students,
@@ -1614,8 +1655,9 @@ var lang_ko = {
 	mins_mins: mins_mins,
 	class_name: class_name,
 	create_new_exam: create_new_exam,
+	live_exam: live_exam,
 	there_are_no_recent_exams: there_are_no_recent_exams,
-	you_have_created_a_exam_with_code_code_do_you_want_to_continue: you_have_created_a_exam_with_code_code_do_you_want_to_continue,
+	you_have_started_an_exam_with_code_code_do_you_want_to_continue: you_have_started_an_exam_with_code_code_do_you_want_to_continue,
 	here: here,
 	do_you_want_to_complete_the_exam: do_you_want_to_complete_the_exam,
 	are_you_sure_you_want_to_delete_the_exam: are_you_sure_you_want_to_delete_the_exam,
@@ -1851,6 +1893,7 @@ var lang_ko = {
 	etc: etc,
 	consultation_category: consultation_category,
 	points: points,
+	noun_number_of_people: noun_number_of_people,
 	number_of_people: number_of_people,
 	total_classes: total_classes,
 	number_of_classes: number_of_classes,
@@ -1868,7 +1911,21 @@ var lang_ko = {
 	comparison_of_top_rankings_and_problem_solving_order: comparison_of_top_rankings_and_problem_solving_order,
 	my_answers: my_answers,
 	request_for_consultation: request_for_consultation,
-	ask_a_question_with_a_problem: ask_a_question_with_a_problem
+	ask_a_question_with_a_problem: ask_a_question_with_a_problem,
+	live: live,
+	user_email: user_email,
+	user_academy: user_academy,
+	get_users_failed: get_users_failed,
+	status_of_each_class: status_of_each_class,
+	attendance_rate: attendance_rate,
+	select_article_create_exam: select_article_create_exam,
+	comprehensive_analysis: comprehensive_analysis,
+	solution_order: solution_order,
+	compare_solution: compare_solution,
+	problem_analysis: problem_analysis,
+	class_information: class_information,
+	teachers: teachers,
+	lessons: lessons
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -1887,6 +1944,7 @@ var recent_exam_results$1 = "Recent exam";
 var instructor_name$1 = "Instructor name";
 var academy_name$1 = "Academy name";
 var total_students$1 = "Total students";
+var total_class$1 = "Total Class";
 var total_number_students$1 = "Total number of students";
 var students$1 = "Students";
 var student$1 = "Student";
@@ -1903,8 +1961,9 @@ var mins_mins_seconds_seconds$1 = "{{mins}}m {{seconds}}s";
 var mins_mins$1 = "{{mins}}m";
 var class_name$1 = "Class name";
 var create_new_exam$1 = "Create exam";
+var live_exam$1 = "Live exam";
 var there_are_no_recent_exams$1 = "There are no recent exams";
-var you_have_created_a_exam_with_code_code_do_you_want_to_continue$1 = "You have created a exam with code {{code}}, do you want to continue?";
+var you_have_started_an_exam_with_code_code_do_you_want_to_continue$1 = "You have started an exam with code {{code}}, do you want to continue?";
 var here$1 = "here";
 var do_you_want_to_complete_the_exam$1 = "Do you want to complete the exam?";
 var are_you_sure_you_want_to_delete_the_exam$1 = "Are you sure you want to delete the exam?";
@@ -2178,6 +2237,7 @@ var course$1 = "Course";
 var etc$1 = "Etc";
 var consultation_category$1 = "Consultation Category";
 var points$1 = "{{number}} points";
+var noun_number_of_people$1 = "Number of people";
 var number_of_people$1 = "{{ number }} students";
 var total_classes$1 = "Total classes";
 var number_of_classes$1 = "{{ number }} classes";
@@ -2196,6 +2256,30 @@ var comparison_of_top_rankings_and_problem_solving_order$1 = "Comparison of top
 var my_answers$1 = "My answers";
 var request_for_consultation$1 = "Request for consultation";
 var ask_a_question_with_a_problem$1 = "Ask a question with a problem";
+var live$1 = "live";
+var user_email$1 = "User email";
+var user_academy$1 = {
+	add: "Add user",
+	update_user_roles: "Update user roles",
+	add_failed: "Add user to academy failed",
+	add_successfully: "Add user to academy successfully",
+	remove_failed: "Remove user from academy failed",
+	remove_successfully: "Remove user from academy successfully",
+	update_user_roles_failed: "Update academy user roles failed",
+	update_user_roles_successfully: "Update academy user roles successfully",
+	get_failed: "Get academy users failed"
+};
+var get_users_failed$1 = "Get users failed";
+var status_of_each_class$1 = "Status of each class";
+var attendance_rate$1 = "Attendance Rate";
+var select_article_create_exam$1 = "Select article to create exam";
+var comprehensive_analysis$1 = "Comprehensive analysis";
+var solution_order$1 = "Solution order";
+var compare_solution$1 = "Compare solution";
+var problem_analysis$1 = "Problem analysis";
+var class_information$1 = "Class Information";
+var teachers$1 = "Teachers";
+var lessons$1 = "Lessons";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -2213,6 +2297,7 @@ var lang_en = {
 	instructor_name: instructor_name$1,
 	academy_name: academy_name$1,
 	total_students: total_students$1,
+	total_class: total_class$1,
 	total_number_students: total_number_students$1,
 	students: students$1,
 	student: student$1,
@@ -2231,8 +2316,9 @@ var lang_en = {
 	mins_mins: mins_mins$1,
 	class_name: class_name$1,
 	create_new_exam: create_new_exam$1,
+	live_exam: live_exam$1,
 	there_are_no_recent_exams: there_are_no_recent_exams$1,
-	you_have_created_a_exam_with_code_code_do_you_want_to_continue: you_have_created_a_exam_with_code_code_do_you_want_to_continue$1,
+	you_have_started_an_exam_with_code_code_do_you_want_to_continue: you_have_started_an_exam_with_code_code_do_you_want_to_continue$1,
 	here: here$1,
 	do_you_want_to_complete_the_exam: do_you_want_to_complete_the_exam$1,
 	are_you_sure_you_want_to_delete_the_exam: are_you_sure_you_want_to_delete_the_exam$1,
@@ -2503,6 +2589,7 @@ var lang_en = {
 	etc: etc$1,
 	consultation_category: consultation_category$1,
 	points: points$1,
+	noun_number_of_people: noun_number_of_people$1,
 	number_of_people: number_of_people$1,
 	total_classes: total_classes$1,
 	number_of_classes: number_of_classes$1,
@@ -2520,7 +2607,21 @@ var lang_en = {
 	comparison_of_top_rankings_and_problem_solving_order: comparison_of_top_rankings_and_problem_solving_order$1,
 	my_answers: my_answers$1,
 	request_for_consultation: request_for_consultation$1,
-	ask_a_question_with_a_problem: ask_a_question_with_a_problem$1
+	ask_a_question_with_a_problem: ask_a_question_with_a_problem$1,
+	live: live$1,
+	user_email: user_email$1,
+	user_academy: user_academy$1,
+	get_users_failed: get_users_failed$1,
+	status_of_each_class: status_of_each_class$1,
+	attendance_rate: attendance_rate$1,
+	select_article_create_exam: select_article_create_exam$1,
+	comprehensive_analysis: comprehensive_analysis$1,
+	solution_order: solution_order$1,
+	compare_solution: compare_solution$1,
+	problem_analysis: problem_analysis$1,
+	class_information: class_information$1,
+	teachers: teachers$1,
+	lessons: lessons$1
 };
 
 i18n.use(initReactI18next).init({
@@ -2801,7 +2902,8 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
   var role = _ref.role,
     navigate = _ref.navigate,
     homeAcademyUrl = _ref.homeAcademyUrl,
-    homeUrl = _ref.homeUrl;
+    homeUrl = _ref.homeUrl,
+    hideAcademyName = _ref.hideAcademyName;
   var _useSwitchAcademy = useSwitchAcademy(role, navigate, homeAcademyUrl, homeUrl),
     academyList = _useSwitchAcademy.academyList,
     handleSwitchAcademy = _useSwitchAcademy.handleSwitchAcademy,
@@ -2835,15 +2937,15 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
   };
   return React.createElement(Fragment$1, null, React.createElement(Button, {
     onClick: handleOpen,
-    className: "" + styleGlobal["academy-btn"],
+    className: "" + styles["academy-btn"],
     sx: _extends({}, popoverStyle)
   }, React.createElement("div", {
-    className: "" + styleGlobal["image-academy"]
+    className: styles["image-academy"] + " me-0 me-lg-2"
   }, selectedAcademy !== null && selectedAcademy !== void 0 && selectedAcademy.image ? React.createElement("img", {
     src: selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.image,
     alt: selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.name
-  }) : React.createElement("span", null, firstLetter)), React.createElement(Typography, {
-    className: "text-start",
+  }) : React.createElement("span", null, firstLetter)), !hideAcademyName && React.createElement(Typography, {
+    className: "text-start d-none d-lg-block",
     sx: {
       fontSize: 14,
       fontWeight: 600,
@@ -2851,7 +2953,7 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
       minWidth: 150
     }
   }, (selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.name) || t(role === Role.Admin ? "switch_academy_admin" : "switch_academy")), React.createElement("div", {
-    className: "" + styleGlobal["switch-icon"]
+    className: styles["switch-icon"] + " d-none d-lg-flex"
   }, React.createElement(GoArrowSwitch, {
     size: 14
   }))), (isSuperAdmin || !isAdmin) && React.createElement(Popover, {
@@ -2872,7 +2974,10 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
           p: 0.5,
           mt: 1,
           ml: 0.75,
-          width: 300,
+          width: {
+            xs: 200,
+            lg: 300
+          },
           minWidth: "unset!important"
         }
       }
@@ -2893,7 +2998,7 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
         fontWeight: 600
       }
     }, React.createElement("div", {
-      className: "" + styleGlobal["image-academy"]
+      className: styles["image-academy"] + " " + styles["image-academy--item"]
     }, option.image ? React.createElement(Box$1, {
       component: "img",
       alt: option.name,
@@ -3003,7 +3108,7 @@ var CustomSelect = function CustomSelect(_ref) {
   }, rest));
 };
 
-var styles = {"header__avatar":"_2oGcJ","header__select":"_2y2XV","body":"_ntGyI","list":"_m7Fwt","list__item__header":"_3BM8N","list__item__avatar":"_1ReOK","list__item__avatar-container":"_2qbld","list__item__message":"_3s01i","list__item__message--reply-from":"_2Qxi3","list__item__message--reply-from-right":"_34Vx4","list__item__message--reply":"_3uheq","list__item__message--reply-right":"_2iBr7","reply-text":"_3ZPjO","container-custom":"_38A9k","student-row-col-1":"_Jt5t0","student-row-col-1-active":"_14DKj","row-col-2":"_qHGiR","inputBox":"_2iY67","inputBoxTable":"_3pCw0","background-chat":"_zILbw","wrap-content":"_38gsM","name-sender":"_Lfzyw","content-chat-sender":"_1X73E","content-chat-receiver":"_32V7T","custom-scroll":"_2Uul2","btn-send":"_395lb","btn-chat":"_gDYwm","input-chat":"_22TX5","btn-cancel":"_1u-eg","btn-register":"_22r6_","form-label-dialog":"_jADIA","form-select-width":"_WncPd","padding-content":"_3hz3H","form-label":"_MMQxP","form-control":"_1mJfc"};
+var styles$1 = {"header__avatar":"_2oGcJ","header__select":"_2y2XV","body":"_ntGyI","list":"_m7Fwt","list__item__header":"_3BM8N","list__item__avatar":"_1ReOK","list__item__avatar-container":"_2qbld","list__item__message":"_3s01i","list__item__message--reply-from":"_2Qxi3","list__item__message--reply-from-right":"_34Vx4","list__item__message--reply":"_3uheq","list__item__message--reply-right":"_2iBr7","reply-text":"_3ZPjO","container-custom":"_38A9k","student-row-col-1":"_Jt5t0","student-row-col-1-active":"_14DKj","row-col-2":"_qHGiR","inputBox":"_2iY67","inputBoxTable":"_3pCw0","background-chat":"_zILbw","wrap-content":"_38gsM","name-sender":"_Lfzyw","content-chat-sender":"_1X73E","content-chat-receiver":"_32V7T","custom-scroll":"_2Uul2","btn-send":"_395lb","btn-chat":"_gDYwm","input-chat":"_22TX5","btn-cancel":"_1u-eg","btn-register":"_22r6_","form-label-dialog":"_jADIA","form-select-width":"_WncPd","padding-content":"_3hz3H","form-label":"_MMQxP","form-control":"_1mJfc"};
 
 var iconPersonNoActive = function iconPersonNoActive(_ref) {
   var _ref$width = _ref.width,
@@ -3149,7 +3254,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
     padding: "4px 0"
   }, React.createElement(Box, null, showName && isStudent && React.createElement(Box, {
     gap: "8px",
-    className: " " + styles["name-sender"],
+    className: " " + styles$1["name-sender"],
     display: "flex",
     alignItems: "center",
     flexDirection: "row"
@@ -3204,7 +3309,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
       objectFit: "contain"
     }
   })) : React.createElement("div", {
-    className: styles["wrap-content"] + " " + styles["content-chat-receiver"],
+    className: styles$1["wrap-content"] + " " + styles$1["content-chat-receiver"],
     style: {
       "float": "inline-end"
     }
@@ -3242,7 +3347,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     display: "flex",
     padding: "4px",
     flexDirection: "row",
-    className: "" + styles["name-sender"]
+    className: "" + styles$1["name-sender"]
   }, isStudent ? React.createElement(Fragment$1, null, React.createElement(Typography, {
     fontWeight: 500,
     fontSize: 14,
@@ -3282,7 +3387,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
       objectFit: "contain"
     }
   })) : React.createElement("div", {
-    className: styles["wrap-content"] + " " + styles["content-chat-sender"]
+    className: styles$1["wrap-content"] + " " + styles$1["content-chat-sender"]
   }, React.createElement(Typography, {
     fontWeight: 500,
     fontSize: "14px",
@@ -3495,7 +3600,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     _objectDestructuringEmpty(_ref2);
     return React.createElement(Form, null, React.createElement("label", {
       htmlFor: "content",
-      className: styles['form-label'] + "  " + styles['form-label-dialog']
+      className: styles$1['form-label'] + "  " + styles$1['form-label-dialog']
     }, "\uC9C8\uBB38\uD560 \uBB38\uC81C"), React.createElement(Field, {
       id: "content",
       style: {
@@ -3504,7 +3609,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       name: "content",
       validate: validate,
       placeholder: "\uBB38\uC81C\uAC00 \uC5B4\uB824\uC6CC\uC694",
-      className: styles['form-control']
+      className: styles$1['form-control']
     }), React.createElement(DialogActions, {
       sx: {
         display: 'flex',
@@ -3513,14 +3618,14 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
         padding: '12px'
       }
     }, React.createElement(Button, {
-      className: styles['btn-cancel'],
+      className: styles$1['btn-cancel'],
       onClick: onClose
     }, React.createElement(Typography, {
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button, {
-      className: styles['btn-register'],
+      className: styles$1['btn-register'],
       type: "submit"
     }, React.createElement(Typography, {
       fontWeight: 700,
@@ -3569,14 +3674,14 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       padding: '12px'
     }
   }, React.createElement(Button, {
-    className: styles['btn-cancel'],
+    className: styles$1['btn-cancel'],
     onClick: onClose
   }, React.createElement(Typography, {
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '16.71px'
   }, "\uCDE8\uC18C")), React.createElement(Button, {
-    className: styles['btn-register'],
+    className: styles$1['btn-register'],
     sx: {
       bgcolor: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content) ? "#EBEBFF !important" : "#5458D5 !important"
     },
@@ -3750,7 +3855,7 @@ var ChatList = function ChatList(_ref) {
   var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$1.Student);
   return React.createElement("ul", {
     ref: listItemRef,
-    className: styles["list"] + " " + styles["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
+    className: styles$1["list"] + " " + styles$1["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
   }, !(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && React.createElement("li", {
     className: "text-muted text-center fst-italic fs-6"
   }, "No message"), !!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && filterMessage.map(function (message) {
@@ -3857,7 +3962,7 @@ var InputChat = function InputChat(_ref) {
     color: "#fff",
     size: 30
   }))), React.createElement("input", {
-    className: styles["input-chat"],
+    className: styles$1["input-chat"],
     style: {
       border: "none"
     },
@@ -3884,7 +3989,7 @@ var InputChat = function InputChat(_ref) {
     sx: {
       bgcolor: isCompleted ? "#EBEBFF !important" : "#5458D5 !important"
     },
-    className: styles["btn-send"],
+    className: styles$1["btn-send"],
     disabled: isCompleted,
     onClick: handleSubmit
   }, React.createElement(iconSendMessage, null), React.createElement(Typography, {
@@ -3939,7 +4044,8 @@ var iconChecked = function iconChecked(_ref) {
 };
 
 var ellipsisText = function ellipsisText(text, maxLength) {
-  return text.length > maxLength ? text.slice(0, maxLength) + " ..." : text;
+  if (!text) return text;
+  return (text === null || text === void 0 ? void 0 : text.length) > maxLength ? text.slice(0, maxLength) + " ..." : text;
 };
 var formatDataMyAnswer = function formatDataMyAnswer(inputData, categories) {
   var uniqueCategories = new Set();
@@ -3988,7 +4094,8 @@ var ChatHeader = function ChatHeader(_ref) {
     handleConfirm = _useDialog.handleConfirm;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var isTabletUp = useMediaQuery('(min-width:900px)');
+  var theme = useTheme();
+  var isTabletUp = useMediaQuery(theme.breakpoints.up('lg'));
   var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$1.Student);
   var filterDurationExam = useMemo(function () {
     if (!durationExam) return;
@@ -4037,7 +4144,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 600,
       fontSize: "12px",
       lineHeight: "14.32px"
-    }, ellipsisText(examTitle, 15)), React.createElement(Box, {
+    }, ellipsisText(examTitle || "", 15)), React.createElement(Box, {
       display: "flex",
       flexDirection: "row",
       gap: "4px"
@@ -4117,7 +4224,7 @@ var ChatHeader = function ChatHeader(_ref) {
       alignItems: "center",
       gap: "24px",
       color: "#5458D5"
-    }, React.createElement(Box, {
+    }, isTabletUp && React.createElement(Box, {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
@@ -4130,7 +4237,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 700,
       fontSize: "14px",
       lineHeight: "16.71px"
-    }, fullName)), React.createElement(Box, {
+    }, ellipsisText(fullName || "", 10))), React.createElement(Box, {
       display: "flex",
       alignItems: "center",
       gap: "24px",
@@ -4139,7 +4246,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 600,
       fontSize: "12px",
       lineHeight: "14.32px"
-    }, examTitle) : React.createElement(Box, {
+    }, ellipsisText(examTitle || "", 10)) : React.createElement(Box, {
       display: "flex",
       alignItems: "end",
       gap: "16px",
@@ -4284,7 +4391,7 @@ var ChatContainer = function ChatContainer(_ref) {
     container: true
   }, React.createElement(ChatHeader, Object.assign({}, chatHeaderProps)), React.createElement("div", {
     ref: listRef,
-    className: "flex-grow-1 " + styles["body"],
+    className: "flex-grow-1 " + styles$1["body"],
     style: {
       height: "60vh",
       overflowY: "scroll",
@@ -4789,7 +4896,7 @@ var InputText = function InputText(props) {
   }, props));
 };
 
-var styles$1 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question--active":"_3IHYm","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
+var styles$2 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question--active":"_3IHYm","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
 
 var SCORE_OPTIONS = Array.from({
   length: 10
@@ -4846,12 +4953,15 @@ var QuestionView = function QuestionView(_ref) {
   var handleChangeCorrectAnswer = function handleChangeCorrectAnswer(e) {
     return onChangeCorrectAnswers(e.target.value, index);
   };
-  return React.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, React.createElement("div", {
-    className: "d-flex flex-grow-1"
+  return React.createElement(Grid, {
+    container: true,
+    spacing: "16px"
+  }, React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 9
   }, React.createElement("div", {
-    className: styles$1["question-title"] + " me-2 text-nowrap"
+    className: styles$2["question-title"] + " me-2 text-nowrap"
   }, t("problem_number_question", {
     number: question.questionOrder + 1
   })), React.createElement(FormControl, {
@@ -4867,7 +4977,7 @@ var QuestionView = function QuestionView(_ref) {
   }).map(function (i) {
     return React.createElement(FormControlLabel, {
       key: i,
-      className: styles$1["question-label"] + " w-fit",
+      className: styles$2["question-label"] + " w-fit",
       labelPlacement: "top",
       value: i,
       onChange: handleChangeCorrectAnswer,
@@ -4879,10 +4989,12 @@ var QuestionView = function QuestionView(_ref) {
         number: i
       })
     });
-  })))), React.createElement("div", {
-    className: "d-flex align-items-center"
+  })))), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 3,
+    mb: "16px"
   }, React.createElement(FormControl, {
-    className: "mx-3",
     style: {
       width: "140px"
     }
@@ -5086,6 +5198,8 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
       subjectId: defaultCategoryOptions === undefined ? selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id : undefined
     }),
     categoryOptions = _useCategorySelect.categoryOptions;
+  var theme = useTheme();
+  var isTabletUp = useMediaQuery(theme.breakpoints.up('lg'));
   var handleChangeQuestionCount = function handleChangeQuestionCount(value) {
     onChangeQuestionCount(article, value === null || value === void 0 ? void 0 : value.value, answerCount);
   };
@@ -5105,7 +5219,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     onDelete === null || onDelete === void 0 ? void 0 : onDelete(article);
   };
   return React.createElement("div", {
-    className: "d-flex " + styles$1["question"] + " " + (isActive ? styles$1["question--active"] : "")
+    className: "d-flex " + styles$2["question"] + " " + (isActive ? styles$2["question--active"] : "")
   }, React.createElement("div", {
     className: "py-1"
   }, React.createElement(PiDotsNineLight, {
@@ -5113,20 +5227,30 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   })), React.createElement("div", {
     className: "px-4"
   }, React.createElement("p", {
-    className: "mb-0 " + styles$1["question-article"]
+    className: "mb-0 " + styles$2["question-article"]
   }, t("article_number")), React.createElement("p", {
-    className: "text-center " + styles$1["question-article"]
+    className: "text-center " + styles$2["question-article"]
   }, article)), React.createElement("div", {
     className: "flex-grow-1"
   }, React.createElement(Grid, {
     container: true,
     spacing: 3
-  }, React.createElement(Grid, {
+  }, !isTabletUp && React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    className: "d-flex justify-content-end"
+  }, isDeletable && !isDisabled && React.createElement("div", null, React.createElement(IconButton, {
+    onClick: handleDelete
+  }, React.createElement(FaTrash, {
+    size: 16,
+    className: "text-danger"
+  })))), React.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 12,
+    lg: 3
   }, React.createElement(FormGroup, null, React.createElement(FormLabel, {
     htmlFor: "question_count",
-    className: styles$1["question-label"] + " form-label"
+    className: styles$2["question-label"] + " form-label"
   }, t("question_count")), React.createElement(QuestionCountSelector, {
     id: "question_count",
     value: questionCount,
@@ -5134,10 +5258,11 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     isDisabled: isDisabled
   }))), React.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 12,
+    lg: 3
   }, React.createElement(FormGroup, null, React.createElement(FormLabel, {
     htmlFor: "category",
-    className: styles$1["question-label"] + " form-label"
+    className: styles$2["question-label"] + " form-label"
   }, t("category")), React.createElement(ArticleCategorySelector, {
     id: "category",
     value: categoryId,
@@ -5147,16 +5272,17 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     placeholder: t("select_category")
   }))), React.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 12,
+    lg: 3
   }, React.createElement(FormGroup, null, React.createElement(FormLabel, {
     htmlFor: "answer_count",
-    className: styles$1["question-label"] + " form-label"
+    className: styles$2["question-label"] + " form-label"
   }, t("answer_count")), React.createElement(AnswerCountSelector, {
     id: "answer_count",
     value: answerCount,
     onChange: handleChangeAnswerCount,
     isDisabled: isDisabled
-  }))), React.createElement(Grid, {
+  }))), isTabletUp && React.createElement(Grid, {
     item: true,
     xs: 3,
     className: "d-flex justify-content-end"
@@ -5193,6 +5319,7 @@ var ChapterBox = function ChapterBox(_ref) {
     onChangePageTo = _ref.onChangePageTo,
     onAddArticle = _ref.onAddArticle,
     onRemoveArticle = _ref.onRemoveArticle,
+    handleCheckArticle = _ref.handleCheckArticle,
     onUpdateArticleQuestionCount = _ref.onUpdateArticleQuestionCount,
     onUpdateArticleCategory = _ref.onUpdateArticleCategory,
     onUpdateArticleQuestionAnswerCount = _ref.onUpdateArticleQuestionAnswerCount,
@@ -5248,6 +5375,8 @@ var ChapterBox = function ChapterBox(_ref) {
   var handleUpdateArticleQuestionScore = function handleUpdateArticleQuestionScore(article, index, score) {
     onUpdateArticleQuestion === null || onUpdateArticleQuestion === void 0 ? void 0 : onUpdateArticleQuestion(article, index, score, "score", data.articles, data.id, parentChapterId);
   };
+  var theme = useTheme();
+  var isTabletUp = useMediaQuery(theme.breakpoints.up('lg'));
   var handleChangeName = function handleChangeName(e) {
     var text = e.target.value;
     onChangeName === null || onChangeName === void 0 ? void 0 : onChangeName(text, data.id, parentChapterId);
@@ -5295,17 +5424,52 @@ var ChapterBox = function ChapterBox(_ref) {
     className: "text-danger"
   }))), React.createElement("div", {
     className: "p-3 d-flex justify-content-between"
+  }, React.createElement(Grid, {
+    container: true
+  }, React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, React.createElement(Grid, {
+    container: true,
+    spacing: 2
+  }, !isTabletUp && React.createElement(Grid, {
+    item: true,
+    xs: 12
   }, React.createElement(Stack, {
-    spacing: 2,
-    direction: "row"
-  }, React.createElement(Box, {
+    direction: "row",
+    justifyContent: "end",
+    spacing: 2
+  }, !parentChapterId && !data.articles.length && React.createElement(Button, {
+    className: "mx-1",
+    variant: "contained",
+    color: "primary",
+    disabled: isReadonly,
+    startIcon: React.createElement(FaPlus, {
+      size: 12
+    }),
+    onClick: handleClickAddSubchapter
+  }, t("add_subchapter")), data.subChapters.length === 0 && React.createElement(Button, {
+    className: "mx-1",
+    variant: "contained",
+    color: "success",
+    disabled: isReadonly,
+    startIcon: React.createElement(FaPlus, {
+      size: 12
+    }),
+    onClick: handleAddArticle
+  }, t("add_article")))), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 4,
     sx: {
       display: "flex",
       alignItems: "center",
-      marginRight: "16px",
       width: "50%"
     }
   }, React.createElement("label", {
+    style: {
+      minWidth: "90px"
+    },
     className: "fw-bold text-nowrap me-2"
   }, t("page.from"), ":"), React.createElement(InputText, {
     type: "number",
@@ -5315,13 +5479,19 @@ var ChapterBox = function ChapterBox(_ref) {
     onChange: handleChangePageFrom,
     placeholder: t("page.from_placeholder"),
     error: data.pageFrom > data.pageTo || data.pageFrom < 0
-  })), React.createElement(Box, {
+  })), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 4,
     sx: {
       display: "flex",
       alignItems: "center",
       width: "50%"
     }
   }, React.createElement("label", {
+    style: {
+      minWidth: "90px"
+    },
     className: "fw-bold text-nowrap me-2"
   }, t("page.to"), ":"), React.createElement(InputText, {
     type: "number",
@@ -5331,7 +5501,10 @@ var ChapterBox = function ChapterBox(_ref) {
     onChange: handleChangePageTo,
     placeholder: t("page.to_placeholder"),
     error: data.pageTo < data.pageFrom
-  }))), React.createElement(Stack, {
+  })), isTabletUp && React.createElement(Grid, {
+    item: true,
+    lg: 4
+  }, React.createElement(Stack, {
     direction: "row",
     justifyContent: "end",
     spacing: 2
@@ -5353,7 +5526,7 @@ var ChapterBox = function ChapterBox(_ref) {
       size: 12
     }),
     onClick: handleAddArticle
-  }, t("add_article")))), React.createElement("div", {
+  }, t("add_article")))))))), React.createElement("div", {
     className: "p-3"
   }, React.createElement(Stack, {
     spacing: 2
@@ -5368,6 +5541,7 @@ var ChapterBox = function ChapterBox(_ref) {
       onChangeName: onChangeName,
       onChangePageFrom: onChangePageFrom,
       onChangePageTo: onChangePageTo,
+      handleCheckArticle: handleCheckArticle,
       onAddArticle: onAddArticle,
       onRemoveArticle: onRemoveArticle,
       onUpdateArticleQuestionCount: onUpdateArticleQuestionCount,
@@ -5378,7 +5552,24 @@ var ChapterBox = function ChapterBox(_ref) {
     });
   }), data.subChapters.length === 0 && data.articles.map(function (article) {
     var _article$category;
-    return React.createElement(ArticleGroupView, {
+    return React.createElement(Stack, null, React.createElement(Stack, {
+      display: "flex",
+      flexDirection: "row",
+      gap: "8px",
+      alignItems: "center"
+    }, React.createElement(Checkbox, {
+      id: "textbook",
+      sx: {
+        display: "flex",
+        justifyContent: "start",
+        width: "fit-content"
+      },
+      onChange: function onChange(e) {
+        return handleCheckArticle(e, article);
+      }
+    }), React.createElement("label", {
+      htmlFor: "textbook"
+    }, t("select_article_create_exam"))), React.createElement(ArticleGroupView, {
       key: article.id,
       categoryOptions: categoryOptions,
       article: article.articleNumber,
@@ -5395,7 +5586,7 @@ var ChapterBox = function ChapterBox(_ref) {
       onChangeScoreAnswer: handleUpdateArticleQuestionScore,
       onDelete: handleRemoveArticle,
       isDeletable: true
-    });
+    }));
   }))));
 };
 
@@ -5455,6 +5646,25 @@ var TextbookSortBy;
   TextbookSortBy["Title"] = "Name";
   TextbookSortBy["SubjectName"] = "Subject.Name";
 })(TextbookSortBy || (TextbookSortBy = {}));
+var ExamType;
+(function (ExamType) {
+  ExamType["Normal"] = "Normal";
+  ExamType["Standard"] = "Standard";
+})(ExamType || (ExamType = {}));
+var ExamStatus$1;
+(function (ExamStatus) {
+  ExamStatus["Default"] = "Default";
+  ExamStatus["Pending"] = "Pending";
+  ExamStatus["InProgress"] = "InProgress";
+  ExamStatus["Completed"] = "Completed";
+})(ExamStatus$1 || (ExamStatus$1 = {}));
+var ExamStatusNumber;
+(function (ExamStatusNumber) {
+  ExamStatusNumber[ExamStatusNumber["Default"] = 0] = "Default";
+  ExamStatusNumber[ExamStatusNumber["Pending"] = 1] = "Pending";
+  ExamStatusNumber[ExamStatusNumber["InProgress"] = 2] = "InProgress";
+  ExamStatusNumber[ExamStatusNumber["Completed"] = 3] = "Completed";
+})(ExamStatusNumber || (ExamStatusNumber = {}));
 
 var TEXTBOOK_HEADERS = [{
   title: "#"
@@ -5472,6 +5682,19 @@ var TEXTBOOK_HEADERS = [{
 }, {
   title: "actions"
 }];
+var DEFAULT_ANSWER_COUNT = 5;
+var DEFAULT_EXAM_REQUEST = {
+  questions: [{
+    article: 1,
+    correctAnswers: [1],
+    numberOfAnswers: DEFAULT_ANSWER_COUNT,
+    score: 2,
+    questionOrder: 0
+  }],
+  title: "",
+  duration: 10,
+  subjectId: 0
+};
 var TEXTBOOK_PAGE_TITLE = "textbooks";
 var TEXT_BOOK_SEARCH_PLACEHOLDER = "enter_student_name_to_search";
 var TextbookDefaultQuery = {
@@ -5538,6 +5761,133 @@ var deleteArticleApi = function deleteArticleApi(articleId, role) {
   });
 };
 
+var EXAM_URL = BASE_URL + "/api/exam";
+var createExam = function createExam(data) {
+  return api.post("" + EXAM_URL, data, {
+    params: {
+      roles: [Role.Teacher]
+    }
+  });
+};
+var apiCreateExamSession = function apiCreateExamSession(examId) {
+  return api.post(EXAM_URL + "/" + examId);
+};
+
+var useExam = function useExam(props) {
+  var callback = props.callback,
+    navigate = props.navigate;
+  var dispatch = useDispatch();
+  var _useState = useState(false),
+    isOpenDialog = _useState[0],
+    setOpenDialog = _useState[1];
+  var _useState2 = useState(DEFAULT_EXAM_REQUEST),
+    examRequest = _useState2[0],
+    setExamRequest = _useState2[1];
+  var isTeacher = 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.roles.includes(Roles.Teacher);
+  });
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleChangeExamRequest = function handleChangeExamRequest(value) {
+    setExamRequest(value);
+  };
+  var handleOpenCreateExamDialog = function handleOpenCreateExamDialog() {
+    setOpenDialog(true);
+  };
+  var handleCloseDialog = function handleCloseDialog() {
+    setExamRequest(DEFAULT_EXAM_REQUEST);
+    setOpenDialog(false);
+    callback === null || callback === void 0 ? void 0 : callback();
+  };
+  var validateExam = function validateExam(exam) {
+    if (!exam.subjectId) return t("Please select an exam subject");
+    if (!exam.title.trim().length) return t("Please enter exam title");
+    if (!exam.questions.length) return t("Exam required at least one question");
+    for (var i = 0; i < exam.questions.length; i++) {
+      var question = exam.questions[i];
+      if (!question.categoryId) return t("Please select category for article " + question.article);
+    }
+    return false;
+  };
+  var handleCreateExam = function handleCreateExam() {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+      if (!examRequest) return Promise.resolve();
+      var errorMessage = validateExam(examRequest);
+      if (errorMessage) {
+        toast.error(errorMessage);
+        return Promise.resolve();
+      }
+      dispatch(setLoading(true));
+      var _temp2 = _catch(function () {
+        return Promise.resolve(createExam(_extends({}, examRequest, {
+          duration: minutesToTimeSpan(examRequest.duration || 0)
+        }))).then(function (res) {
+          var _temp = function (_res$data, _res$data$data) {
+            if (!((_res$data = res.data) !== null && _res$data !== void 0 && (_res$data$data = _res$data.data) !== null && _res$data$data !== void 0 && _res$data$data.id)) {
+              toast.error("Create exam failed");
+            } else {
+              var _res$data2, _res$data2$data;
+              return Promise.resolve(apiCreateExamSession((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$data = _res$data2.data) === null || _res$data2$data === void 0 ? void 0 : _res$data2$data.id)).then(function () {
+                setExamRequest(DEFAULT_EXAM_REQUEST);
+                toast.success("Create exam successfully");
+              });
+            }
+          }();
+          if (_temp && _temp.then) return _temp.then(function () {});
+        });
+      }, function (error) {
+        var _error$response;
+        toast.error((error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.data) || "Create exam failed");
+      });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleSaveExam = function handleSaveExam() {
+    try {
+      var _temp5 = function _temp5() {
+        dispatch(setLoading(false));
+      };
+      if (!examRequest) return Promise.resolve();
+      var errorMessage = validateExam(examRequest);
+      if (errorMessage) {
+        toast.error(errorMessage);
+        return Promise.resolve();
+      }
+      dispatch(setLoading(true));
+      var _temp4 = _catch(function () {
+        return Promise.resolve(createExam(_extends({}, examRequest, {
+          duration: minutesToTimeSpan(examRequest.duration || 0)
+        }))).then(function () {
+          handleCloseDialog();
+          toast.success("Save exam successfully");
+          isTeacher ? navigate('/teacher/exam-list') : navigate('/exams');
+        });
+      }, function (error) {
+        var _error$response2;
+        toast.error((error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data) || "Save exam failed");
+      });
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    isOpenDialog: isOpenDialog,
+    examRequest: examRequest,
+    handleChangeExamRequest: handleChangeExamRequest,
+    handleOpenCreateExamDialog: handleOpenCreateExamDialog,
+    handleSaveExam: handleSaveExam,
+    handleCloseDialog: handleCloseDialog,
+    handleCreateExam: handleCreateExam
+  };
+};
+
 var useTextbookDetail = function useTextbookDetail(props) {
   var role = props.role,
     isReadonlyParam = props.isReadonlyParam,
@@ -5561,18 +5911,31 @@ var useTextbookDetail = function useTextbookDetail(props) {
   var _useState5 = useState(),
     parentChapter = _useState5[0],
     setParentChapter = _useState5[1];
-  var _useState6 = useState(),
-    selectedChapter = _useState6[0],
-    setSelectedChapter = _useState6[1];
+  var _useState6 = useState([]),
+    articlesSelected = _useState6[0],
+    setArticlesSelected = _useState6[1];
   var _useState7 = useState(),
-    selectedDeleteItem = _useState7[0],
-    setSelectedDeleteItem = _useState7[1];
+    selectedChapter = _useState7[0],
+    setSelectedChapter = _useState7[1];
+  var _useState8 = useState(),
+    selectedDeleteItem = _useState8[0],
+    setSelectedDeleteItem = _useState8[1];
   var updateChapterRef = useRef();
   var updateArticleRef = useRef();
-  var _useState8 = useState(false),
-    isEditedTitle = _useState8[0],
-    setEditedTitle = _useState8[1];
+  var _useState9 = useState(false),
+    isEditedTitle = _useState9[0],
+    setEditedTitle = _useState9[1];
   var textbookUrl = role === Role.Teacher ? TEXTBOOK_URL$1 : ADMIN_TEXTBOOK_URL;
+  var _useExam = useExam({
+      navigate: navigate
+    }),
+    isOpenDialog = _useExam.isOpenDialog,
+    examRequest = _useExam.examRequest,
+    handleChangeExamRequest = _useExam.handleChangeExamRequest,
+    handleOpenCreateExamDialog = _useExam.handleOpenCreateExamDialog,
+    handleSaveExam = _useExam.handleSaveExam,
+    handleCloseDialog = _useExam.handleCloseDialog,
+    handleCreateExam = _useExam.handleCreateExam;
   var handleOpenAddArticleDialog = function handleOpenAddArticleDialog(chapter) {
     setSelectedChapter(chapter);
   };
@@ -5823,7 +6186,6 @@ var useTextbookDetail = function useTextbookDetail(props) {
         }
       };
       return Promise.resolve(handleCreateArticle(newArticle, function (article) {
-        console.log("created article: ", article);
         handleUpdateChapterValue([].concat(articles, [article]), "articles", selectedChapter.id, selectedChapter.parentChapterId);
         setSelectedChapter(undefined);
       })).then(function () {});
@@ -5913,12 +6275,14 @@ var useTextbookDetail = function useTextbookDetail(props) {
         };
       });
       newArticle = _extends({}, thisArticles, {
+        chapterId: chapterId,
         questions: [].concat(thisQuestions, additionalQuestionArticles)
       });
       newArticles = [].concat(articles.slice(0, articleNumber - 1), [newArticle], articles.slice(articleNumber));
     }
     if (questionCount < thisQuestions.length) {
       newArticle = _extends({}, thisArticles, {
+        chapterId: chapterId,
         questions: [].concat(thisQuestions.slice(0, questionCount))
       });
       newArticles = [].concat(articles.slice(0, articleNumber - 1), [newArticle], articles.slice(articleNumber));
@@ -5930,6 +6294,7 @@ var useTextbookDetail = function useTextbookDetail(props) {
   };
   var handleUpdateArticleCategory = function handleUpdateArticleCategory(articleNumber, categoryId, articles, chapterId, parentChapterId) {
     var newArticle = _extends({}, articles[articleNumber - 1], {
+      chapterId: chapterId,
       category: {
         id: categoryId
       }
@@ -5946,6 +6311,7 @@ var useTextbookDetail = function useTextbookDetail(props) {
     if (newAnswerCount > answerCount) {
       newArticle = _extends({}, articles[articleNumber - 1], {
         answerCount: newAnswerCount,
+        chapterId: chapterId,
         questions: articles[articleNumber - 1].questions.map(function (i) {
           return _extends({}, i, {
             numberOfAnswers: newAnswerCount
@@ -5955,6 +6321,7 @@ var useTextbookDetail = function useTextbookDetail(props) {
     } else if (newAnswerCount < answerCount) {
       newArticle = _extends({}, articles[articleNumber - 1], {
         answerCount: newAnswerCount,
+        chapterId: chapterId,
         questions: articles[articleNumber - 1].questions.map(function (i) {
           return _extends({}, i, {
             numberOfAnswers: newAnswerCount,
@@ -5974,6 +6341,7 @@ var useTextbookDetail = function useTextbookDetail(props) {
     var _extends4;
     var thisQuestions = articles[articleNumber - 1].questions;
     var newArticle = _extends({}, articles[articleNumber - 1], {
+      chapterId: chapterId,
       questions: [].concat(thisQuestions.slice(0, index), [_extends({}, thisQuestions[index], (_extends4 = {}, _extends4[key] = value, _extends4))], thisQuestions.slice(index + 1))
     });
     var newArticles = [].concat(articles.slice(0, articleNumber - 1), [newArticle], articles.slice(articleNumber));
@@ -6134,6 +6502,19 @@ var useTextbookDetail = function useTextbookDetail(props) {
       replace: true
     });
   };
+  var handleCheckArticle = function handleCheckArticle(e, article) {
+    var checked = e.target.checked;
+    if (!(article !== null && article !== void 0 && article.id)) return;
+    if (!checked) {
+      var _newArticles = articlesSelected.filter(function (item) {
+        return item !== article.id;
+      });
+      setArticlesSelected(_newArticles);
+      return;
+    }
+    var newArticles = [].concat(articlesSelected, [article.id]);
+    setArticlesSelected(newArticles);
+  };
   useEffect(function () {
     var getTextbookDetail = function getTextbookDetail() {
       try {
@@ -6158,6 +6539,53 @@ var useTextbookDetail = function useTextbookDetail(props) {
     };
     if (id) getTextbookDetail();
   }, [dispatch, id]);
+  var handleChangeExamRequestBeforeOpenDialog = function handleChangeExamRequestBeforeOpenDialog() {
+    var _textbookSubject$valu;
+    handleOpenCreateExamDialog();
+    var articles = textbook.chapters.map(function (chapter) {
+      var isSubChapters = !!chapter.subChapters.length;
+      if (isSubChapters) {
+        var _articles = chapter.subChapters.map(function (chapter) {
+          return chapter.articles;
+        });
+        return _articles.filter(Boolean).flat();
+      }
+      return chapter.articles;
+    });
+    var articlesAfterFlat = articles.flat();
+    var questionCount = 0;
+    var articleCount = 1;
+    var questions = articlesAfterFlat.map(function (article) {
+      if (articlesSelected.findIndex(function (item) {
+        return item === article.id;
+      }) !== -1) {
+        var _questions = article.questions.map(function (question) {
+          var _article$category3;
+          var newQuestion = {
+            article: articleCount,
+            id: question === null || question === void 0 ? void 0 : question.id,
+            correctAnswers: question.correctAnswers,
+            numberOfAnswers: question.numberOfAnswers,
+            score: question.score,
+            questionOrder: questionCount,
+            categoryId: (_article$category3 = article.category) === null || _article$category3 === void 0 ? void 0 : _article$category3.id
+          };
+          questionCount++;
+          return newQuestion;
+        });
+        articleCount++;
+        return _questions;
+      }
+      return [];
+    });
+    var exam = {
+      title: "",
+      duration: 10,
+      subjectId: (_textbookSubject$valu = textbookSubject === null || textbookSubject === void 0 ? void 0 : textbookSubject.value) != null ? _textbookSubject$valu : 0,
+      questions: questions.flat().filter(Boolean)
+    };
+    handleChangeExamRequest(exam);
+  };
   useEffect(function () {
     document.title = t("textbooks") + " | " + t(id ? "textbook_detail" : "create_textbook");
   }, [id, t]);
@@ -6177,6 +6605,15 @@ var useTextbookDetail = function useTextbookDetail(props) {
     selectedDeleteItem: selectedDeleteItem,
     isEditedTitle: isEditedTitle,
     isReadonlyParam: isReadonlyParam,
+    articlesSelected: articlesSelected,
+    isOpenDialog: isOpenDialog,
+    examRequest: examRequest,
+    handleChangeExamRequest: handleChangeExamRequest,
+    handleCheckArticle: handleCheckArticle,
+    handleOpenCreateExamDialog: handleChangeExamRequestBeforeOpenDialog,
+    handleSaveExam: handleSaveExam,
+    handleCloseDialog: handleCloseDialog,
+    handleCreateExam: handleCreateExam,
     handleChangeTextbookTitle: handleChangeTextbookTitle,
     handleCreateOrUpdateTextbook: handleCreateOrUpdateTextbook,
     handleChangeTextbookSubject: handleChangeTextbookSubject,
@@ -6616,9 +7053,9 @@ var SubjectSelector = function SubjectSelector(_ref) {
     !minimumTextSearchLength && defaultValueAtFirst && options.length && onChange(options[0], subjects[0]);
   }, [JSON.stringify(options), JSON.stringify(subjects), defaultValueAtFirst, minimumTextSearchLength]);
   return React.createElement(FormGroup, {
-    className: "" + styleGlobal["filter-item"]
+    className: "" + styles["filter-item"]
   }, !!title && React.createElement("label", {
-    className: "" + styleGlobal["title-form"]
+    className: "" + styles["title-form"]
   }, title), React.createElement(CustomSelectOption, {
     options: options,
     inputValue: searchString,
@@ -6634,1036 +7071,1115 @@ var SubjectSelector = function SubjectSelector(_ref) {
   }));
 };
 
-var TextbookViewDetail = function TextbookViewDetail(props) {
-  var _textbook$chapters;
-  var _useTextbookDetail = useTextbookDetail(props),
-    id = _useTextbookDetail.id,
-    t = _useTextbookDetail.t,
-    textbook = _useTextbookDetail.textbook,
-    textbookSubject = _useTextbookDetail.textbookSubject,
-    isReadonly = _useTextbookDetail.isReadonly,
-    isNotFound = _useTextbookDetail.isNotFound,
-    parentChapter = _useTextbookDetail.parentChapter,
-    textbookId = _useTextbookDetail.textbookId,
-    selectedChapter = _useTextbookDetail.selectedChapter,
-    selectedDeleteItem = _useTextbookDetail.selectedDeleteItem,
-    isEditedTitle = _useTextbookDetail.isEditedTitle,
-    handleChangeTextbookTitle = _useTextbookDetail.handleChangeTextbookTitle,
-    handleChangeTextbookSubject = _useTextbookDetail.handleChangeTextbookSubject,
-    handleGoToTextbookList = _useTextbookDetail.handleGoToTextbookList,
-    handleCreateOrUpdateTextbook = _useTextbookDetail.handleCreateOrUpdateTextbook,
-    handleCloseChapterNameDialog = _useTextbookDetail.handleCloseChapterNameDialog,
-    handleCreateChapter = _useTextbookDetail.handleCreateChapter,
-    handleAddChapterToTextbook = _useTextbookDetail.handleAddChapterToTextbook,
-    handleAddChapterToParentSubchapter = _useTextbookDetail.handleAddChapterToParentSubchapter,
-    handleChangeChapterName = _useTextbookDetail.handleChangeChapterName,
-    handleChangeChapterPageFrom = _useTextbookDetail.handleChangeChapterPageFrom,
-    handleChangeChapterPageTo = _useTextbookDetail.handleChangeChapterPageTo,
-    handleAddArticleToChapter = _useTextbookDetail.handleAddArticleToChapter,
-    handleUpdateArticleQuestionCountFromChapter = _useTextbookDetail.handleUpdateArticleQuestionCountFromChapter,
-    handleUpdateArticleCategory = _useTextbookDetail.handleUpdateArticleCategory,
-    handleUpdateArticleAnswerCount = _useTextbookDetail.handleUpdateArticleAnswerCount,
-    handleUpdateArticleQuestion = _useTextbookDetail.handleUpdateArticleQuestion,
-    handleCloseArticleDialog = _useTextbookDetail.handleCloseArticleDialog,
-    handleOpenAddArticleDialog = _useTextbookDetail.handleOpenAddArticleDialog,
-    handleOpenRemoveArticleConfirmDialog = _useTextbookDetail.handleOpenRemoveArticleConfirmDialog,
-    handleCloseConfirmDeleteDialog = _useTextbookDetail.handleCloseConfirmDeleteDialog,
-    handleRemoveSelectedItem = _useTextbookDetail.handleRemoveSelectedItem,
-    handleOpenRemoveChapterConfirmDialog = _useTextbookDetail.handleOpenRemoveChapterConfirmDialog;
-  var _useCategorySelect = useCategorySelect({
-      subjectId: id ? textbookSubject === null || textbookSubject === void 0 ? void 0 : textbookSubject.value : undefined
-    }),
-    categoryOptions = _useCategorySelect.categoryOptions;
-  if (isNotFound) return React.createElement(NotFound, null);
-  return React.createElement(Container, {
-    maxWidth: "xl",
-    className: "bg-white py-5 p-4 rounded-4 h-100 d-flex flex-column"
-  }, React.createElement(Stack, {
-    direction: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    mb: 2
-  }, React.createElement(Typography, {
-    variant: "h3"
-  }, t(id ? isReadonly ? "view_textbook" : "update_textbook" : "create_textbook"))), React.createElement(Grid, {
-    container: true,
-    spacing: 3
-  }, React.createElement(Grid, {
-    item: true,
-    xs: 4,
-    className: "d-flex align-items-center"
-  }, React.createElement(Table, null, React.createElement(TableBody, null, React.createElement(TableRow, {
-    sx: {
-      "& td": {
-        border: 0
-      }
-    }
-  }, React.createElement(TableCell, {
-    className: "p-2 pe-0",
-    sx: {
-      width: "15%"
-    }
-  }, React.createElement(InputLabel, null, React.createElement("span", {
-    className: "fw-bold"
-  }, t("name")), React.createElement("span", {
-    className: "text-danger"
-  }, "*"))), React.createElement(TableCell, {
-    sx: {
-      width: 0,
-      px: 1
-    }
-  }, ":"), React.createElement(TableCell, {
-    className: "p-2"
-  }, React.createElement(InputText, {
-    className: "w-100",
-    value: textbook === null || textbook === void 0 ? void 0 : textbook.name,
-    placeholder: t("enter_textbook_title"),
-    onChange: handleChangeTextbookTitle,
-    disabled: isReadonly
-  }))), React.createElement(TableRow, {
-    sx: {
-      "& td": {
-        border: 0
-      }
-    }
-  }, React.createElement(TableCell, {
-    className: "p-2 pe-0"
-  }, React.createElement(InputLabel, null, React.createElement("span", {
-    className: "fw-bold"
-  }, t("subject")), React.createElement("span", {
-    className: "text-danger"
-  }, "*"))), React.createElement(TableCell, {
-    sx: {
-      width: 0,
-      px: 1
-    }
-  }, ":"), React.createElement(TableCell, {
-    className: "p-2"
-  }, React.createElement(SubjectSelector, {
-    value: textbookSubject,
-    onChange: handleChangeTextbookSubject,
-    isDisabled: isReadonly || !!id
-  })))))), React.createElement(Grid, {
-    item: true,
-    xs: 8,
-    className: "d-flex justify-content-end"
-  }, React.createElement("div", null, React.createElement(TextbookActionButtons, {
-    isReadonly: isReadonly,
-    textbook: textbook,
-    onBack: handleGoToTextbookList,
-    onSave: handleCreateOrUpdateTextbook,
-    hideSave: !isEditedTitle && !!id && !isReadonly || textbook.isCreatedByAdmin
-  }))), React.createElement(Grid, {
-    item: true,
-    xs: 12,
-    className: "d-flex justify-content-end"
-  }, !!id && React.createElement(Button, {
-    className: "mx-1",
-    variant: "contained",
-    color: "primary",
-    startIcon: React.createElement(FaPlus, {
-      size: 12
-    }),
-    onClick: handleAddChapterToTextbook,
-    disabled: isReadonly
-  }, t("add_chapter"))), React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, React.createElement(Stack, {
-    spacing: 3
-  }, !!(textbook !== null && textbook !== void 0 && textbook.subject) && (textbook === null || textbook === void 0 ? void 0 : (_textbook$chapters = textbook.chapters) === null || _textbook$chapters === void 0 ? void 0 : _textbook$chapters.map(function (chapter) {
-    return React.createElement(ChapterBox, {
-      key: chapter.id,
-      subject: textbook.subject,
-      data: chapter,
-      categoryOptions: categoryOptions || [],
-      onClickAddSubchapter: handleAddChapterToParentSubchapter,
-      onChangeName: handleChangeChapterName,
-      onChangePageFrom: handleChangeChapterPageFrom,
-      onChangePageTo: handleChangeChapterPageTo,
-      onAddArticle: handleOpenAddArticleDialog,
-      onRemoveArticle: handleOpenRemoveArticleConfirmDialog,
-      onUpdateArticleQuestionCount: handleUpdateArticleQuestionCountFromChapter,
-      onUpdateArticleCategory: handleUpdateArticleCategory,
-      onUpdateArticleQuestionAnswerCount: handleUpdateArticleAnswerCount,
-      onUpdateArticleQuestion: handleUpdateArticleQuestion,
-      onRemoveChapter: handleOpenRemoveChapterConfirmDialog,
-      isReadonly: isReadonly
-    });
-  }))))), React.createElement(ChapterNameDialog, {
-    open: !!(parentChapter !== null && parentChapter !== void 0 && parentChapter.id) || !!textbookId,
-    chapter: parentChapter,
-    onClose: handleCloseChapterNameDialog,
-    onSubmitForm: handleCreateChapter
-  }), React.createElement(ArticleDialog, {
-    open: !!selectedChapter,
-    chapter: selectedChapter,
-    categoryOptions: categoryOptions || [],
-    onClose: handleCloseArticleDialog,
-    onSubmitForm: handleAddArticleToChapter
-  }), selectedDeleteItem && React.createElement(ConfirmDialog, {
-    open: true,
-    toggle: handleCloseConfirmDeleteDialog,
-    text: selectedDeleteItem.confirmText,
-    confirmText: selectedDeleteItem.name,
-    onConfirm: handleRemoveSelectedItem,
-    isDelete: true
-  }));
-};
+var styles$3 = {"drawer":"_11aYm","open":"_3Ydwm","drawer-overlay":"_3SQDf","drawer-header":"_2BwOx","drawer-form":"_2Zo7R","dropdown-content-academy":"_1lzjD","dropdown-change":"_1y7K9","dropdown-academy-item":"_1Y-55","dropdown-content-language":"_1fBXY","dropdown-item-language":"_3Szun","dropdown-item-language-active":"_2HhLb","item-address":"_3WYHC","item-logout":"_2-9ix","title-address":"_1r4pn","image-academy":"_2ZozT"};
 
-var useAutoAcademyDomain = function useAutoAcademyDomain(logout, history, superUrls, homeUrl, homeAcademyUrl) {
-  var searchParams = new URLSearchParams(window.location.search);
-  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;
-  });
-  var initialAcademySearchParam = function initialAcademySearchParam() {
-    var paramAcademyDomain = searchParams.get("domain");
-    var domain = getAcademyDomain();
-    var pathname = window.location.pathname.toLowerCase();
-    if (!user) return;
-    var academyDomain = user.academyDomain;
-    if (!academyDomain) {
-      if (!superUrls.some(function (i) {
-        return pathname.startsWith(i);
-      })) {
-        pushTo({
-          pathname: homeUrl,
-          search: ""
-        });
-      }
-      if (domain) {
-        searchParams.append("domain", domain);
-        pushTo({
-          pathname: homeUrl,
-          search: ""
+var DURATION_OPTIONS = Array.from({
+  length: 120
+}, function (_, i) {
+  return i + 1;
+});
+var DEFAULT_ANSWER_COUNT$1 = 5;
+
+var useExamDetailView = function useExamDetailView(props) {
+  var exam = props.exam,
+    selectedSubject = props.selectedSubject,
+    onChangeExam = props.onChangeExam;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleChangeQuestionCount = function handleChangeQuestionCount(article, questionCount, answerCount) {
+    if (!exam) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var prevQuestions = examQuestions.filter(function (i) {
+      return i.article < +article;
+    });
+    var nextQuestions = examQuestions.filter(function (i) {
+      return i.article > +article;
+    });
+    var lastOrder = questions[questions.length - 1].questionOrder;
+    if (questions.length === questionCount) return;
+    if (questions.length < questionCount) {
+      var additionalQuestions = Array.from({
+        length: questionCount - questions.length
+      }).map(function (_, index) {
+        var _questions$;
+        return {
+          article: +article,
+          correctAnswers: [1],
+          numberOfAnswers: answerCount,
+          categoryId: (_questions$ = questions[0]) === null || _questions$ === void 0 ? void 0 : _questions$.categoryId,
+          score: DEFAULT_SCORE,
+          questionOrder: lastOrder + index + 1
+        };
+      });
+      var newQuestions = [].concat(prevQuestions, questions, additionalQuestions, nextQuestions.map(function (i) {
+        return _extends({}, i, {
+          questionOrder: i.questionOrder + questionCount - questions.length
         });
-      }
+      }));
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(newQuestions)
+      }));
     } else {
-      if (superUrls.some(function (i) {
-        return pathname.startsWith(i);
-      })) {
-        pushTo({
-          pathname: homeAcademyUrl,
-          search: ""
+      var remainQuestions = questions.slice(0, questionCount);
+      var _newQuestions = [].concat(prevQuestions, remainQuestions, nextQuestions.map(function (i) {
+        return _extends({}, i, {
+          questionOrder: i.questionOrder - questions.length + questionCount
         });
-      }
-      if (paramAcademyDomain && academyDomain.trim().toLocaleLowerCase() != (paramAcademyDomain === null || paramAcademyDomain === void 0 ? void 0 : paramAcademyDomain.trim().toLocaleLowerCase())) {
-        logout();
-      }
-      if (!paramAcademyDomain && academyDomain) {
-        searchParams.append("domain", academyDomain);
-        pushTo(_extends({}, window.location, {
-          search: searchParams.toString()
-        }));
-      }
+      }));
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(_newQuestions)
+      }));
     }
   };
-  var pushTo = function pushTo(data) {
-    if (history.push) history.push(data);else history(data);
-  };
-  useEffect(function () {
-    initialAcademySearchParam();
-  }, [window.location.pathname, user === null || user === void 0 ? void 0 : user.academyDomain]);
-};
-
-var useList = function useList(fetchData, defaultQuery) {
-  var dispatch = useDispatch();
-  var _useState = useState(defaultQuery),
-    filter = _useState[0],
-    setFilter = _useState[1];
-  var _useState2 = useState(0),
-    totalPages = _useState2[0],
-    setTotalPages = _useState2[1];
-  var _useState3 = useState([]),
-    data = _useState3[0],
-    setData = _useState3[1];
-  var _useState4 = useState(),
-    selectedItem = _useState4[0],
-    setSelectedItem = _useState4[1];
-  var textSearchRef = useRef(null);
-  var isFirstLoadRef = useRef(true);
-  var handleChangeSelectedItem = function handleChangeSelectedItem(item) {
-    setSelectedItem(item);
+  var handleChangeCategory = function handleChangeCategory(article, categoryId) {
+    if (!exam) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var otherQuestions = examQuestions.filter(function (i) {
+      return i.article !== +article;
+    });
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(otherQuestions, questions.map(function (q) {
+        return _extends({}, q, {
+          categoryId: categoryId
+        });
+      }))
+    }));
   };
-  var getData = function getData(isLoading) {
-    if (isLoading === void 0) {
-      isLoading = false;
-    }
-    try {
-      var _temp2 = function _temp2() {
-        isLoading && dispatch(setLoading(false));
-      };
-      if (isFirstLoadRef.current) isFirstLoadRef.current = false;
-      isLoading && dispatch(setLoading(true));
-      var _temp = _catch(function () {
-        return Promise.resolve(fetchData(filter)).then(function (res) {
-          var _res$data = res.data,
-            _res$data$items = _res$data.items,
-            items = _res$data$items === void 0 ? [] : _res$data$items,
-            _res$data$totalPages = _res$data.totalPages,
-            totalPages = _res$data$totalPages === void 0 ? 0 : _res$data$totalPages;
-          setTotalPages(totalPages);
-          setData(items);
-        });
-      }, function (error) {
-        var _error$response, _error$response$data;
-        setTotalPages(0);
-        setData([]);
-        toast.error((error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.title) || "Get data failed");
+  var handleDeleteArticle = function handleDeleteArticle(article) {
+    if (!exam) return;
+    var removedQuestions = exam.questions.filter(function (i) {
+      return i.article === +article;
+    }).map(function (i) {
+      return i.questionOrder;
+    });
+    var max = Math.max.apply(Math, removedQuestions);
+    var examQuestions = exam.questions.filter(function (i) {
+      return i.article !== +article;
+    }).map(function (i) {
+      return _extends({}, i, {
+        article: i.article > article ? i.article - 1 : i.article,
+        questionOrder: i.questionOrder > max ? i.questionOrder - removedQuestions.length : i.questionOrder
       });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-    } catch (e) {
-      return Promise.reject(e);
+    });
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(examQuestions)
+    }));
+  };
+  var handleChangeAnswerCount = function handleChangeAnswerCount(article, newAnswerCount, answerCount) {
+    if (!exam) return;
+    if (newAnswerCount === answerCount) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var otherQuestions = examQuestions.filter(function (i) {
+      return i.article !== +article;
+    });
+    if (answerCount < newAnswerCount) {
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(otherQuestions, questions.map(function (q) {
+          return _extends({}, q, {
+            numberOfAnswers: newAnswerCount
+          });
+        }))
+      }));
+    } else {
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(otherQuestions, questions.map(function (q) {
+          var _q$correctAnswers;
+          return _extends({}, q, {
+            numberOfAnswers: newAnswerCount,
+            correctAnswers: (_q$correctAnswers = q.correctAnswers) === null || _q$correctAnswers === void 0 ? void 0 : _q$correctAnswers.filter(function (i) {
+              return i <= newAnswerCount;
+            })
+          });
+        }))
+      }));
     }
   };
-  var handleSort = function handleSort(sortColumnName) {
-    var sortColumnDirection = OrderType.ASC;
-    console.log({
-      sortColumnName: typeof sortColumnName,
-      filter: typeof filter.sortColumnName
+  var handleChangeCorrectAnswers = function handleChangeCorrectAnswers(article, index, answer) {
+    if (!exam) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
     });
-    if (filter.sortColumnName == sortColumnName && filter.sortColumnDirection === OrderType.ASC) sortColumnDirection = OrderType.DESC;
-    setFilter(_extends({}, filter, {
-      sortColumnName: sortColumnName,
-      sortColumnDirection: sortColumnDirection,
-      currentPage: 1
+    var otherQuestions = examQuestions.filter(function (i) {
+      return i.article !== +article;
+    });
+    var selectedQuestion = questions[index];
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(otherQuestions, questions.slice(0, index), [_extends({}, selectedQuestion, {
+        correctAnswers: [answer]
+      })], questions.slice(index + 1))
     }));
   };
-  var handleChangeSearchText = function handleChangeSearchText(e) {
-    if (!textSearchRef.current) return;
-    textSearchRef.current.value = e.target.value.trim();
-    debounceSearch();
+  var handleChangeScoreAnswer = function handleChangeScoreAnswer(article, index, score) {
+    if (!exam) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var otherQuestions = examQuestions.filter(function (i) {
+      return i.article !== +article;
+    });
+    var selectedQuestion = questions[index];
+    if (score === selectedQuestion.score) return;
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(otherQuestions, questions.slice(0, index), [_extends({}, selectedQuestion, {
+        score: score
+      })], questions.slice(index + 1))
+    }));
   };
-  var handleChangePage = function handleChangePage(_, page) {
-    setFilter(_extends({}, filter, {
-      currentPage: page
+  var handleChangeDuration = function handleChangeDuration(value) {
+    if (!exam) return;
+    onChangeExam(_extends({}, exam, {
+      duration: value === null || value === void 0 ? void 0 : value.value
     }));
   };
-  var calcOrderNumber = function calcOrderNumber(index) {
-    var _filter$currentPage, _filter$pageSize;
-    return (((_filter$currentPage = filter.currentPage) != null ? _filter$currentPage : 0) - 1) * ((_filter$pageSize = filter.pageSize) != null ? _filter$pageSize : 0) + index + 1;
+  var handleChangeTitle = function handleChangeTitle(e) {
+    if (!exam) return;
+    onChangeExam(_extends({}, exam, {
+      title: e.target.value
+    }));
   };
-  var debounceSearch = _.debounce(function () {
-    var _textSearchRef$curren;
-    setFilter(_extends({}, filter, {
-      currentPage: 1,
-      textSearch: (_textSearchRef$curren = textSearchRef.current) === null || _textSearchRef$curren === void 0 ? void 0 : _textSearchRef$curren.value
+  var handleAddArticle = function handleAddArticle() {
+    var _$maxBy, _$maxBy2;
+    if (!exam) return;
+    var maxArticle = ((_$maxBy = _.maxBy(exam.questions, "article")) === null || _$maxBy === void 0 ? void 0 : _$maxBy.article) || 0;
+    var maxOrder = ((_$maxBy2 = _.maxBy(exam.questions, "questionOrder")) === null || _$maxBy2 === void 0 ? void 0 : _$maxBy2.questionOrder) || 0;
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(exam.questions, [{
+        article: maxArticle + 1,
+        correctAnswers: [1],
+        numberOfAnswers: DEFAULT_ANSWER_COUNT$1,
+        score: DEFAULT_SCORE,
+        questionOrder: maxOrder + 1
+      }])
     }));
-  }, 500);
+  };
+  var examGroupByArticle = useMemo(function () {
+    if (!exam) return [];
+    var articles = [];
+    var groupedArticle = _.groupBy(exam.questions, "article");
+    for (var key in groupedArticle) {
+      if (Object.prototype.hasOwnProperty.call(groupedArticle, key)) {
+        var _questions$find, _$maxBy3;
+        var questions = groupedArticle[key];
+        articles.push({
+          article: +key,
+          categoryId: (_questions$find = questions.find(function (i) {
+            return !!i.categoryId;
+          })) === null || _questions$find === void 0 ? void 0 : _questions$find.categoryId,
+          answerCount: ((_$maxBy3 = _.maxBy(questions, "numberOfAnswers")) === null || _$maxBy3 === void 0 ? void 0 : _$maxBy3.numberOfAnswers) || DEFAULT_ANSWER_COUNT$1,
+          questionCount: questions.length,
+          questions: questions
+        });
+      }
+    }
+    return _.sortBy(articles, "article");
+  }, [JSON.stringify(exam)]);
+  var durationOptions = useMemo(function () {
+    var options = DURATION_OPTIONS.map(function (i) {
+      return {
+        label: i + "\uBD84",
+        value: i
+      };
+    });
+    if (!!exam.duration && exam.duration > DURATION_OPTIONS[DURATION_OPTIONS.length - 1]) return [].concat(options, [{
+      label: exam.duration + "\uBD84",
+      value: exam.duration
+    }]);
+    return options;
+  }, [exam.duration]);
   useEffect(function () {
-    getData(isFirstLoadRef.current);
-  }, [JSON.stringify(filter)]);
+    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 {
-    filter: filter,
-    textSearchRef: textSearchRef,
-    totalPages: totalPages,
-    data: data,
-    selectedItem: selectedItem,
-    handleSort: handleSort,
-    handleChangeSearchText: handleChangeSearchText,
-    handleChangePage: handleChangePage,
-    calcOrderNumber: calcOrderNumber,
-    handleChangeSelectedItem: handleChangeSelectedItem,
-    getData: getData
+    t: t,
+    durationOptions: durationOptions,
+    examGroupByArticle: examGroupByArticle,
+    handleAddArticle: handleAddArticle,
+    handleChangeScoreAnswer: handleChangeScoreAnswer,
+    handleChangeTitle: handleChangeTitle,
+    handleChangeDuration: handleChangeDuration,
+    handleChangeCorrectAnswers: handleChangeCorrectAnswers,
+    handleChangeAnswerCount: handleChangeAnswerCount,
+    handleChangeQuestionCount: handleChangeQuestionCount,
+    handleChangeCategory: handleChangeCategory,
+    handleDeleteArticle: handleDeleteArticle
   };
 };
 
-
-
-var index$1 = {
-  __proto__: null,
-  useLogin: useLogin,
-  useAutoAcademyDomain: useAutoAcademyDomain,
-  useList: useList
-};
-
-var useTextbookList = function useTextbookList(props) {
-  var role = props.role,
-    navigate = props.navigate;
-  var _useList = useList(function (search) {
-      return getTextbookListApi(search, role);
-    }, TextbookDefaultQuery),
-    filter = _useList.filter,
-    textSearchRef = _useList.textSearchRef,
-    totalPages = _useList.totalPages,
-    textbooks = _useList.data,
-    selectedTextbook = _useList.selectedItem,
-    handleSort = _useList.handleSort,
-    handleChangeSearchText = _useList.handleChangeSearchText,
-    handleChangePage = _useList.handleChangePage,
-    calcOrderNumber = _useList.calcOrderNumber,
-    handleChangeSelectedItem = _useList.handleChangeSelectedItem,
-    getData = _useList.getData;
-  var textbookUrl = role === Role.Teacher ? TEXTBOOK_URL$1 : ADMIN_TEXTBOOK_URL;
-  var dispatch = useDispatch();
-  var handleViewTextbook = function handleViewTextbook(id) {
-    navigate(textbookUrl + "/" + id + "?readonly=true", {
-      replace: true
-    });
-  };
-  var handleUpdateTextbook = function handleUpdateTextbook(id) {
-    navigate(textbookUrl + "/" + id, {
-      replace: true
-    });
-  };
-  var handleCreateTextbook = function handleCreateTextbook() {
-    navigate(textbookUrl + "/create", {
-      replace: true
-    });
-  };
-  var toggleConfirmDialog = function toggleConfirmDialog() {
-    handleChangeSelectedItem(undefined);
-  };
-  var handleSelectDeleteTextbook = function handleSelectDeleteTextbook(textbook) {
-    return [handleChangeSelectedItem(textbook)];
-  };
-  var handleDeleteTextbook = function handleDeleteTextbook() {
-    try {
-      var _temp2 = function _temp2() {
-        dispatch(setLoading(false));
-      };
-      if (!(selectedTextbook !== null && selectedTextbook !== void 0 && selectedTextbook.id)) return Promise.resolve();
-      dispatch(setLoading(true));
-      var _temp = _catch(function () {
-        return Promise.resolve(deleteTextbookApi(selectedTextbook.id, role)).then(function () {
-          return Promise.resolve(getData(false)).then(function () {
-            toggleConfirmDialog();
-          });
-        });
-      }, function (error) {
-        var _error$response, _error$response$data;
-        toast.error((error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.title) || "Textbook deleted failed");
-      });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  return {
-    filter: filter,
-    textSearchRef: textSearchRef,
-    totalPages: totalPages,
-    textbooks: textbooks,
-    selectedTextbook: selectedTextbook,
-    handleSort: handleSort,
-    handleChangeSearchText: handleChangeSearchText,
-    handleChangePage: handleChangePage,
-    calcOrderNumber: calcOrderNumber,
-    handleViewTextbook: handleViewTextbook,
-    handleUpdateTextbook: handleUpdateTextbook,
-    handleCreateTextbook: handleCreateTextbook,
-    toggleConfirmDialog: toggleConfirmDialog,
-    handleDeleteTextbook: handleDeleteTextbook,
-    handleSelectDeleteTextbook: handleSelectDeleteTextbook
-  };
+var ExamDetailView = function ExamDetailView(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    exam = _ref.exam,
+    isDisabled = _ref.isDisabled,
+    isEdit = _ref.isEdit,
+    onChangeExam = _ref.onChangeExam;
+  var _useSubjectSelect = useSubjectSelect(),
+    subjectOptions = _useSubjectSelect.subjectOptions,
+    selectedSubject = _useSubjectSelect.selectedSubject,
+    handleChangeSubject = _useSubjectSelect.handleChangeSubject;
+  var _useExamDetailView = useExamDetailView({
+      exam: exam,
+      onChangeExam: onChangeExam,
+      selectedSubject: selectedSubject
+    }),
+    t = _useExamDetailView.t,
+    durationOptions = _useExamDetailView.durationOptions,
+    examGroupByArticle = _useExamDetailView.examGroupByArticle,
+    handleAddArticle = _useExamDetailView.handleAddArticle,
+    handleChangeScoreAnswer = _useExamDetailView.handleChangeScoreAnswer,
+    handleChangeTitle = _useExamDetailView.handleChangeTitle,
+    handleChangeDuration = _useExamDetailView.handleChangeDuration,
+    handleChangeCorrectAnswers = _useExamDetailView.handleChangeCorrectAnswers,
+    handleChangeAnswerCount = _useExamDetailView.handleChangeAnswerCount,
+    handleChangeQuestionCount = _useExamDetailView.handleChangeQuestionCount,
+    handleChangeCategory = _useExamDetailView.handleChangeCategory,
+    handleDeleteArticle = _useExamDetailView.handleDeleteArticle;
+  return React.createElement(Grid, {
+    container: true,
+    spacing: 3,
+    className: className + " " + styles["custom-row"]
+  }, React.createElement(Grid, {
+    item: true,
+    xs: 5,
+    className: 'mb-2'
+  }, React.createElement("label", {
+    className: styles["form-label"] + " " + styles$2["question-label"],
+    htmlFor: "title"
+  }, t("title")), React.createElement("input", {
+    disabled: isDisabled,
+    className: "" + styles["form-control"],
+    value: exam.title,
+    id: "title",
+    placeholder: t("enter_title"),
+    onChange: handleChangeTitle
+  })), React.createElement(Grid, {
+    item: true,
+    xs: 3,
+    className: 'mb-2'
+  }, React.createElement("label", {
+    className: styles["form-label"] + " " + styles$2["question-label"],
+    htmlFor: "duration"
+  }, t("duration")), React.createElement(CustomSelect, {
+    inputId: "duration",
+    value: exam.duration,
+    options: durationOptions,
+    onChange: handleChangeDuration,
+    isDisabled: isDisabled
+  })), React.createElement(Grid, {
+    item: true,
+    xs: 3,
+    className: 'mb-2'
+  }, React.createElement("label", {
+    className: styles["form-label"] + " " + styles$2["question-label"],
+    htmlFor: "duration"
+  }, t("subject"), " ", selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.name), React.createElement(CustomSelect, {
+    inputId: "subject",
+    value: selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id,
+    options: subjectOptions,
+    onChange: handleChangeSubject,
+    isDisabled: isDisabled || isEdit
+  })), examGroupByArticle.map(function (i, index) {
+    return React.createElement(Grid, {
+      item: true,
+      key: i.article,
+      xs: 12,
+      className: index === examGroupByArticle.length - 1 ? "mb-2" : ''
+    }, React.createElement(ArticleGroupView, Object.assign({}, i, {
+      isActive: index === examGroupByArticle.length - 1,
+      onChangeQuestionCount: handleChangeQuestionCount,
+      onChangeCategory: handleChangeCategory,
+      onChangeAnswerCount: handleChangeAnswerCount,
+      onChangeCorrectAnswers: handleChangeCorrectAnswers,
+      onChangeScoreAnswer: handleChangeScoreAnswer,
+      onDelete: handleDeleteArticle,
+      isDisabled: isDisabled,
+      selectedSubject: selectedSubject,
+      isDeletable: examGroupByArticle.length > 1
+    })));
+  }), React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, React.createElement("button", {
+    disabled: isDisabled,
+    className: styles["btn-outline-primary"] + " w-100 d-flex justify-content-center align-items-center " + styles$2["question-btn"] + " mt-3",
+    onClick: handleAddArticle
+  }, React.createElement(FaPlusCircle, {
+    className: "me-2"
+  }), "\uBB38\uD56D \uCD94\uAC00\uD558\uAE30")));
 };
 
-var EmptyRow = function EmptyRow() {
+var _excluded$4 = ["isOpen", "onClose", "handleSaveExam"];
+var CreateExamDrawer = function CreateExamDrawer(props) {
+  var isOpen = props.isOpen,
+    onClose = props.onClose,
+    handleSaveExam = props.handleSaveExam,
+    examDetailViewProps = _objectWithoutPropertiesLoose(props, _excluded$4);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return React.createElement(TableRow, null, React.createElement(TableCell, {
-    colSpan: 12,
-    className: "text-center text-muted"
-  }, t("no_data")));
+  var theme = useTheme();
+  var isTabletUp = useMediaQuery(theme.breakpoints.up('lg'));
+  return React.createElement("div", null, React.createElement("div", {
+    className: styles$3["drawer-overlay"] + " " + (isOpen && styles$3["open"]),
+    onClick: function onClick() {
+      return onClose();
+    }
+  }), React.createElement("div", {
+    className: styles$3["drawer"] + " bg-white " + (isOpen && styles$3["open"]),
+    style: {
+      width: "" + (isTabletUp ? "70vw" : "100vw")
+    }
+  }, React.createElement("div", {
+    className: styles$3["drawer-header"] + " d-flex justify-content-between align-items-center"
+  }, React.createElement("div", {
+    style: {
+      color: "#5458D5",
+      cursor: "pointer",
+      padding: "0.5rem 1rem",
+      border: "1px solid #5458D5",
+      backgroundColor: "white",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: "6px"
+    },
+    onClick: handleSaveExam
+  }, t("live_exam")), React.createElement("span", {
+    className: "p-1 pointer",
+    onClick: function onClick() {
+      return onClose();
+    }
+  }, React.createElement(FaTimes, {
+    size: 18
+  }))), React.createElement("div", {
+    className: "" + styles$3["drawer-form"]
+  }, React.createElement(ExamDetailView, Object.assign({}, examDetailViewProps)))));
 };
 
-var LayoutList = function LayoutList(_ref) {
-  var children = _ref.children,
-    title = _ref.title;
-  return React.createElement(Box, {
-    className: 'bg-white p-5'
+var TextbookViewDetail = function TextbookViewDetail(props) {
+  var _textbook$chapters;
+  var _useTextbookDetail = useTextbookDetail(props),
+    id = _useTextbookDetail.id,
+    t = _useTextbookDetail.t,
+    textbook = _useTextbookDetail.textbook,
+    textbookSubject = _useTextbookDetail.textbookSubject,
+    isReadonly = _useTextbookDetail.isReadonly,
+    isNotFound = _useTextbookDetail.isNotFound,
+    parentChapter = _useTextbookDetail.parentChapter,
+    textbookId = _useTextbookDetail.textbookId,
+    selectedChapter = _useTextbookDetail.selectedChapter,
+    articlesSelected = _useTextbookDetail.articlesSelected,
+    selectedDeleteItem = _useTextbookDetail.selectedDeleteItem,
+    isEditedTitle = _useTextbookDetail.isEditedTitle,
+    isOpenDialog = _useTextbookDetail.isOpenDialog,
+    examRequest = _useTextbookDetail.examRequest,
+    handleChangeExamRequest = _useTextbookDetail.handleChangeExamRequest,
+    handleSaveExam = _useTextbookDetail.handleSaveExam,
+    handleCloseDialog = _useTextbookDetail.handleCloseDialog,
+    handleCreateExam = _useTextbookDetail.handleCreateExam,
+    handleCheckArticle = _useTextbookDetail.handleCheckArticle,
+    handleChangeTextbookTitle = _useTextbookDetail.handleChangeTextbookTitle,
+    handleOpenCreateExamDialog = _useTextbookDetail.handleOpenCreateExamDialog,
+    handleChangeTextbookSubject = _useTextbookDetail.handleChangeTextbookSubject,
+    handleGoToTextbookList = _useTextbookDetail.handleGoToTextbookList,
+    handleCreateOrUpdateTextbook = _useTextbookDetail.handleCreateOrUpdateTextbook,
+    handleCloseChapterNameDialog = _useTextbookDetail.handleCloseChapterNameDialog,
+    handleCreateChapter = _useTextbookDetail.handleCreateChapter,
+    handleAddChapterToTextbook = _useTextbookDetail.handleAddChapterToTextbook,
+    handleAddChapterToParentSubchapter = _useTextbookDetail.handleAddChapterToParentSubchapter,
+    handleChangeChapterName = _useTextbookDetail.handleChangeChapterName,
+    handleChangeChapterPageFrom = _useTextbookDetail.handleChangeChapterPageFrom,
+    handleChangeChapterPageTo = _useTextbookDetail.handleChangeChapterPageTo,
+    handleAddArticleToChapter = _useTextbookDetail.handleAddArticleToChapter,
+    handleUpdateArticleQuestionCountFromChapter = _useTextbookDetail.handleUpdateArticleQuestionCountFromChapter,
+    handleUpdateArticleCategory = _useTextbookDetail.handleUpdateArticleCategory,
+    handleUpdateArticleAnswerCount = _useTextbookDetail.handleUpdateArticleAnswerCount,
+    handleUpdateArticleQuestion = _useTextbookDetail.handleUpdateArticleQuestion,
+    handleCloseArticleDialog = _useTextbookDetail.handleCloseArticleDialog,
+    handleOpenAddArticleDialog = _useTextbookDetail.handleOpenAddArticleDialog,
+    handleOpenRemoveArticleConfirmDialog = _useTextbookDetail.handleOpenRemoveArticleConfirmDialog,
+    handleCloseConfirmDeleteDialog = _useTextbookDetail.handleCloseConfirmDeleteDialog,
+    handleRemoveSelectedItem = _useTextbookDetail.handleRemoveSelectedItem,
+    handleOpenRemoveChapterConfirmDialog = _useTextbookDetail.handleOpenRemoveChapterConfirmDialog;
+  var _useCategorySelect = useCategorySelect({
+      subjectId: id ? textbookSubject === null || textbookSubject === void 0 ? void 0 : textbookSubject.value : undefined
+    }),
+    categoryOptions = _useCategorySelect.categoryOptions;
+  if (isNotFound) return React.createElement(NotFound, null);
+  return React.createElement(Container, {
+    maxWidth: "xl",
+    className: "bg-white py-5 p-4 rounded-4 h-100 d-flex flex-column"
   }, React.createElement(Stack, {
     direction: "row",
     alignItems: "center",
     justifyContent: "space-between",
     mb: 2
   }, React.createElement(Typography, {
-    variant: 'h4'
-  }, title)), React.createElement(Box, null, children));
-};
-
-var SortIcon = function SortIcon(_ref) {
-  var isAscending = _ref.isAscending,
-    onClick = _ref.onClick;
-  return React.createElement("div", {
-    className: "d-flex flex-column " + styleGlobal["sort-icons"],
-    onClick: onClick
-  }, React.createElement(FaSortUp, {
-    className: isAscending === true ? styleGlobal["active"] : ""
-  }), React.createElement(FaSortDown, {
-    className: isAscending === false ? styleGlobal["active"] : ""
-  }));
-};
-
-var TableHeader = function TableHeader(_ref) {
-  var headerTemplates = _ref.headerTemplates,
-    filter = _ref.filter,
-    onSort = _ref.onSort;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return React.createElement(TableHead, null, React.createElement(TableRow, null, headerTemplates.map(function (i, index$1) {
-    return React.createElement(TableCell, {
-      key: index$1,
-      className: "" + (!!i.sortKey && "pointer"),
-      onClick: !!i.sortKey ? function () {
-        return onSort === null || onSort === void 0 ? void 0 : onSort(i.sortKey);
-      } : undefined
-    }, React.createElement("div", {
-      className: "d-flex justify-content-between align-items-center text-nowrap"
-    }, t(i.title), !!i.sortKey && React.createElement(SortIcon, {
-      isAscending: filter.sortColumnName !== i.sortKey ? undefined : filter.sortColumnDirection === OrderType.ASC
-    })));
-  })));
-};
-
-var SearchInput = function SearchInput(_ref) {
-  var textSearchRef = _ref.textSearchRef,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "Search for..." : _ref$placeholder,
-    onChange = _ref.onChange,
-    _ref$fit = _ref.fit,
-    fit = _ref$fit === void 0 ? true : _ref$fit;
-  return React.createElement(Paper, {
-    component: "div",
-    className: "bg-light w-100 " + (fit && "h-100"),
+    variant: "h3"
+  }, t(id ? isReadonly ? "view_textbook" : "update_textbook" : "create_textbook"))), React.createElement(Grid, {
+    container: true,
+    spacing: 3
+  }, React.createElement(Grid, {
+    item: true,
+    xs: 4,
+    className: "d-flex align-items-center"
+  }, React.createElement(Table, null, React.createElement(TableBody, null, React.createElement(TableRow, {
     sx: {
-      p: "2px 4px",
-      display: "flex",
-      alignItems: "center",
-      width: 400,
-      transition: "border 0.2s ease",
-      outline: "1px solid transparent",
-      ":focus-within": {
-        outlineColor: function outlineColor(theme) {
-          return theme.palette.primary.main;
-        }
+      "& td": {
+        border: 0
       }
     }
-  }, React.createElement(Box, {
+  }, React.createElement(TableCell, {
+    className: "p-2 pe-0",
     sx: {
-      p: "10px"
-    },
-    "aria-label": "search"
-  }, React.createElement(IoSearch, {
-    size: 24,
-    className: "pb-1"
-  })), React.createElement(InputBase, {
-    id: "searchText",
-    className: "" + (fit && "h-100"),
+      width: "15%"
+    }
+  }, React.createElement(InputLabel, null, React.createElement("span", {
+    className: "fw-bold"
+  }, t("name")), React.createElement("span", {
+    className: "text-danger"
+  }, "*"))), React.createElement(TableCell, {
     sx: {
-      ml: 1,
-      flex: 1,
-      lineHeight: 1
-    },
-    placeholder: placeholder,
-    ref: textSearchRef,
-    onChange: onChange
-  }));
-};
-
-var TextbookList = function TextbookList(props) {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useTextbookList = useTextbookList(props),
-    filter = _useTextbookList.filter,
-    textbooks = _useTextbookList.textbooks,
-    totalPages = _useTextbookList.totalPages,
-    textSearchRef = _useTextbookList.textSearchRef,
-    selectedTextbook = _useTextbookList.selectedTextbook,
-    handleChangeSearchText = _useTextbookList.handleChangeSearchText,
-    handleSort = _useTextbookList.handleSort,
-    handleChangePage = _useTextbookList.handleChangePage,
-    calcOrderNumber = _useTextbookList.calcOrderNumber,
-    handleViewTextbook = _useTextbookList.handleViewTextbook,
-    handleUpdateTextbook = _useTextbookList.handleUpdateTextbook,
-    handleCreateTextbook = _useTextbookList.handleCreateTextbook,
-    toggleConfirmDialog = _useTextbookList.toggleConfirmDialog,
-    handleDeleteTextbook = _useTextbookList.handleDeleteTextbook,
-    handleSelectDeleteTextbook = _useTextbookList.handleSelectDeleteTextbook;
-  return React.createElement(LayoutList, {
-    title: t(TEXTBOOK_PAGE_TITLE)
-  }, React.createElement(Grid, {
-    container: true
-  }, React.createElement(Grid, {
+      width: 0,
+      px: 1
+    }
+  }, ":"), React.createElement(TableCell, {
+    className: "p-2"
+  }, React.createElement(InputText, {
+    className: "w-100",
+    value: textbook === null || textbook === void 0 ? void 0 : textbook.name,
+    placeholder: t("enter_textbook_title"),
+    onChange: handleChangeTextbookTitle,
+    disabled: isReadonly
+  }))), React.createElement(TableRow, {
+    sx: {
+      "& td": {
+        border: 0
+      }
+    }
+  }, React.createElement(TableCell, {
+    className: "p-2 pe-0"
+  }, React.createElement(InputLabel, null, React.createElement("span", {
+    className: "fw-bold"
+  }, t("subject")), React.createElement("span", {
+    className: "text-danger"
+  }, "*"))), React.createElement(TableCell, {
+    sx: {
+      width: 0,
+      px: 1
+    }
+  }, ":"), React.createElement(TableCell, {
+    className: "p-2"
+  }, React.createElement(SubjectSelector, {
+    value: textbookSubject,
+    onChange: handleChangeTextbookSubject,
+    isDisabled: isReadonly || !!id
+  })))))), React.createElement(Grid, {
     item: true,
-    xs: 6
-  }, React.createElement(SearchInput, {
-    textSearchRef: textSearchRef,
-    onChange: handleChangeSearchText,
-    placeholder: t(TEXT_BOOK_SEARCH_PLACEHOLDER)
-  })), React.createElement(Grid, {
+    xs: 8,
+    className: "d-flex justify-content-end"
+  }, React.createElement("div", null, React.createElement(TextbookActionButtons, {
+    isReadonly: isReadonly,
+    textbook: textbook,
+    onBack: handleGoToTextbookList,
+    onSave: handleCreateOrUpdateTextbook,
+    hideSave: !isEditedTitle && !!id && !isReadonly || textbook.isCreatedByAdmin
+  }))), React.createElement(Grid, {
     item: true,
-    xs: 6
-  }, React.createElement(Stack, {
-    alignItems: "end"
+    xs: 12,
+    gap: "8px",
+    className: "d-flex justify-content-end"
   }, React.createElement(Button, {
+    variant: "outlined",
+    sx: {
+      borderColor: "#5458D5",
+      color: "#5458D5"
+    },
+    onClick: function onClick() {
+      return handleOpenCreateExamDialog();
+    },
+    disabled: isReadonly || !articlesSelected.length,
     startIcon: React.createElement(FaPlus, {
       size: 12
-    }),
+    })
+  }, React.createElement(Typography, null, t("create_new_exam"))), !!id && React.createElement(Button, {
+    className: "mx-1",
     variant: "contained",
     color: "primary",
-    onClick: handleCreateTextbook
-  }, t("create_textbook")))), React.createElement(Grid, {
-    item: true,
-    xs: 12,
-    className: "mt-3"
-  }, React.createElement(Table, null, React.createElement(TableHeader, {
-    headerTemplates: TEXTBOOK_HEADERS,
-    filter: filter,
-    onSort: handleSort
-  }), React.createElement(TableBody, null, textbooks.map(function (i, index) {
-    return React.createElement(TableRow, {
-      key: i.id
-    }, React.createElement(TableCell, null, calcOrderNumber(index)), React.createElement(TableCell, null, i.name), React.createElement(TableCell, null, i.subject.name), React.createElement(TableCell, null, utcToLocalTime(i.createdAt, t("date_format"))), React.createElement(TableCell, null, i.totalChapters), React.createElement(TableCell, null, React.createElement(Stack, {
-      direction: "row",
-      spacing: 1,
-      alignItems: "center"
-    }, !i.isCreatedByAdmin && React.createElement(IconButton, {
-      color: "default",
-      className: "bg-warning text-white",
-      onClick: function onClick() {
-        return handleUpdateTextbook(i.id);
-      }
-    }, React.createElement(FaPencil, {
-      size: 12
-    })), React.createElement(IconButton, {
-      color: "default",
-      className: "bg-primary text-white",
-      onClick: function onClick() {
-        return handleViewTextbook(i.id);
-      }
-    }, React.createElement(FaEye, {
-      size: 12
-    })), !i.isCreatedByAdmin && React.createElement(IconButton, {
-      color: "default",
-      className: "bg-danger text-white",
-      onClick: function onClick() {
-        return handleSelectDeleteTextbook(i);
-      }
-    }, React.createElement(FaTrash, {
+    startIcon: React.createElement(FaPlus, {
       size: 12
-    })))));
-  }), !textbooks.length && React.createElement(EmptyRow, null))), React.createElement("div", {
-    className: "d-flex justify-content-end mt-3"
-  }, !!totalPages && React.createElement(Pagination, {
-    count: totalPages,
-    page: filter.currentPage,
-    onChange: handleChangePage
-  })))), React.createElement(ConfirmDialog, {
-    open: !!(selectedTextbook !== null && selectedTextbook !== void 0 && selectedTextbook.id),
-    toggle: toggleConfirmDialog,
-    text: "" + t("are_you_sure_you_want_to_delete_the_textbook"),
-    onConfirm: handleDeleteTextbook,
-    confirmText: selectedTextbook === null || selectedTextbook === void 0 ? void 0 : selectedTextbook.name,
+    }),
+    onClick: handleAddChapterToTextbook,
+    disabled: isReadonly
+  }, t("add_chapter"))), React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, React.createElement(Stack, {
+    spacing: 3
+  }, !!(textbook !== null && textbook !== void 0 && textbook.subject) && (textbook === null || textbook === void 0 ? void 0 : (_textbook$chapters = textbook.chapters) === null || _textbook$chapters === void 0 ? void 0 : _textbook$chapters.map(function (chapter) {
+    return React.createElement(ChapterBox, {
+      key: chapter.id,
+      subject: textbook.subject,
+      data: chapter,
+      categoryOptions: categoryOptions || [],
+      onClickAddSubchapter: handleAddChapterToParentSubchapter,
+      onChangeName: handleChangeChapterName,
+      onChangePageFrom: handleChangeChapterPageFrom,
+      onChangePageTo: handleChangeChapterPageTo,
+      handleCheckArticle: handleCheckArticle,
+      onAddArticle: handleOpenAddArticleDialog,
+      onRemoveArticle: handleOpenRemoveArticleConfirmDialog,
+      onUpdateArticleQuestionCount: handleUpdateArticleQuestionCountFromChapter,
+      onUpdateArticleCategory: handleUpdateArticleCategory,
+      onUpdateArticleQuestionAnswerCount: handleUpdateArticleAnswerCount,
+      onUpdateArticleQuestion: handleUpdateArticleQuestion,
+      onRemoveChapter: handleOpenRemoveChapterConfirmDialog,
+      isReadonly: isReadonly
+    });
+  }))))), React.createElement(ChapterNameDialog, {
+    open: !!(parentChapter !== null && parentChapter !== void 0 && parentChapter.id) || !!textbookId,
+    chapter: parentChapter,
+    onClose: handleCloseChapterNameDialog,
+    onSubmitForm: handleCreateChapter
+  }), React.createElement(CreateExamDrawer, {
+    isOpen: isOpenDialog,
+    onClose: handleCloseDialog,
+    onSubmit: handleCreateExam,
+    handleSaveExam: handleSaveExam,
+    exam: examRequest,
+    onChangeExam: handleChangeExamRequest
+  }), React.createElement(ArticleDialog, {
+    open: !!selectedChapter,
+    chapter: selectedChapter,
+    categoryOptions: categoryOptions || [],
+    onClose: handleCloseArticleDialog,
+    onSubmitForm: handleAddArticleToChapter
+  }), selectedDeleteItem && React.createElement(ConfirmDialog, {
+    open: true,
+    toggle: handleCloseConfirmDeleteDialog,
+    text: selectedDeleteItem.confirmText,
+    confirmText: selectedDeleteItem.name,
+    onConfirm: handleRemoveSelectedItem,
     isDelete: true
   }));
 };
 
-
-
-var index$2 = {
-  __proto__: null,
-  TextbookList: TextbookList,
-  TextbookDetail: TextbookViewDetail
-};
-
-var _excluded$4 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
-var CustomCreatable = function CustomCreatable(_ref) {
-  var options = _ref.options,
-    isDisabled = _ref.isDisabled,
-    scrollBottom = _ref.scrollBottom,
-    value = _ref.value,
-    isMulti = _ref.isMulti,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var initialValues = Array.isArray(value) ? options.filter(function (i) {
-    return value.includes(i.value);
-  }) : isMulti ? options.filter(function (i) {
-    return i.value == value;
-  }) : options.find(function (i) {
-    return i.value == value;
+var useAutoAcademyDomain = function useAutoAcademyDomain(logout, history, superUrls, homeUrl, homeAcademyUrl) {
+  var searchParams = new URLSearchParams(window.location.search);
+  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;
   });
-  return React.createElement(CreatableSelect, Object.assign({
-    isClearable: true,
-    isDisabled: isDisabled,
-    options: options,
-    value: initialValues,
-    menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti
-  }, rest));
-};
-
-var _excluded$5 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
-var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
-  var isDefault = _ref.isDefault,
-    options = _ref.options,
-    isDisabled = _ref.isDisabled,
-    scrollBottom = _ref.scrollBottom,
-    value = _ref.value,
-    isMulti = _ref.isMulti,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  var initialValues = Array.isArray(value) ? options.filter(function (i) {
-    return value.includes(i.value);
-  }) : isMulti ? options.filter(function (i) {
-    return i.value == value;
-  }) : options.find(function (i) {
-    return i.value == value;
-  });
-  return React.createElement(Select, Object.assign({
-    isDisabled: isDisabled,
-    options: options,
-    value: !isDefault ? initialValues : undefined,
-    defaultValue: isDefault ? initialValues : undefined,
-    menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti
-  }, rest));
-};
-
-var DURATION_OPTIONS = Array.from({
-  length: 120
-}, function (_, i) {
-  return i + 1;
-});
-var DEFAULT_ANSWER_COUNT = 5;
-
-var useExamDetailView = function useExamDetailView(props) {
-  var exam = props.exam,
-    selectedSubject = props.selectedSubject,
-    onChangeExam = props.onChangeExam;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var handleChangeQuestionCount = function handleChangeQuestionCount(article, questionCount, answerCount) {
-    if (!exam) return;
-    var examQuestions = exam.questions;
-    var questions = examQuestions.filter(function (i) {
-      return i.article === +article;
-    });
-    var prevQuestions = examQuestions.filter(function (i) {
-      return i.article < +article;
-    });
-    var nextQuestions = examQuestions.filter(function (i) {
-      return i.article > +article;
-    });
-    var lastOrder = questions[questions.length - 1].questionOrder;
-    if (questions.length === questionCount) return;
-    if (questions.length < questionCount) {
-      var additionalQuestions = Array.from({
-        length: questionCount - questions.length
-      }).map(function (_, index) {
-        var _questions$;
-        return {
-          article: +article,
-          correctAnswers: [1],
-          numberOfAnswers: answerCount,
-          categoryId: (_questions$ = questions[0]) === null || _questions$ === void 0 ? void 0 : _questions$.categoryId,
-          score: DEFAULT_SCORE,
-          questionOrder: lastOrder + index + 1
-        };
-      });
-      var newQuestions = [].concat(prevQuestions, questions, additionalQuestions, nextQuestions.map(function (i) {
-        return _extends({}, i, {
-          questionOrder: i.questionOrder + questionCount - questions.length
+  var initialAcademySearchParam = function initialAcademySearchParam() {
+    var paramAcademyDomain = searchParams.get("domain");
+    var domain = getAcademyDomain();
+    var pathname = window.location.pathname.toLowerCase();
+    if (!user) return;
+    var academyDomain = user.academyDomain;
+    if (!academyDomain) {
+      if (!superUrls.some(function (i) {
+        return pathname.startsWith(i);
+      })) {
+        pushTo({
+          pathname: homeUrl,
+          search: ""
         });
-      }));
-      onChangeExam(_extends({}, exam, {
-        questions: [].concat(newQuestions)
-      }));
+      }
+      if (domain) {
+        searchParams.append("domain", domain);
+        pushTo({
+          pathname: homeUrl,
+          search: ""
+        });
+      }
     } else {
-      var remainQuestions = questions.slice(0, questionCount);
-      var _newQuestions = [].concat(prevQuestions, remainQuestions, nextQuestions.map(function (i) {
-        return _extends({}, i, {
-          questionOrder: i.questionOrder - questions.length + questionCount
+      if (superUrls.some(function (i) {
+        return pathname.startsWith(i);
+      })) {
+        pushTo({
+          pathname: homeAcademyUrl,
+          search: ""
         });
-      }));
-      onChangeExam(_extends({}, exam, {
-        questions: [].concat(_newQuestions)
-      }));
+      }
+      if (paramAcademyDomain && academyDomain.trim().toLocaleLowerCase() != (paramAcademyDomain === null || paramAcademyDomain === void 0 ? void 0 : paramAcademyDomain.trim().toLocaleLowerCase())) {
+        logout();
+      }
+      if (!paramAcademyDomain && academyDomain) {
+        searchParams.append("domain", academyDomain);
+        pushTo(_extends({}, window.location, {
+          search: searchParams.toString()
+        }));
+      }
     }
   };
-  var handleChangeCategory = function handleChangeCategory(article, categoryId) {
-    if (!exam) return;
-    var examQuestions = exam.questions;
-    var questions = examQuestions.filter(function (i) {
-      return i.article === +article;
-    });
-    var otherQuestions = examQuestions.filter(function (i) {
-      return i.article !== +article;
-    });
-    onChangeExam(_extends({}, exam, {
-      questions: [].concat(otherQuestions, questions.map(function (q) {
-        return _extends({}, q, {
-          categoryId: categoryId
-        });
-      }))
-    }));
+  var pushTo = function pushTo(data) {
+    if (history.push) history.push(data);else history(data);
   };
-  var handleDeleteArticle = function handleDeleteArticle(article) {
-    if (!exam) return;
-    var removedQuestions = exam.questions.filter(function (i) {
-      return i.article === +article;
-    }).map(function (i) {
-      return i.questionOrder;
-    });
-    var max = Math.max.apply(Math, removedQuestions);
-    var examQuestions = exam.questions.filter(function (i) {
-      return i.article !== +article;
-    }).map(function (i) {
-      return _extends({}, i, {
-        article: i.article > article ? i.article - 1 : i.article,
-        questionOrder: i.questionOrder > max ? i.questionOrder - removedQuestions.length : i.questionOrder
+  useEffect(function () {
+    initialAcademySearchParam();
+  }, [window.location.pathname, user === null || user === void 0 ? void 0 : user.academyDomain]);
+};
+
+var useList = function useList(fetchData, defaultQuery) {
+  var dispatch = useDispatch();
+  var _useState = useState(defaultQuery),
+    filter = _useState[0],
+    setFilter = _useState[1];
+  var _useState2 = useState(0),
+    totalPages = _useState2[0],
+    setTotalPages = _useState2[1];
+  var _useState3 = useState([]),
+    data = _useState3[0],
+    setData = _useState3[1];
+  var _useState4 = useState(),
+    selectedItem = _useState4[0],
+    setSelectedItem = _useState4[1];
+  var textSearchRef = useRef(null);
+  var isFirstLoadRef = useRef(true);
+  var handleChangeSelectedItem = function handleChangeSelectedItem(item) {
+    setSelectedItem(item);
+  };
+  var getData = function getData(isLoading) {
+    if (isLoading === void 0) {
+      isLoading = false;
+    }
+    try {
+      var _temp2 = function _temp2() {
+        isLoading && dispatch(setLoading(false));
+      };
+      if (isFirstLoadRef.current) isFirstLoadRef.current = false;
+      isLoading && dispatch(setLoading(true));
+      var _temp = _catch(function () {
+        return Promise.resolve(fetchData(filter)).then(function (res) {
+          var _res$data = res.data,
+            _res$data$items = _res$data.items,
+            items = _res$data$items === void 0 ? [] : _res$data$items,
+            _res$data$totalPages = _res$data.totalPages,
+            totalPages = _res$data$totalPages === void 0 ? 0 : _res$data$totalPages;
+          setTotalPages(totalPages);
+          setData(items);
+        });
+      }, function (error) {
+        var _error$response, _error$response$data;
+        setTotalPages(0);
+        setData([]);
+        toast.error((error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.title) || "Get data failed");
       });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleSort = function handleSort(sortColumnName) {
+    var sortColumnDirection = OrderType.ASC;
+    console.log({
+      sortColumnName: typeof sortColumnName,
+      filter: typeof filter.sortColumnName
     });
-    onChangeExam(_extends({}, exam, {
-      questions: [].concat(examQuestions)
+    if (filter.sortColumnName == sortColumnName && filter.sortColumnDirection === OrderType.ASC) sortColumnDirection = OrderType.DESC;
+    setFilter(_extends({}, filter, {
+      sortColumnName: sortColumnName,
+      sortColumnDirection: sortColumnDirection,
+      currentPage: 1
     }));
   };
-  var handleChangeAnswerCount = function handleChangeAnswerCount(article, newAnswerCount, answerCount) {
-    if (!exam) return;
-    if (newAnswerCount === answerCount) return;
-    var examQuestions = exam.questions;
-    var questions = examQuestions.filter(function (i) {
-      return i.article === +article;
-    });
-    var otherQuestions = examQuestions.filter(function (i) {
-      return i.article !== +article;
-    });
-    if (answerCount < newAnswerCount) {
-      onChangeExam(_extends({}, exam, {
-        questions: [].concat(otherQuestions, questions.map(function (q) {
-          return _extends({}, q, {
-            numberOfAnswers: newAnswerCount
-          });
-        }))
-      }));
-    } else {
-      onChangeExam(_extends({}, exam, {
-        questions: [].concat(otherQuestions, questions.map(function (q) {
-          var _q$correctAnswers;
-          return _extends({}, q, {
-            numberOfAnswers: newAnswerCount,
-            correctAnswers: (_q$correctAnswers = q.correctAnswers) === null || _q$correctAnswers === void 0 ? void 0 : _q$correctAnswers.filter(function (i) {
-              return i <= newAnswerCount;
-            })
-          });
-        }))
-      }));
-    }
+  var handleChangeSearchText = function handleChangeSearchText(e) {
+    if (!textSearchRef.current) return;
+    textSearchRef.current.value = e.target.value.trim();
+    debounceSearch();
   };
-  var handleChangeCorrectAnswers = function handleChangeCorrectAnswers(article, index, answer) {
-    if (!exam) return;
-    var examQuestions = exam.questions;
-    var questions = examQuestions.filter(function (i) {
-      return i.article === +article;
-    });
-    var otherQuestions = examQuestions.filter(function (i) {
-      return i.article !== +article;
-    });
-    var selectedQuestion = questions[index];
-    onChangeExam(_extends({}, exam, {
-      questions: [].concat(otherQuestions, questions.slice(0, index), [_extends({}, selectedQuestion, {
-        correctAnswers: [answer]
-      })], questions.slice(index + 1))
+  var handleChangePage = function handleChangePage(_, page) {
+    setFilter(_extends({}, filter, {
+      currentPage: page
     }));
   };
-  var handleChangeScoreAnswer = function handleChangeScoreAnswer(article, index, score) {
-    if (!exam) return;
-    var examQuestions = exam.questions;
-    var questions = examQuestions.filter(function (i) {
-      return i.article === +article;
+  var calcOrderNumber = function calcOrderNumber(index) {
+    var _filter$currentPage, _filter$pageSize;
+    return (((_filter$currentPage = filter.currentPage) != null ? _filter$currentPage : 0) - 1) * ((_filter$pageSize = filter.pageSize) != null ? _filter$pageSize : 0) + index + 1;
+  };
+  var debounceSearch = _.debounce(function () {
+    var _textSearchRef$curren;
+    setFilter(_extends({}, filter, {
+      currentPage: 1,
+      textSearch: (_textSearchRef$curren = textSearchRef.current) === null || _textSearchRef$curren === void 0 ? void 0 : _textSearchRef$curren.value
+    }));
+  }, 500);
+  useEffect(function () {
+    getData(isFirstLoadRef.current);
+  }, [JSON.stringify(filter)]);
+  return {
+    filter: filter,
+    textSearchRef: textSearchRef,
+    totalPages: totalPages,
+    data: data,
+    selectedItem: selectedItem,
+    handleSort: handleSort,
+    handleChangeSearchText: handleChangeSearchText,
+    handleChangePage: handleChangePage,
+    calcOrderNumber: calcOrderNumber,
+    handleChangeSelectedItem: handleChangeSelectedItem,
+    getData: getData
+  };
+};
+
+
+
+var index$1 = {
+  __proto__: null,
+  useLogin: useLogin,
+  useAutoAcademyDomain: useAutoAcademyDomain,
+  useList: useList
+};
+
+var useTextbookList = function useTextbookList(props) {
+  var role = props.role,
+    navigate = props.navigate;
+  var _useList = useList(function (search) {
+      return getTextbookListApi(search, role);
+    }, TextbookDefaultQuery),
+    filter = _useList.filter,
+    textSearchRef = _useList.textSearchRef,
+    totalPages = _useList.totalPages,
+    textbooks = _useList.data,
+    selectedTextbook = _useList.selectedItem,
+    handleSort = _useList.handleSort,
+    handleChangeSearchText = _useList.handleChangeSearchText,
+    handleChangePage = _useList.handleChangePage,
+    calcOrderNumber = _useList.calcOrderNumber,
+    handleChangeSelectedItem = _useList.handleChangeSelectedItem,
+    getData = _useList.getData;
+  var textbookUrl = role === Role.Teacher ? TEXTBOOK_URL$1 : ADMIN_TEXTBOOK_URL;
+  var dispatch = useDispatch();
+  var handleViewTextbook = function handleViewTextbook(id) {
+    navigate(textbookUrl + "/" + id + "?readonly=true", {
+      replace: true
     });
-    var otherQuestions = examQuestions.filter(function (i) {
-      return i.article !== +article;
+  };
+  var handleUpdateTextbook = function handleUpdateTextbook(id) {
+    navigate(textbookUrl + "/" + id, {
+      replace: true
     });
-    var selectedQuestion = questions[index];
-    if (score === selectedQuestion.score) return;
-    onChangeExam(_extends({}, exam, {
-      questions: [].concat(otherQuestions, questions.slice(0, index), [_extends({}, selectedQuestion, {
-        score: score
-      })], questions.slice(index + 1))
-    }));
   };
-  var handleChangeDuration = function handleChangeDuration(value) {
-    if (!exam) return;
-    onChangeExam(_extends({}, exam, {
-      duration: value === null || value === void 0 ? void 0 : value.value
-    }));
+  var handleCreateTextbook = function handleCreateTextbook() {
+    navigate(textbookUrl + "/create", {
+      replace: true
+    });
   };
-  var handleChangeTitle = function handleChangeTitle(e) {
-    if (!exam) return;
-    onChangeExam(_extends({}, exam, {
-      title: e.target.value
-    }));
+  var toggleConfirmDialog = function toggleConfirmDialog() {
+    handleChangeSelectedItem(undefined);
   };
-  var handleAddArticle = function handleAddArticle() {
-    var _$maxBy, _$maxBy2;
-    if (!exam) return;
-    var maxArticle = ((_$maxBy = _.maxBy(exam.questions, "article")) === null || _$maxBy === void 0 ? void 0 : _$maxBy.article) || 0;
-    var maxOrder = ((_$maxBy2 = _.maxBy(exam.questions, "questionOrder")) === null || _$maxBy2 === void 0 ? void 0 : _$maxBy2.questionOrder) || 0;
-    onChangeExam(_extends({}, exam, {
-      questions: [].concat(exam.questions, [{
-        article: maxArticle + 1,
-        correctAnswers: [1],
-        numberOfAnswers: DEFAULT_ANSWER_COUNT,
-        score: DEFAULT_SCORE,
-        questionOrder: maxOrder + 1
-      }])
-    }));
+  var handleSelectDeleteTextbook = function handleSelectDeleteTextbook(textbook) {
+    return [handleChangeSelectedItem(textbook)];
   };
-  var examGroupByArticle = useMemo(function () {
-    if (!exam) return [];
-    var articles = [];
-    var groupedArticle = _.groupBy(exam.questions, "article");
-    for (var key in groupedArticle) {
-      if (Object.prototype.hasOwnProperty.call(groupedArticle, key)) {
-        var _questions$find, _$maxBy3;
-        var questions = groupedArticle[key];
-        articles.push({
-          article: +key,
-          categoryId: (_questions$find = questions.find(function (i) {
-            return !!i.categoryId;
-          })) === null || _questions$find === void 0 ? void 0 : _questions$find.categoryId,
-          answerCount: ((_$maxBy3 = _.maxBy(questions, "numberOfAnswers")) === null || _$maxBy3 === void 0 ? void 0 : _$maxBy3.numberOfAnswers) || DEFAULT_ANSWER_COUNT,
-          questionCount: questions.length,
-          questions: questions
+  var handleDeleteTextbook = function handleDeleteTextbook() {
+    try {
+      var _temp2 = function _temp2() {
+        dispatch(setLoading(false));
+      };
+      if (!(selectedTextbook !== null && selectedTextbook !== void 0 && selectedTextbook.id)) return Promise.resolve();
+      dispatch(setLoading(true));
+      var _temp = _catch(function () {
+        return Promise.resolve(deleteTextbookApi(selectedTextbook.id, role)).then(function () {
+          return Promise.resolve(getData(false)).then(function () {
+            toggleConfirmDialog();
+          });
         });
-      }
+      }, function (error) {
+        var _error$response, _error$response$data;
+        toast.error((error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.title) || "Textbook deleted failed");
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
     }
-    return _.sortBy(articles, "article");
-  }, [JSON.stringify(exam)]);
-  var durationOptions = useMemo(function () {
-    var options = DURATION_OPTIONS.map(function (i) {
-      return {
-        label: i + "\uBD84",
-        value: i
-      };
-    });
-    if (!!exam.duration && exam.duration > DURATION_OPTIONS[DURATION_OPTIONS.length - 1]) return [].concat(options, [{
-      label: exam.duration + "\uBD84",
-      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,
-    durationOptions: durationOptions,
-    examGroupByArticle: examGroupByArticle,
-    handleAddArticle: handleAddArticle,
-    handleChangeScoreAnswer: handleChangeScoreAnswer,
-    handleChangeTitle: handleChangeTitle,
-    handleChangeDuration: handleChangeDuration,
-    handleChangeCorrectAnswers: handleChangeCorrectAnswers,
-    handleChangeAnswerCount: handleChangeAnswerCount,
-    handleChangeQuestionCount: handleChangeQuestionCount,
-    handleChangeCategory: handleChangeCategory,
-    handleDeleteArticle: handleDeleteArticle
+    filter: filter,
+    textSearchRef: textSearchRef,
+    totalPages: totalPages,
+    textbooks: textbooks,
+    selectedTextbook: selectedTextbook,
+    handleSort: handleSort,
+    handleChangeSearchText: handleChangeSearchText,
+    handleChangePage: handleChangePage,
+    calcOrderNumber: calcOrderNumber,
+    handleViewTextbook: handleViewTextbook,
+    handleUpdateTextbook: handleUpdateTextbook,
+    handleCreateTextbook: handleCreateTextbook,
+    toggleConfirmDialog: toggleConfirmDialog,
+    handleDeleteTextbook: handleDeleteTextbook,
+    handleSelectDeleteTextbook: handleSelectDeleteTextbook
   };
 };
 
-var ExamDetailView = function ExamDetailView(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className,
-    exam = _ref.exam,
+var EmptyRow = function EmptyRow() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return React.createElement(TableRow, null, React.createElement(TableCell, {
+    colSpan: 12,
+    className: "text-center text-muted"
+  }, t("no_data")));
+};
+
+var LayoutList = function LayoutList(_ref) {
+  var children = _ref.children,
+    title = _ref.title;
+  return React.createElement(Box, {
+    className: 'bg-white p-3'
+  }, React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    mb: 2
+  }, React.createElement(Typography, {
+    variant: 'h4'
+  }, title)), React.createElement(Box, null, children));
+};
+
+var SortIcon = function SortIcon(_ref) {
+  var isAscending = _ref.isAscending,
+    onClick = _ref.onClick;
+  return React.createElement("div", {
+    className: "d-flex flex-column " + styles["sort-icons"],
+    onClick: onClick
+  }, React.createElement(FaSortUp, {
+    className: isAscending === true ? styles["active"] : ""
+  }), React.createElement(FaSortDown, {
+    className: isAscending === false ? styles["active"] : ""
+  }));
+};
+
+var TableHeader = function TableHeader(_ref) {
+  var headerTemplates = _ref.headerTemplates,
+    filter = _ref.filter,
+    onSort = _ref.onSort;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return React.createElement(TableHead, null, React.createElement(TableRow, null, headerTemplates.map(function (i, index$1) {
+    return React.createElement(TableCell, {
+      key: index$1,
+      className: "" + (!!i.sortKey && "pointer"),
+      onClick: !!i.sortKey ? function () {
+        return onSort === null || onSort === void 0 ? void 0 : onSort(i.sortKey);
+      } : undefined
+    }, React.createElement("div", {
+      className: "d-flex justify-content-between align-items-center text-nowrap"
+    }, t(i.title), !!i.sortKey && React.createElement(SortIcon, {
+      isAscending: filter.sortColumnName !== i.sortKey ? undefined : filter.sortColumnDirection === OrderType.ASC
+    })));
+  })));
+};
+
+var SearchInput = function SearchInput(_ref) {
+  var textSearchRef = _ref.textSearchRef,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Search for..." : _ref$placeholder,
+    onChange = _ref.onChange,
+    _ref$fit = _ref.fit,
+    fit = _ref$fit === void 0 ? true : _ref$fit;
+  return React.createElement(Paper, {
+    component: "div",
+    className: "bg-light w-100 " + (fit && "h-100"),
+    sx: {
+      p: "2px 4px",
+      display: "flex",
+      alignItems: "center",
+      width: 400,
+      transition: "border 0.2s ease",
+      outline: "1px solid transparent",
+      ":focus-within": {
+        outlineColor: function outlineColor(theme) {
+          return theme.palette.primary.main;
+        }
+      }
+    }
+  }, React.createElement(Box, {
+    sx: {
+      p: "10px"
+    },
+    "aria-label": "search"
+  }, React.createElement(IoSearch, {
+    size: 24,
+    className: "pb-1"
+  })), React.createElement(InputBase, {
+    id: "searchText",
+    className: "" + (fit && "h-100"),
+    sx: {
+      ml: 1,
+      flex: 1,
+      lineHeight: 1
+    },
+    placeholder: placeholder,
+    ref: textSearchRef,
+    onChange: onChange
+  }));
+};
+
+var TextbookList = function TextbookList(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useTextbookList = useTextbookList(props),
+    filter = _useTextbookList.filter,
+    textbooks = _useTextbookList.textbooks,
+    totalPages = _useTextbookList.totalPages,
+    textSearchRef = _useTextbookList.textSearchRef,
+    selectedTextbook = _useTextbookList.selectedTextbook,
+    handleChangeSearchText = _useTextbookList.handleChangeSearchText,
+    handleSort = _useTextbookList.handleSort,
+    handleChangePage = _useTextbookList.handleChangePage,
+    calcOrderNumber = _useTextbookList.calcOrderNumber,
+    handleViewTextbook = _useTextbookList.handleViewTextbook,
+    handleUpdateTextbook = _useTextbookList.handleUpdateTextbook,
+    handleCreateTextbook = _useTextbookList.handleCreateTextbook,
+    toggleConfirmDialog = _useTextbookList.toggleConfirmDialog,
+    handleDeleteTextbook = _useTextbookList.handleDeleteTextbook,
+    handleSelectDeleteTextbook = _useTextbookList.handleSelectDeleteTextbook;
+  return React.createElement(LayoutList, {
+    title: t(TEXTBOOK_PAGE_TITLE)
+  }, React.createElement(Grid, {
+    container: true
+  }, React.createElement(Grid, {
+    item: true,
+    xs: 6
+  }, React.createElement(SearchInput, {
+    textSearchRef: textSearchRef,
+    onChange: handleChangeSearchText,
+    placeholder: t(TEXT_BOOK_SEARCH_PLACEHOLDER)
+  })), React.createElement(Grid, {
+    item: true,
+    xs: 6
+  }, React.createElement(Stack, {
+    alignItems: "end"
+  }, React.createElement(Button, {
+    startIcon: React.createElement(FaPlus, {
+      size: 12
+    }),
+    variant: "contained",
+    color: "primary",
+    onClick: handleCreateTextbook
+  }, t("create_textbook")))), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    className: "mt-3"
+  }, React.createElement(Table, null, React.createElement(TableHeader, {
+    headerTemplates: TEXTBOOK_HEADERS,
+    filter: filter,
+    onSort: handleSort
+  }), React.createElement(TableBody, null, textbooks.map(function (i, index) {
+    return React.createElement(TableRow, {
+      key: i.id
+    }, React.createElement(TableCell, null, calcOrderNumber(index)), React.createElement(TableCell, null, i.name), React.createElement(TableCell, null, i.subject.name), React.createElement(TableCell, null, utcToLocalTime(i.createdAt, t("date_format"))), React.createElement(TableCell, null, i.totalChapters), React.createElement(TableCell, null, React.createElement(Stack, {
+      direction: "row",
+      spacing: 1,
+      alignItems: "center"
+    }, !i.isCreatedByAdmin && React.createElement(IconButton, {
+      color: "default",
+      className: "bg-warning text-white",
+      onClick: function onClick() {
+        return handleUpdateTextbook(i.id);
+      }
+    }, React.createElement(FaPencil, {
+      size: 12
+    })), React.createElement(IconButton, {
+      color: "default",
+      className: "bg-primary text-white",
+      onClick: function onClick() {
+        return handleViewTextbook(i.id);
+      }
+    }, React.createElement(FaEye, {
+      size: 12
+    })), !i.isCreatedByAdmin && React.createElement(IconButton, {
+      color: "default",
+      className: "bg-danger text-white",
+      onClick: function onClick() {
+        return handleSelectDeleteTextbook(i);
+      }
+    }, React.createElement(FaTrash, {
+      size: 12
+    })))));
+  }), !textbooks.length && React.createElement(EmptyRow, null))), React.createElement("div", {
+    className: "d-flex justify-content-end mt-3"
+  }, !!totalPages && React.createElement(Pagination, {
+    count: totalPages,
+    page: filter.currentPage,
+    onChange: handleChangePage
+  })))), React.createElement(ConfirmDialog, {
+    open: !!(selectedTextbook !== null && selectedTextbook !== void 0 && selectedTextbook.id),
+    toggle: toggleConfirmDialog,
+    text: "" + t("are_you_sure_you_want_to_delete_the_textbook"),
+    onConfirm: handleDeleteTextbook,
+    confirmText: selectedTextbook === null || selectedTextbook === void 0 ? void 0 : selectedTextbook.name,
+    isDelete: true
+  }));
+};
+
+
+
+var index$2 = {
+  __proto__: null,
+  TextbookList: TextbookList,
+  TextbookDetail: TextbookViewDetail
+};
+
+var _excluded$5 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var CustomCreatable = function CustomCreatable(_ref) {
+  var options = _ref.options,
     isDisabled = _ref.isDisabled,
-    isEdit = _ref.isEdit,
-    onChangeExam = _ref.onChangeExam;
-  var _useSubjectSelect = useSubjectSelect(),
-    subjectOptions = _useSubjectSelect.subjectOptions,
-    selectedSubject = _useSubjectSelect.selectedSubject,
-    handleChangeSubject = _useSubjectSelect.handleChangeSubject;
-  var _useExamDetailView = useExamDetailView({
-      exam: exam,
-      onChangeExam: onChangeExam,
-      selectedSubject: selectedSubject
-    }),
-    t = _useExamDetailView.t,
-    durationOptions = _useExamDetailView.durationOptions,
-    examGroupByArticle = _useExamDetailView.examGroupByArticle,
-    handleAddArticle = _useExamDetailView.handleAddArticle,
-    handleChangeScoreAnswer = _useExamDetailView.handleChangeScoreAnswer,
-    handleChangeTitle = _useExamDetailView.handleChangeTitle,
-    handleChangeDuration = _useExamDetailView.handleChangeDuration,
-    handleChangeCorrectAnswers = _useExamDetailView.handleChangeCorrectAnswers,
-    handleChangeAnswerCount = _useExamDetailView.handleChangeAnswerCount,
-    handleChangeQuestionCount = _useExamDetailView.handleChangeQuestionCount,
-    handleChangeCategory = _useExamDetailView.handleChangeCategory,
-    handleDeleteArticle = _useExamDetailView.handleDeleteArticle;
-  return React.createElement(Grid, {
-    container: true,
-    spacing: 3,
-    className: className + " " + styleGlobal["custom-row"]
-  }, React.createElement(Grid, {
-    item: true,
-    xs: 5,
-    className: 'mb-2'
-  }, React.createElement("label", {
-    className: styleGlobal["form-label"] + " " + styles$1["question-label"],
-    htmlFor: "title"
-  }, t("title")), React.createElement("input", {
-    disabled: isDisabled,
-    className: "" + styleGlobal["form-control"],
-    value: exam.title,
-    id: "title",
-    placeholder: t("enter_title"),
-    onChange: handleChangeTitle
-  })), React.createElement(Grid, {
-    item: true,
-    xs: 3,
-    className: 'mb-2'
-  }, React.createElement("label", {
-    className: styleGlobal["form-label"] + " " + styles$1["question-label"],
-    htmlFor: "duration"
-  }, t("duration")), React.createElement(CustomSelect, {
-    inputId: "duration",
-    value: exam.duration,
-    options: durationOptions,
-    onChange: handleChangeDuration,
-    isDisabled: isDisabled
-  })), React.createElement(Grid, {
-    item: true,
-    xs: 3,
-    className: 'mb-2'
-  }, React.createElement("label", {
-    className: styleGlobal["form-label"] + " " + styles$1["question-label"],
-    htmlFor: "duration"
-  }, t("subject"), " ", selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.name), React.createElement(CustomSelect, {
-    inputId: "subject",
-    value: selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id,
-    options: subjectOptions,
-    onChange: handleChangeSubject,
-    isDisabled: isDisabled || isEdit
-  })), examGroupByArticle.map(function (i, index) {
-    return React.createElement(Grid, {
-      item: true,
-      key: i.article,
-      xs: 12,
-      className: index === examGroupByArticle.length - 1 ? "mb-2" : ''
-    }, React.createElement(ArticleGroupView, Object.assign({}, i, {
-      isActive: index === examGroupByArticle.length - 1,
-      onChangeQuestionCount: handleChangeQuestionCount,
-      onChangeCategory: handleChangeCategory,
-      onChangeAnswerCount: handleChangeAnswerCount,
-      onChangeCorrectAnswers: handleChangeCorrectAnswers,
-      onChangeScoreAnswer: handleChangeScoreAnswer,
-      onDelete: handleDeleteArticle,
-      isDisabled: isDisabled,
-      selectedSubject: selectedSubject,
-      isDeletable: examGroupByArticle.length > 1
-    })));
-  }), React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, React.createElement("button", {
-    disabled: isDisabled,
-    className: styleGlobal["btn-outline-primary"] + " w-100 d-flex justify-content-center align-items-center " + styles$1["question-btn"] + " mt-3",
-    onClick: handleAddArticle
-  }, React.createElement(FaPlusCircle, {
-    className: "me-2"
-  }), "\uBB38\uD56D \uCD94\uAC00\uD558\uAE30")));
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  var initialValues = Array.isArray(value) ? options.filter(function (i) {
+    return value.includes(i.value);
+  }) : isMulti ? options.filter(function (i) {
+    return i.value == value;
+  }) : options.find(function (i) {
+    return i.value == value;
+  });
+  return React.createElement(CreatableSelect, Object.assign({
+    isClearable: true,
+    isDisabled: isDisabled,
+    options: options,
+    value: initialValues,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti
+  }, rest));
+};
+
+var _excluded$6 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
+  var isDefault = _ref.isDefault,
+    options = _ref.options,
+    isDisabled = _ref.isDisabled,
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var initialValues = Array.isArray(value) ? options.filter(function (i) {
+    return value.includes(i.value);
+  }) : isMulti ? options.filter(function (i) {
+    return i.value == value;
+  }) : options.find(function (i) {
+    return i.value == value;
+  });
+  return React.createElement(Select, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    value: !isDefault ? initialValues : undefined,
+    defaultValue: isDefault ? initialValues : undefined,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti
+  }, rest));
 };
 
 var EXAM_SESSION_URL = BASE_URL + "/api/examSession";
@@ -7721,16 +8237,16 @@ var ORDER_NUMBERS = {
   10: "the_tenth"
 };
 var TabList = [{
-  label: "종합 분석",
+  label: "comprehensive_analysis",
   value: 0
 }, {
-  label: "풀이 순서",
+  label: "solution_order",
   value: 1
 }, {
-  label: "풀이 비교",
+  label: "compare_solution",
   value: 2
 }, {
-  label: "문제 분석",
+  label: "problem_analysis",
   value: 3
 }];
 var Roles$2;
@@ -8592,7 +9108,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
               var questions = ((_timelyOrderQuestion$ = timelyOrderQuestion[dataChartIndex]) === null || _timelyOrderQuestion$ === void 0 ? void 0 : _timelyOrderQuestion$.questions) || null;
               var questionLength = (_questions$length = questions === null || questions === void 0 ? void 0 : questions.length) != null ? _questions$length : 0;
               return val != null ? t("problem_number_question", {
-                number: questions !== null ? ((_questions = questions[questionLength - val]) === null || _questions === void 0 ? void 0 : _questions.questionOrder) + 1 : val
+                number: questions !== null ? (((_questions = questions[questionLength - val]) === null || _questions === void 0 ? void 0 : _questions.questionOrder) || 0) + 1 : val
               }) : t("no_data");
             }
             return null;
@@ -8659,7 +9175,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
             var questions = ((_timelyOrderQuestion$2 = timelyOrderQuestion[dataChartIndex]) === null || _timelyOrderQuestion$2 === void 0 ? void 0 : _timelyOrderQuestion$2.questions) || null;
             var questionLength = (_questions$length2 = questions === null || questions === void 0 ? void 0 : questions.length) != null ? _questions$length2 : 0;
             return val != null ? t("problem_number_question", {
-              number: questions !== null ? ((_questions2 = questions[questionLength - val]) === null || _questions2 === void 0 ? void 0 : _questions2.questionOrder) + 1 : val
+              number: questions !== null ? (((_questions2 = questions[questionLength - val]) === null || _questions2 === void 0 ? void 0 : _questions2.questionOrder) || 0) + 1 : val
             }) : t("no_data");
           },
           style: {
@@ -8687,15 +9203,23 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
         topAnswerOrder: i.topAnswerOrder == null ? 0 : i.topAnswerOrder
       });
     });
-    var mySeriesData = [null].concat(questionsData.sort(function (a, b) {
-      return b.answerOrder === 0 ? -1 : a.answerOrder > b.answerOrder ? 1 : b.answerOrder > a.answerOrder ? -1 : 0;
-    }).map(function (item) {
-      return item.answerOrder === 0 ? null : data.questions.length - item.questionOrder;
+    var mySeriesData = [null].concat(_.sortBy(questionsData.filter(function (i) {
+      return i.answerOrder !== 0;
+    }), ["answerOrder", "questionOrder"]).map(function (item) {
+      return data.questions.length - item.questionOrder;
+    }), questionsData.filter(function (i) {
+      return i.answerOrder === 0;
+    }).map(function () {
+      return null;
     }), [null]);
-    var topSeriesData = [null].concat(questionsData.sort(function (a, b) {
-      return b.topAnswerOrder === 0 ? -1 : a.topAnswerOrder > b.topAnswerOrder ? 1 : b.topAnswerOrder > a.topAnswerOrder ? -1 : 0;
-    }).map(function (item) {
-      return item.topAnswerOrder === 0 ? null : data.questions.length - item.questionOrder;
+    var topSeriesData = [null].concat(_.sortBy(questionsData.filter(function (i) {
+      return i.topAnswerOrder !== 0;
+    }), ["topAnswerOrder", "questionOrder"]).map(function (item) {
+      return data.questions.length - item.questionOrder;
+    }), questionsData.filter(function (i) {
+      return i.topAnswerOrder === 0;
+    }).map(function () {
+      return null;
     }), [null]);
     return [{
       name: t("my_problem_solving_order"),
@@ -9861,7 +10385,7 @@ Object.defineProperty(exports,"__esModule",{value:!0});var _typeof="function"==t
 
 var ReactApexChart = unwrapExports(reactApexcharts_min);
 
-var styles$2 = {"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","compareGrass":"_1_fJu","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 = {"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","compareGrass":"_1_fJu","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 iconStarQuestion = function iconStarQuestion(_ref) {
   var _ref$width = _ref.width,
@@ -10152,7 +10676,7 @@ function CreateNewQuestionDialog(_ref) {
       padding: "24px 24px 40px 24px"
     }, React.createElement(Stack, null, React.createElement("label", {
       htmlFor: "questions",
-      className: styleGlobal['form-label'] + "  " + styles$2['form-label-dialog']
+      className: styles['form-label'] + "  " + styles$4['form-label-dialog']
     }, "\uC9C8\uBB38\uD560 \uBB38\uC81C"), React.createElement(Field, {
       as: "select",
       id: "questions",
@@ -10160,7 +10684,7 @@ function CreateNewQuestionDialog(_ref) {
       style: {
         width: "100%"
       },
-      className: "" + styleGlobal['form-select']
+      className: "" + styles['form-select']
     }, questions === null || questions === void 0 ? void 0 : questions.map(function (question) {
       return React.createElement("option", {
         value: question === null || question === void 0 ? void 0 : question.id
@@ -10169,7 +10693,7 @@ function CreateNewQuestionDialog(_ref) {
       }));
     }))), React.createElement(Stack, null, React.createElement("label", {
       htmlFor: "content-question",
-      className: styleGlobal['form-label'] + "  " + styles$2['form-label-dialog']
+      className: styles['form-label'] + "  " + styles$4['form-label-dialog']
     }, "\uC9C8\uBB38 \uB0B4\uC6A9"), React.createElement(Box, {
       position: 'relative',
       display: 'flex',
@@ -10182,7 +10706,7 @@ function CreateNewQuestionDialog(_ref) {
       },
       name: "content",
       placeholder: "\uBB38\uC81C\uAC00 \uC5B4\uB824\uC6CC\uC694",
-      className: styleGlobal['form-control']
+      className: styles['form-control']
     }), (errors === null || errors === void 0 ? void 0 : errors.content) && React.createElement(Box, {
       position: 'absolute',
       right: 0,
@@ -10205,14 +10729,14 @@ function CreateNewQuestionDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React.createElement(Button$1, {
-      className: styles$2['btn-cancel'],
+      className: styles$4['btn-cancel'],
       onClick: toggleCreateQuestion
     }, React.createElement(Typography$1, {
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button$1, {
-      className: styles$2['btn-register'],
+      className: styles$4['btn-register'],
       type: "submit"
     }, React.createElement(Typography$1, {
       fontWeight: 700,
@@ -10244,7 +10768,7 @@ function MyAnswer(_ref) {
     toggleCreateQuestion();
   };
   return React.createElement("div", {
-    className: styles$2["myanswer"]
+    className: styles$4["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     return React.createElement("div", {
       key: item.category.id
@@ -10252,9 +10776,9 @@ function MyAnswer(_ref) {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
-      className: styles$2["myAnswerItem"] + " " + styleGlobal["noGutters"]
+      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
     }, React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         gap: "4px"
@@ -10266,7 +10790,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uBB38\uC81C \uBC88\uD638")), React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         gap: "4px"
@@ -10278,7 +10802,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uC815\uB2F5")), React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         gap: "4px"
@@ -10290,7 +10814,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uD480\uC774 \uC2DC\uAC04")), React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         alignItems: "center",
@@ -10303,7 +10827,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uC0C1\uC704\uAD8C \uBE44\uAD50")), React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         alignItems: "center",
@@ -10316,7 +10840,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uC804\uCCB4 \uC815\uB2F5\uB960"))), React.createElement("div", {
-      className: styles$2["titleMyAnswer2"]
+      className: styles$4["titleMyAnswer2"]
     }, React.createElement(Typography, {
       sx: {
         color: "#97A1AF",
@@ -10329,7 +10853,7 @@ function MyAnswer(_ref) {
         fontWeight: 700
       }
     }, item.category.name)), React.createElement("div", {
-      className: styles$2["contentMyAnswer"]
+      className: styles$4["contentMyAnswer"]
     }, item.questions.map(function (question, index) {
       return React.createElement("div", {
         style: isOpenTime[question.id] ? {
@@ -10338,9 +10862,9 @@ function MyAnswer(_ref) {
         } : {},
         key: question.id
       }, React.createElement("div", {
-        className: styles$2["myAnswerItem"] + " " + styleGlobal["noGutters"]
+        className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
       }, React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center",
@@ -10348,22 +10872,22 @@ function MyAnswer(_ref) {
           padding: "4px 8px"
         }
       }, question.isStar ? React.createElement(iconStarQuestion, null) : React.createElement(iconNoStarQuestion, null), React.createElement("span", {
-        className: styles$2["questionOrder"]
+        className: styles$4["questionOrder"]
       }, question.questionOrder + 1, "\uBC88")), React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center",
           gap: "4px"
         }
       }, question.isCorrect && question.selectedAnswers !== "" && React.createElement(Fragment$1, null, React.createElement(iconCorrectAnswer, null), React.createElement("span", {
-        className: styles$2["answerCorrect"]
+        className: styles$4["answerCorrect"]
       }, "\uC815\uB2F5")), !question.isCorrect && question.selectedAnswers !== "" && React.createElement(Fragment$1, null, React.createElement(iconCorrectAnswer$1, null), React.createElement("span", {
-        className: styles$2["answerIncorrect"]
+        className: styles$4["answerIncorrect"]
       }, "\uC624\uB2F5")), question.selectedAnswers === "" && React.createElement(Fragment$1, null, React.createElement(iconNoGrass, null), React.createElement("span", {
-        className: styles$2["answerNograss"]
+        className: styles$4["answerNograss"]
       }, "\uD480\uC774 \uC5C6\uC74C"))), React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center"
@@ -10372,14 +10896,14 @@ function MyAnswer(_ref) {
         style: {
           margin: 0
         },
-        className: styles$2["answer-response"] + " " + styles$2["answer-response-" + question.answerResponseSignal]
+        className: styles$4["answer-response"] + " " + styles$4["answer-response-" + question.answerResponseSignal]
       }, formatTimeSecond(Math.round(question.duration), t)) : React.createElement("p", {
         style: {
           margin: 0
         },
-        className: styles$2["answerNoTime"]
+        className: styles$4["answerNoTime"]
       }, "\uC2DC\uAC04 \uC5C6\uC74C")), React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center"
@@ -10388,15 +10912,15 @@ function MyAnswer(_ref) {
         style: {
           margin: 0
         },
-        className: styles$2["answer-response"] + " " + styles$2["answer-response-" + question.answerResponseSignal]
+        className: styles$4["answer-response"] + " " + styles$4["answer-response-" + question.answerResponseSignal]
       }, formatTimeSecond(Math.round(question.topDuration - question.duration), t)) : React.createElement("p", {
         style: {
           margin: 0,
           textAlign: "center"
         },
-        className: styles$2["answerNoTime"]
+        className: styles$4["answerNoTime"]
       }, "-")), React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center"
@@ -10405,14 +10929,14 @@ function MyAnswer(_ref) {
         style: {
           margin: 0
         },
-        className: styles$2["answer-response"] + " " + styles$2["answer-response-" + question.answerResponseSignal]
-      }, question.overallCorrectRate + "%") : React.createElement("p", {
+        className: styles$4["answer-response"] + " " + styles$4["answer-response-" + question.answerResponseSignal]
+      }, question.overallCorrectRate.toFixed(2) + "%") : React.createElement("p", {
         style: {
           margin: 0
         },
-        className: styles$2["answerNoTime"]
+        className: styles$4["answerNoTime"]
       }, "\uC2DC\uAC04 \uC5C6\uC74C")), isStudent && React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center",
@@ -10481,11 +11005,11 @@ var iconBtnNextChart = function iconBtnNextChart(_ref) {
 function CompareGrass(_ref) {
   var effectSize = _ref.effectSize;
   return React.createElement("div", {
-    className: styles$2["compareGrass"]
+    className: styles$4["compareGrass"]
   }, React.createElement("div", {
-    className: styles$2["tableCompareGrass"]
+    className: styles$4["tableCompareGrass"]
   }, React.createElement("div", {
-    className: styles$2["table-responsive"]
+    className: styles$4["table-responsive"]
   }, React.createElement(Table, {
     style: {
       width: "100%"
@@ -10495,7 +11019,7 @@ function CompareGrass(_ref) {
       borderBottom: "1px solid #E4E7EC"
     }
   }, React.createElement("tr", null, React.createElement("th", {
-    className: styles$2["thcolumn1"]
+    className: styles$4["thcolumn1"]
   }, "\uBB38\uC81C \uBC88\uD638"), React.createElement("th", {
     style: {
       textAlign: "center"
@@ -10519,14 +11043,14 @@ function CompareGrass(_ref) {
         borderBottom: "1px solid #e4e7ec"
       } : {}
     }, React.createElement("td", {
-      className: styles$2["tdcolumn1"]
+      className: styles$4["tdcolumn1"]
     }, "\uBB38\uC81C ", item.questionOrder + 1), React.createElement("td", {
       style: {
         textAlign: "center",
         color: "#202B37"
       }
     }, item.correctAnswers, "\uBC88"), React.createElement("td", {
-      className: styles$2["tdcolumn3"],
+      className: styles$4["tdcolumn3"],
       style: {
         color: item.isCorrect ? "#1EE288" : "#F34B4B"
       }
@@ -10536,7 +11060,7 @@ function CompareGrass(_ref) {
         color: "#414E62"
       }
     }, item.mostSelectedAnswers ? item.mostSelectedAnswers + "\uBC88" : ""), React.createElement("td", null, React.createElement("div", {
-      className: styles$2["classification"]
+      className: styles$4["classification"]
     }, item.problemCategories.map(function (problem, index) {
       return React.createElement("div", {
         key: index
@@ -10663,9 +11187,9 @@ function TrickyProblem(_ref) {
     return i.isStar && i.isCorrect;
   });
   return React.createElement("div", {
-    className: styles$2["wrapperProblem"]
+    className: styles$4["wrapperProblem"]
   }, React.createElement("div", {
-    className: !openProblem.problem1 ? styles$2["titleProblemClose"] : styles$2["titleProblem"],
+    className: !openProblem.problem1 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem1: !openProblem.problem1
@@ -10678,27 +11202,27 @@ function TrickyProblem(_ref) {
       fontWeight: 700
     }
   }, "\uAE4C\uB2E4\uB85C\uC6E0\uB358 \uBB38\uC81C"), openProblem.problem1 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem1 && React.createElement(Fragment$1, null, React.createElement("div", {
-    className: styles$2["titleTrickyProblem"]
+    className: styles$4["titleTrickyProblem"]
   }, React.createElement(iconX, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uD2C0\uB9B0 \uBB38\uC81C")), React.createElement("div", {
-    className: styles$2["wrongQuestions"]
+    className: styles$4["wrongQuestions"]
   }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
     return React.createElement("span", {
       key: question.id,
-      className: styles$2["question"]
+      className: styles$4["question"]
     }, question.questionOrder + 1, "\uBC88");
   }), !data.questions.length && React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$4["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C")), React.createElement("div", {
-    className: styles$2["titleTrickyProblem"]
+    className: styles$4["titleTrickyProblem"]
   }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uB9DE\uCD98 \uBB38\uC81C")), React.createElement("div", {
-    className: styles$2["assignedQuestions"]
+    className: styles$4["assignedQuestions"]
   }, !!correctQuestions.length && correctQuestions.map(function (question) {
     return React.createElement("div", {
       key: question.id,
-      className: styles$2["question"]
+      className: styles$4["question"]
     }, question.questionOrder + 1, "\uBC88");
   }), !data.questions.length && React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$4["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
 }
 
@@ -10709,9 +11233,9 @@ function ProtractedProblem(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return React.createElement("div", {
-    className: styles$2["wrapperProblem"]
+    className: styles$4["wrapperProblem"]
   }, React.createElement("div", {
-    className: !openProblem.problem2 ? styles$2["titleProblemClose"] : styles$2["titleProblem"],
+    className: !openProblem.problem2 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem2: !openProblem.problem2
@@ -10724,30 +11248,30 @@ function ProtractedProblem(_ref) {
       fontWeight: 700
     }
   }, "\uC2DC\uAC04\uC774 \uC624\uB798 \uAC78\uB9B0 \uBB38\uC81C"), openProblem.problem2 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem2 && React.createElement(Fragment$1, null, React.createElement("div", {
-    className: styles$2["wrapperContent"]
+    className: styles$4["wrapperContent"]
   }, data.length ? data.map(function (item) {
     return React.createElement("div", {
-      className: styles$2["content"],
+      className: styles$4["content"],
       key: item.id
     }, React.createElement("div", {
-      className: styles$2["contentColumn1"]
+      className: styles$4["contentColumn1"]
     }, React.createElement("div", null, React.createElement("span", {
-      className: styles$2["span1"]
+      className: styles$4["span1"]
     }, "\uBB38\uC81C"), React.createElement("span", {
-      className: styles$2["span2"]
+      className: styles$4["span2"]
     }, item.questionOrder + 1, "\uBC88"))), React.createElement("div", {
-      className: styles$2["contentColumn2"]
+      className: styles$4["contentColumn2"]
     }, React.createElement("div", null, React.createElement("span", {
-      className: styles$2["span1"]
+      className: styles$4["span1"]
     }, "\uB098\uC758 \uC2DC\uAC04"), React.createElement("span", {
-      className: styles$2["span2"]
+      className: styles$4["span2"]
     }, "\uC0C1\uC704\uAD8C \uC2DC\uAC04")), React.createElement("div", null, React.createElement("span", {
-      className: styles$2["duration"]
+      className: styles$4["duration"]
     }, formatTimeSecond(item.duration, t)), React.createElement("span", {
-      className: styles$2["topDuration"]
+      className: styles$4["topDuration"]
     }, formatTimeSecond(item.topDuration, t)))));
   }) : React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$4["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
 }
 
@@ -10761,9 +11285,9 @@ function Vulnerable(_ref) {
     return q2.overallCorrectRate === q1.overallCorrectRate ? q1.questionOrder - q2.questionOrder : q2.overallCorrectRate - q1.overallCorrectRate;
   });
   return React.createElement("div", {
-    className: styles$2["wrapperProblem"]
+    className: styles$4["wrapperProblem"]
   }, React.createElement("div", {
-    className: !openProblem.problem3 ? styles$2["titleProblemClose"] : styles$2["titleProblem"],
+    className: !openProblem.problem3 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem3: !openProblem.problem3
@@ -10776,30 +11300,30 @@ function Vulnerable(_ref) {
       fontWeight: 700
     }
   }, "\uB0B4\uAC00 \uCDE8\uC57D\uD55C \uBB38\uC81C"), openProblem.problem3 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem3 && React.createElement(Fragment$1, null, React.createElement("div", {
-    className: styles$2["wrapperContent"]
+    className: styles$4["wrapperContent"]
   }, incorrectQuestions.length ? React.createElement(Fragment$1, null, incorrectQuestions.map(function (question) {
     return React.createElement("div", {
-      className: styles$2["content"],
+      className: styles$4["content"],
       key: question.id
     }, React.createElement("div", {
-      className: styles$2["contentColumn1"]
+      className: styles$4["contentColumn1"]
     }, React.createElement("div", null, React.createElement("span", {
-      className: styles$2["span1"]
+      className: styles$4["span1"]
     }, "\uBB38\uC81C"), React.createElement("span", {
-      className: styles$2["span2"]
+      className: styles$4["span2"]
     }, question.questionOrder + 1, "\uBC88"))), React.createElement("div", {
-      className: styles$2["contentColumn2"]
+      className: styles$4["contentColumn2"]
     }, React.createElement("div", null, React.createElement("span", {
-      className: styles$2["span1"]
+      className: styles$4["span1"]
     }, "\uC804\uCCB4 \uC815\uB2F5\uB960"), React.createElement("span", {
-      className: styles$2["span2"]
+      className: styles$4["span2"]
     }, "\uB098\uC758 \uC624\uB2F5")), React.createElement("div", null, React.createElement("span", {
-      className: styles$2["overallCorrectRate"]
+      className: styles$4["overallCorrectRate"]
     }, question.overallCorrectRate.toFixed(2), "%"), React.createElement("span", {
-      className: styles$2["answer"]
+      className: styles$4["answer"]
     }, question.selectedAnswers, "\uBC88 (\uC815\uB2F5", " ", question.correctAnswers, "\uBC88)"))));
   })) : React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$4["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
 }
 
@@ -10808,9 +11332,9 @@ function GradesByTerritory(_ref) {
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen;
   return React.createElement("div", {
-    className: styles$2["wrapperProblem"]
+    className: styles$4["wrapperProblem"]
   }, React.createElement("div", {
-    className: !openProblem.problem4 ? styles$2["titleProblemClose"] : styles$2["titleProblem"],
+    className: !openProblem.problem4 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem4: !openProblem.problem4
@@ -10823,27 +11347,27 @@ function GradesByTerritory(_ref) {
       fontWeight: 700
     }
   }, "\uC601\uC5ED\uBCC4 \uC131\uC801"), openProblem.problem4 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem4 && React.createElement("div", {
-    className: styles$2["wrappContentProblem"]
+    className: styles$4["wrappContentProblem"]
   }, data.length && data.map(function (item) {
     return React.createElement("div", {
-      className: styles$2["contentProblem"],
+      className: styles$4["contentProblem"],
       key: item.id
     }, React.createElement("div", {
-      className: styles$2["labelProblem"]
+      className: styles$4["labelProblem"]
     }, React.createElement("span", {
-      className: styles$2["name"]
+      className: styles$4["name"]
     }, item.name), React.createElement("div", {
-      className: styles$2["percent"]
+      className: styles$4["percent"]
     }, React.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, "\uBB38\uC81C"))), React.createElement("div", {
-      className: styles$2["slider"]
+      className: styles$4["slider"]
     }, React.createElement("span", {
-      className: styles$2["track"],
+      className: styles$4["track"],
       style: {
         left: item.percentageAmongStudents + "%"
       }
     })));
   }), openProblem.problem4 && !data.length && React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$4["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
 }
 
@@ -10936,7 +11460,7 @@ function CreateNewQuestionDialog$1(_ref) {
     var errors = _ref2.errors;
     return React.createElement(Form, null, React.createElement("label", {
       htmlFor: "content-question",
-      className: styleGlobal['form-label'] + "  " + styles$2['form-label-dialog']
+      className: styles['form-label'] + "  " + styles$4['form-label-dialog']
     }, "\uC9C8\uBB38 \uB0B4\uC6A9"), React.createElement(Box, {
       position: 'relative',
       display: 'flex',
@@ -10949,7 +11473,7 @@ function CreateNewQuestionDialog$1(_ref) {
       },
       name: "content",
       placeholder: "\uBB38\uC81C\uAC00 \uC5B4\uB824\uC6CC\uC694",
-      className: styleGlobal['form-control']
+      className: styles['form-control']
     }), (errors === null || errors === void 0 ? void 0 : errors.content) && React.createElement(Box, {
       position: 'absolute',
       right: 0,
@@ -10971,14 +11495,14 @@ function CreateNewQuestionDialog$1(_ref) {
         padding: '12px'
       }
     }, React.createElement(Button$1, {
-      className: styles$2['btn-cancel'],
+      className: styles$4['btn-cancel'],
       onClick: toggleCreateQuestion
     }, React.createElement(Typography$1, {
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button$1, {
-      className: styles$2['btn-register'],
+      className: styles$4['btn-register'],
       type: "submit"
     }, React.createElement(Typography$1, {
       fontWeight: 700,
@@ -10989,12 +11513,12 @@ function CreateNewQuestionDialog$1(_ref) {
   })));
 }
 
-var _excluded$6 = ["children", "value", "index"];
+var _excluded$7 = ["children", "value", "index"];
 var CustomTabPanel = function CustomTabPanel(props) {
   var children = props.children,
     value = props.value,
     index = props.index,
-    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
   return React.createElement("div", Object.assign({
     role: "tabpanel",
     hidden: value !== index,
@@ -11067,6 +11591,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
   var _useTab = useTab(),
     selected = _useTab.selected,
     handleChangeTab = _useTab.handleChangeTab;
+  var isTabletUp = useMediaQuery('(min-width:900px)');
   return React.createElement(Fragment$1, null, timelyOrderQuestion[dataChartIndex] && longTimeSpend && resultDatas && effectSize ? React.createElement("div", {
     style: {
       width: "100%"
@@ -11164,7 +11689,28 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     container: true,
     padding: "24px",
     className: "position-relative overflow-hidden"
-  }, React.createElement(Grid, {
+  }, !isTabletUp && React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, React.createElement(Box, {
+    padding: "16px 24px",
+    flexDirection: "row",
+    justifyContent: "end",
+    alignItems: "center",
+    display: "flex",
+    bgcolor: "#F9FAFB",
+    borderTop: "1px solid #E4E7EC",
+    borderBottom: "1px solid #E4E7EC"
+  }, React.createElement(Stack, {
+    padding: '12px 24px',
+    alignItems: "end",
+    bgcolor: "#F9FAFB"
+  }, React.createElement("div", {
+    className: styles$4["pdfBtnBox"]
+  }, React.createElement("button", {
+    className: styles$4["pdfBtn"] + " " + styles["truncate"],
+    onClick: handleExportPdf
+  }, React.createElement(iconPrintFill, null), React.createElement("p", null, t("print"))))))), React.createElement(Grid, {
     item: true,
     xs: 12
   }, React.createElement(Box, {
@@ -11184,7 +11730,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     var label = _ref2.label,
       value = _ref2.value;
     return React.createElement(Button, {
-      className: styleGlobal["truncate"],
+      className: styles["truncate"],
       disableTouchRipple: true,
       sx: {
         fontSize: "14px",
@@ -11197,14 +11743,14 @@ var ExamResultV2 = function ExamResultV2(_ref) {
         return handleChangeTab(value);
       }
     }, label);
-  })), React.createElement(Stack, {
+  })), isTabletUp && React.createElement(Stack, {
     padding: '12px 24px',
     alignItems: "end",
     bgcolor: "#F9FAFB"
   }, React.createElement("div", {
-    className: styles$2["pdfBtnBox"]
+    className: styles$4["pdfBtnBox"]
   }, React.createElement("button", {
-    className: styles$2["pdfBtn"] + " " + styleGlobal["truncate"],
+    className: styles$4["pdfBtn"] + " " + styles["truncate"],
     onClick: handleExportPdf
   }, React.createElement(iconPrintFill, null), React.createElement("p", null, t("print"))))))), React.createElement(Grid, {
     item: true,
@@ -11220,18 +11766,18 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     value: selected,
     index: 1
   }, React.createElement("div", {
-    className: styles$2["compareChart"]
+    className: styles$4["compareChart"]
   }, React.createElement("div", {
-    className: styles$2["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
+    className: styles$4["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
     onClick: handlePrevChart
   }, React.createElement(iconBtnPrevChart, null)), React.createElement("div", {
-    className: styles$2["chart"] + " sr-line-chart"
+    className: styles$4["chart"] + " sr-line-chart"
   }, React.createElement("div", null, React.createElement(ReactApexChart, {
     height: 389,
     options: chartOptions,
     series: series
   }))), React.createElement("div", {
-    className: styles$2["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
+    className: styles$4["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
     onClick: handleNextChart
   }, React.createElement(iconBtnNextChart, null)))), React.createElement(CustomTabPanel, {
     value: selected,
@@ -11266,39 +11812,70 @@ var ExamResultV2 = function ExamResultV2(_ref) {
       width: "100%"
     },
     id: "canvas"
-  }, React.createElement(CustomTabPanel, {
-    value: selected,
-    index: 0
-  }, React.createElement(MyAnswer, {
+  }, React.createElement(Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  }, React.createElement(Typography, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: 700,
+      color: "#414E62"
+    }
+  }, t(TabList[0].label)), React.createElement(MyAnswer, {
     data: resultDatas,
     categories: categoryResponses,
     isStudent: isStudent
-  })), React.createElement(CustomTabPanel, {
-    value: selected,
-    index: 1
-  }, React.createElement("div", {
-    className: styles$2["compareChart"]
+  })), React.createElement(Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React.createElement(Typography, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: 700,
+      color: "#414E62"
+    }
+  }, t(TabList[1].label)), React.createElement("div", {
+    className: styles$4["compareChart"]
   }, React.createElement("div", {
-    className: styles$2["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
+    className: styles$4["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
     onClick: handlePrevChart
   }, React.createElement(iconBtnPrevChart, null)), React.createElement("div", {
-    className: styles$2["chart"] + " sr-line-chart"
+    className: styles$4["chart"] + " sr-line-chart"
   }, React.createElement("div", null, React.createElement(ReactApexChart, {
     height: 389,
     options: chartOptions,
     series: series
   }))), React.createElement("div", {
-    className: styles$2["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
+    className: styles$4["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
     onClick: handleNextChart
-  }, React.createElement(iconBtnNextChart, null)))), React.createElement(CustomTabPanel, {
-    value: selected,
-    index: 2
-  }, React.createElement(CompareGrass, {
+  }, React.createElement(iconBtnNextChart, null)))), React.createElement(Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React.createElement(Typography, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: 700,
+      color: "#414E62"
+    }
+  }, t(TabList[2].label)), React.createElement(CompareGrass, {
     effectSize: effectSize
-  })), React.createElement(CustomTabPanel, {
-    value: selected,
-    index: 3
-  }, React.createElement(TrickyProblem, {
+  })), React.createElement(Stack, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  }, React.createElement(Typography, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: 700,
+      color: "#414E62"
+    }
+  }, t(TabList[3].label)), React.createElement(TrickyProblem, {
     data: resultDatas,
     openProblem: _extends({}, openProblem, {
       problem1: true
@@ -11364,5 +11941,100 @@ var times = {
   timeSpanToLocalMoment: timeSpanToLocalMoment
 };
 
-export { ACADEMY_DOMAIN, ACCESS_TOKEN, AcademyHeaders, 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, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, index as Enums, ExamDetailView, ExamEvent, ExamResultV2, InputText, LANGUAGES, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, QuestionCountSelector, 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, diffFromNow, formatTime, getAcademyDomain, getAccessToken$1 as getAccessToken, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setReFetchUserAcademies, setReadyRegisterPusher, setUser, store, times as timeUtils, toISOString, useAutoAcademyDomain, useCategorySelect, useChatContainer, useGoogleSignOut, useLanguage, useLogin, usePusherConversation, useSubjectSelect, useSwitchAcademy, utcToLocalTime };
+var Header = function Header(_ref) {
+  var academyListRoute = _ref.academyListRoute,
+    homeRoute = _ref.homeRoute,
+    headerTabs = _ref.headerTabs,
+    role = _ref.role,
+    navigate = _ref.navigate,
+    onSignOut = _ref.onSignOut;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var location = useLocation();
+  var theme = useTheme();
+  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;
+  });
+  var isLargerThanXL = useMediaQuery(theme.breakpoints.up("xl"));
+  var academyDomain = 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.academyDomain;
+  });
+  var pathname = location.pathname.toLowerCase();
+  return React.createElement("div", {
+    className: "col-sm-12 col-xl-12 " + styles["tabBox"] + " " + styles["headers"]
+  }, React.createElement(Link, {
+    "aria-current": "page",
+    to: homeRoute.path,
+    className: "border-none " + styles["logo-container"]
+  }, React.createElement("img", {
+    className: styles["logo"] + " d-none d-lg-block",
+    src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABNCAYAAAA2N/+4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAfmSURBVHgB7ZzLktvGFYbPaZBKNOWKmSpnG3GfVHm09UbUE5hDJ4usTD2BrU22op5gRvtUifI20Qz0BKKfINQThHbWqWA2li0SfXwamJFBEAABojkX6/+qKIq4dJPA36fPpTFEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAatHrjXsEgAeY9kSnM54QyRNmWojwnJlD/fxmuZzOCYCG7EWolyIt2R1ptzMV8Ez//y2EC+rgXahbRFqEE65aXApF6M1qNZ0RADm8CnUHkZaQWNy5CvfVRx/RPIqmEYEPGm9C9SfSdZhlvFx+84LAB02HPBAE46mK9EvyjkwgUuBobVGdSNXq7UWkq9U3TwkAJaAW1BHpwcEn9Oc//Y0+/t0f6eDuH6jbPaDV6geydllxFkQK1tnZotYV6Wef/V0F+snGvqWK9Tz6byLa8/Pvk9fbt/+j6Pz7aRy/eEQAZNhJqG1FWoWQGZyd8bfkib8O3x0K8UaF7F9hd0Z7YKj9GTKH2W2WlrMwvLugHRkOpWcoHma36Y2LXoadkPZAk/6+OLKvhWSQ3VZ2D0fD1Ti/7TTsTKkGjYOpfYrUN3rB+zHbf2/sEJrqv7OK83oByxk1wBKf6M15ZSj4XO/qJLsvkO5Y3xajYXysFbrDJu2+PDMP9a2n6Y/n2e2i7elbpVCb9ici89MweFzV33C4GhriTzPb+/l2WOxY+x5cfrZknoUhR/k2L5hSDRoJ9TaJ1BEYOdZc7Bruggu92+b/9vJWYhtG7HTbMU40TdttQ9P+hGTrMSpSNxDH2bM2O87u13M4EWOrXHhtoWqe9HhbCuomidRNM2ohhvntum3SZhoG14Ope6CWNh+vVvx7PWWgQ2aim2Zqrd6PkpskUjd1E5uN4oOzpmHYQV72FtLQR51GqxU5J9m9kumz2x0fWsv3VKThTRCpwxj7taqyn9+uAUFvdGT/k9kwPz01RwVNRHr+hBoQk31Du5D6ywvaAyL2hStH1z6+xvewJK+McHKcMA94I5DiOYus+c5W6Jxa0roydbH6aX5w9x/lBzGHOuWeq1D2UBhYxwVQJLaglOsuru4j+SUDoGJ2wUFYGD3Ld9SIeCcfTNhMfWY5srhIvY7fmfk2W3/zxbVKrtdoFPfzzRuR6csweEae8VJC3Ya6CH0RtVwsn+oIbBT1NqUogHJY+ekh82+e5y2ABhzHKu5ZEpX+Qq8kQi3vVyP7vwyXfVsQBV8bbL6iBsEUC82Gw7cLTU0NamUuhQf5YCqmeC+DrraP2gYnTp2On4jwUWrZ9kNZAKVTTxJAicRPN7+bE5b1spjGsnmdj3hvG4buPKkzSJOZK5mh8ucHX2lq6rl7kUeuRKgJQmMV69gKu7zgfpbtlQZQQSLQUJP8UuCzafrka5eoJ1Cb1OoW4AbqxcvnNb2Sqf89Qk8M2ciKPDLMjRLq21B/aaI+Rn+jS01HrX/mR5oLdkWAtWoVc0fTb/SQyomoYoBZDiLWUOMWsCjbwWQiquvTGn6w7dCAggf65uUJjqsVqoPpWIOd+1aCieFmkXUZZQGU+qrzfDpKfVFXITrJV4+c76qB1Zdl6StXtTkLO1VCptFRTDcdLW+Oq4K32lN2gX+62Ze/eOTqpv5spxy8Jnr3Qn/JCXnA+b9F27UCVZR6Skp6VGAd1cqfJDnYHXE1buJ6JcGbSkDxM/0dw6pjyvzTDdiJ2Q9Xb1FTesx3Xlsx98MzfkwtGA6XA7HJRZtltztftKwC5SJ8dRWe6nmfb+51vlew03TlLFVS497bs73755/hnbkKMeKK31CUFVCXaqYulbOg2YHedwM/l1HZiesSahptpws/HlILwnQV1IwacnoaOGteaNFTi1FNanl/7AXU1Xq6uzl8z5JtlZpxbXbJpbhM37XnFnxcLBLZG5qO6neoo31yn4k/dr9FPe3q6l2Bf2pIQm2DNtN/5PzUV9SSaxOqI/UL4+Owxc24FAx547eFo98t8PhiZM/U7z1MiwZWX3fW7lcgPG6SXk8Qe6LVst5lm/HmWnbPQpVJ2p8bXOmAvAwBL777Qv9TLdSS/KmRQI0PDbLbWaz7fLuF6nCpIZ0uv1PLsZO/2qHVoVU3gnwhdqIWrehG9YpytG1Ri3NYO9L20V/L1VvpbGP7uc1RqC6D5rEPN1yChssay7iWYGoDzQQ4X5PAjacwfyppbtpSMMvv8lWJ9CZUtTazba+q8w2bM+cv0e1k4VJhceP1AdvarL5mnnEuj077W/p0/mkOFWNyjkv90WY2pTcayT1qibepn7ev0nF+0aBqv8sE6NRy30eU6BEnQk3mJ4taFpwkzE1kmRbu72qdnvKaONWNeVCjzbR4IDzPthnT8o0x3f/n2/RApj/r/jKN9mkW+htcdD+3ls6z17wymNxS31dffpZ3kdgmVrjV8kovQk2ehfGQvE8zAeQec6gdPa+oM+fqAdAIvQVOJJGWY/u7CMb5t5zLQmiwkiwBjNO1DrTDQIySHG32e8py69K5ffSnab9x3g/VYPh9Oi+2/FjFuhZv2PSaUr7NJnjJ+KVrPGskgGvg++E+8OugtY+aPlnoR6QAlNFaqMxm74uhAWglVOd0X+VTleDDpZVQyxaDAOCbVlG/iJkS+V0t5P6YLwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/Yn4G8GJySAUVr9kAAAAASUVORK5CYII=",
+    alt: ""
+  }), React.createElement("img", {
+    className: styles["logo"] + " d-block d-lg-none",
+    src: "/images/logo-sm.png",
+    alt: ""
+  })), React.createElement("div", {
+    className: styles["routerBox"] + " d-flex flex-grow-1 flex-nowrap px-3"
+  }, headerTabs.map(function (_ref2) {
+    var path = _ref2.path,
+      icon = _ref2.icon,
+      label = _ref2.label,
+      isMain = _ref2.isMain,
+      activePaths = _ref2.activePaths;
+    return React.createElement(Link, {
+      key: path,
+      "aria-current": "page",
+      to: !academyDomain && !isMain ? "#" : path,
+      className: "text-decoration-none " + ((activePaths !== null && activePaths !== void 0 && activePaths.length ? activePaths.some(function (a) {
+        return pathname.startsWith(a);
+      }) : pathname.startsWith(path)) ? styles["router-link-active"] + " " + styles["router-link-exact-active"] : "") + " " + styles["tabText"] + " " + (!academyDomain && !isMain ? styles["disabled-link"] : "")
+    }, React.createElement(Stack, {
+      sx: {
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        display: "flex",
+        flexWrap: "nowrap"
+      }
+    }, icon, React.createElement("span", {
+      className: "text-nowrap"
+    }, isLargerThanXL || headerTabs.length < 4 ? t(label) : ellipsisText(t(label), 4))));
+  })), React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center"
+  }, React.createElement(Typography, {
+    className: "fw-bold text-primary me-2 text-nowrap",
+    sx: {
+      maxWidth: "120px",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, user === null || user === void 0 ? void 0 : user.fullName), React.createElement("div", null, React.createElement(TheAcademyDropdown, {
+    homeAcademyUrl: academyListRoute.path,
+    homeUrl: homeRoute.path,
+    role: role,
+    navigate: navigate,
+    hideAcademyName: !isLargerThanXL && headerTabs.length > 6
+  })), React.createElement("div", {
+    className: "me-2"
+  }, React.createElement(TheLanguageDropdown, null)), React.createElement("div", {
+    className: styles["userImg"] + " d-none d-md-none d-lg-block",
+    onClick: onSignOut
+  }, React.createElement("p", {
+    className: "text-nowrap mb-0"
+  }, t("logout"))), React.createElement("div", {
+    className: styles["userImg"] + " d-block d-md-block d-lg-none",
+    onClick: onSignOut
+  }, React.createElement(IoIosLogOut, {
+    size: 24,
+    color: "#959595"
+  }))));
+};
+
+export { ACADEMY_DOMAIN, ACCESS_TOKEN, AcademyHeaders, 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, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, index as Enums, ExamDetailView, ExamEvent, ExamResultV2, Header, InputText, LANGUAGES, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, QuestionCountSelector, 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, diffFromNow, formatTime, getAcademyDomain, getAccessToken$1 as getAccessToken, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setReFetchUserAcademies, setReadyRegisterPusher, setUser, store, times as timeUtils, toISOString, useAutoAcademyDomain, useCategorySelect, useChatContainer, useGoogleSignOut, useLanguage, useLogin, usePusherConversation, useSubjectSelect, useSwitchAcademy, utcToLocalTime };
 //# sourceMappingURL=index.modern.js.map