touchstudy-core 0.1.10 → 0.1.12

package/dist/index.modern.js

@@ -1,8 +1,9 @@
 import { createBrowserHistory } from 'history';
 import { createAction, createReducer, configureStore } from '@reduxjs/toolkit';
 import moment from 'moment';
+export { default as moment } from 'moment';
 import React, { useState, useCallback, useEffect, Fragment, useRef, useMemo } from 'react';
-import { Row, Col, Form, Modal, ModalHeader, ModalBody, ModalFooter, Button, Alert, Pagination, PaginationItem, PaginationLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Collapse, InputGroup, Input, Spinner } from 'reactstrap';
+import { Row, Col, Form, Modal, ModalHeader, ModalBody, Input, ModalFooter, Button, Alert, Pagination, PaginationItem, PaginationLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Collapse, InputGroup, Spinner, FormGroup, Label } from 'reactstrap';
 import { Formik } from 'formik';
 import { object, string, boolean } from 'yup';
 import GoogleLogin, { useGoogleLogout } from '@leecheuk/react-google-login';
@@ -13,11 +14,18 @@ import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 export { I18nextProvider, useTranslation } from 'react-i18next';
 import { IoChevronDown } from 'react-icons/io5';
-import Select from 'react-select';
+import 'moment/locale/ko.js';
+import 'moment/locale/en-au.js';
+import Select, { components } from 'react-select';
+import { FaCaretDown, FaPlusCircle } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import { IoIosCloseCircle, IoMdSend } from 'react-icons/io';
-import { ToastContainer, toast } from 'react-toastify';
 import Pusher from 'pusher-js';
+import { toast } from 'react-toastify';
+export { ToastContainer, toast } from 'react-toastify';
+import CreatableSelect from 'react-select/creatable';
+import { PiDotsNineLight } from 'react-icons/pi';
+import _ from 'lodash';
 
 var setLoading = createAction("common/setLoading");
 var setAlert = createAction("common/setAlert");
@@ -30,6 +38,7 @@ var isLocalHost = Boolean(window.location.hostname === "localhost" || window.loc
 var GOOGLE_CLIENT_ID = "64118819726-0qlur4qjrs9jbuu6rnoa0u91g680lmpg.apps.googleusercontent.com";
 var ACCESS_TOKEN = "ACCESS_TOKEN";
 var DATE_MIN_VALUE = "0001-01-01T00:00:00+00:00";
+var DATE_TIME_MIN_VALUE = "0001-01-01T00:00:00";
 var BASE_URL = function () {
   return isLocalHost ? "https://localhost:7045" : "https://api.studypeak.io";
 }();
@@ -60,7 +69,7 @@ var encodeParams = function encodeParams(params) {
 };
 
 var utcToLocalTime = (function (time, FORMAT) {
-  if (time === DATE_MIN_VALUE) return "";
+  if (time === DATE_MIN_VALUE || time === DATE_TIME_MIN_VALUE) return "";
   try {
     return moment.utc(time).local().format(FORMAT || "yyyy-MM-DD");
   } catch (_unused) {
@@ -147,6 +156,12 @@ var AuthenticationMessage;
   AuthenticationMessage["NotAllowedToRegister"] = "NotAllowedToRegister";
   AuthenticationMessage["InvalidGoogleToken"] = "InvalidGoogleToken";
 })(AuthenticationMessage || (AuthenticationMessage = {}));
+var Role;
+(function (Role) {
+  Role["Student"] = "Student";
+  Role["Teacher"] = "Teacher";
+  Role["Admin"] = "Admin";
+})(Role || (Role = {}));
 
 var useGoogleSignOut = function useGoogleSignOut(props) {
   var dispatch = useDispatch();
@@ -193,7 +208,8 @@ var schema = object({
 var BlockLogin = function BlockLogin(_ref) {
   var defaultInfo = _ref.defaultInfo,
     onNavigate = _ref.onNavigate,
-    isTeacher = _ref.isTeacher;
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? Role.Student : _ref$role;
   var dispatch = useDispatch();
   var _useGoogleSignOut = useGoogleSignOut({
       onNavigate: onNavigate
@@ -219,7 +235,6 @@ var BlockLogin = function BlockLogin(_ref) {
             token: accessToken,
             googleId: googleId
           };
-          var role = isTeacher ? "Teacher" : "Student";
           dispatch(setLoading(true));
           var _temp = _catch(function () {
             return Promise.resolve(apiLoginGoogle(infoLogin, role)).then(function (res1) {
@@ -227,7 +242,7 @@ var BlockLogin = function BlockLogin(_ref) {
               var tokenJWT = res1.data.token;
               localStorage.setItem("USER_INFORMATION", JSON.stringify(infoLogin));
               localStorage.setItem(ACCESS_TOKEN, tokenJWT);
-              if (!isTeacher && isFirstLogin) {
+              if (role === Role.Student && isFirstLogin) {
                 onNavigate("/register/info");
               } else {
                 onNavigate("/");
@@ -346,7 +361,7 @@ var useLogin = function useLogin(onNavigate) {
 
 var Login = function Login(_ref) {
   var onNavigate = _ref.onNavigate,
-    isTeacher = _ref.isTeacher;
+    role = _ref.role;
   var _useLogin = useLogin(onNavigate),
     defaultInfo = _useLogin.defaultInfo;
   return React.createElement("div", {
@@ -361,7 +376,7 @@ var Login = function Login(_ref) {
   }, React.createElement(BlockLogin, {
     defaultInfo: defaultInfo,
     onNavigate: onNavigate,
-    isTeacher: isTeacher
+    role: role
   }))));
 };
 
@@ -602,11 +617,11 @@ var NotFound = function NotFound() {
     document.title = TITLE;
   });
   return React.createElement("div", {
-    className: "not-found"
+    className: "not-found d-flex justify-content-center"
   }, React.createElement("div", {
-    className: "clearfix"
+    className: "clearfix pt-5"
   }, React.createElement("h1", {
-    className: "float-left display-3 mr-4"
+    className: "float-left display-3 fw-bold mr-4 text-center"
   }, "404"), React.createElement("div", {
     className: "float-left"
   }, React.createElement("h4", {
@@ -661,16 +676,13 @@ var LayoutContext = function LayoutContext(_ref) {
     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 roles = (user === null || user === void 0 ? void 0 : user.roles) || [];
   var resetAuth = function resetAuth() {
     handleSignOut();
   };
   var checkRoleUser = useCallback(function () {
-    var _user$roles, _user$roles2;
     if (!user) return;
-    var isAdmin = (_user$roles = user.roles) === null || _user$roles === void 0 ? void 0 : _user$roles.includes("Admin");
-    if (isAdmin && role !== "Teacher") alert(user.email + " not allow to register " + role);
-    if (isAdmin) return;
-    if (!((_user$roles2 = user.roles) !== null && _user$roles2 !== void 0 && _user$roles2.includes(role))) {
+    if (!roles.includes(role)) {
       alert(user.email + " not allow to register " + role);
       resetAuth();
     }
@@ -723,19 +735,47 @@ var ConfirmDialog = function ConfirmDialog(_ref) {
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Confirmation" : _ref$title,
     toggle = _ref.toggle,
-    onConfirm = _ref.onConfirm;
+    onConfirm = _ref.onConfirm,
+    confirmText = _ref.confirmText;
+  var _useState = useState(),
+    confirmTextValue = _useState[0],
+    setConfirmTextValue = _useState[1];
+  var handleConfirm = function handleConfirm() {
+    onConfirm();
+  };
+  var handleChangeConfirmText = function handleChangeConfirmText(e) {
+    setConfirmTextValue(e.target.value);
+  };
+  var handlePaste = function handlePaste(e) {
+    e.preventDefault();
+  };
+  useEffect(function () {
+    !open && setConfirmTextValue(undefined);
+  }, [open]);
+  var isValid = !!confirmText && !!confirmTextValue && confirmTextValue.trim() === confirmText.trim();
   return React.createElement(Modal, {
     isOpen: open,
     toggle: toggle,
-    centered: true
+    centered: true,
+    zIndex: 1102
   }, React.createElement(ModalHeader, {
     toggle: toggle
-  }, title), React.createElement(ModalBody, null, text), React.createElement(ModalFooter, null, React.createElement(Button, {
+  }, title), React.createElement(ModalBody, null, React.createElement("p", null, React.createElement("strong", null, text)), !!confirmText && React.createElement("div", null, React.createElement("p", null, "Enter \"", React.createElement("strong", null, confirmText), "\" to confirm delete"), React.createElement(Input, {
+    value: confirmTextValue,
+    onChange: handleChangeConfirmText,
+    placeholder: "Please enter...",
+    onPaste: handlePaste,
+    invalid: !isValid && confirmTextValue !== undefined,
+    valid: isValid
+  }))), React.createElement(ModalFooter, null, React.createElement(Button, {
     color: "secondary",
+    className: "px-3",
     onClick: toggle
   }, cancelText), React.createElement(Button, {
     color: isDelete ? "danger" : "primary",
-    onClick: onConfirm
+    className: "px-3",
+    disabled: !!confirmText && (confirmTextValue === null || confirmTextValue === void 0 ? void 0 : confirmTextValue.trim()) !== confirmText.trim(),
+    onClick: handleConfirm
   }, okText)));
 };
 
@@ -753,7 +793,8 @@ var CommonDialog = function CommonDialog(_ref) {
     isOpen: open,
     toggle: onClose,
     centered: centered,
-    size: size
+    size: size,
+    zIndex: 1102
   }, React.createElement(ModalHeader, {
     toggle: onClose
   }, title), children);
@@ -970,6 +1011,50 @@ var problem = "문제";
 var problem_solving_time = "문제풀이 시간";
 var minutes = "분";
 var correct_rate = "정확한 비율";
+var title = "시험명";
+var duration = "시험 시간";
+var answer_count = "답변 수";
+var question_count = "문제 갯수";
+var category = "문항 카테고리";
+var save_and_exit = "저장 및 종료";
+var update_exam = "시험 업데이트";
+var create_exam = "새 시험 만들기";
+var enter_title = "시험 제목을 입력하세요";
+var select_placeholder = "선택하다...";
+var view_exam = "시험 보기";
+var back = "뒤쪽에";
+var date_format = "YYYY년 MM월 DD일";
+var date_time_format = "YYYY-MM-DD HH:mm";
+var date_time_format_12h = "YYYY-MM-DD HH:mm A";
+var full_date_time_format = "YYYY년 MMMM Do HH:mm:ss";
+var total_questions = "총 질문수";
+var code = "암호";
+var type = "유형";
+var description = "설명";
+var actions = "행위";
+var start_time = "시작 시간";
+var end_time = "종료 시간";
+var start_date = "시작일";
+var end_date = "종료일";
+var weekly_day = "주간";
+var weekly_days = "주간";
+var enter_class_name = "수업 이름을 입력하세요";
+var name = "이름";
+var total_teachers = "총 교사 수";
+var full_name = "이름";
+var email = "이메일";
+var payments = "지불";
+var view_payments = "결제 보기";
+var sunday = "일요일";
+var monday = "월요일";
+var tuesday = "화요일";
+var wednesday = "수요일";
+var thursday = "목요일";
+var friday = "금요일";
+var saturday = "토요일";
+var total_lessons = "총 수업";
+var weekly_days_required = "평일 필수";
+var main_teacher = "주 교사";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -1027,7 +1112,51 @@ var lang_ko = {
 	problem: problem,
 	problem_solving_time: problem_solving_time,
 	minutes: minutes,
-	correct_rate: correct_rate
+	correct_rate: correct_rate,
+	title: title,
+	duration: duration,
+	answer_count: answer_count,
+	question_count: question_count,
+	category: category,
+	save_and_exit: save_and_exit,
+	update_exam: update_exam,
+	create_exam: create_exam,
+	enter_title: enter_title,
+	select_placeholder: select_placeholder,
+	view_exam: view_exam,
+	back: back,
+	date_format: date_format,
+	date_time_format: date_time_format,
+	date_time_format_12h: date_time_format_12h,
+	full_date_time_format: full_date_time_format,
+	total_questions: total_questions,
+	code: code,
+	type: type,
+	description: description,
+	actions: actions,
+	start_time: start_time,
+	end_time: end_time,
+	start_date: start_date,
+	end_date: end_date,
+	weekly_day: weekly_day,
+	weekly_days: weekly_days,
+	enter_class_name: enter_class_name,
+	name: name,
+	total_teachers: total_teachers,
+	full_name: full_name,
+	email: email,
+	payments: payments,
+	view_payments: view_payments,
+	sunday: sunday,
+	monday: monday,
+	tuesday: tuesday,
+	wednesday: wednesday,
+	thursday: thursday,
+	friday: friday,
+	saturday: saturday,
+	total_lessons: total_lessons,
+	weekly_days_required: weekly_days_required,
+	main_teacher: main_teacher
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -1087,6 +1216,86 @@ var problem$1 = "Problem ";
 var problem_solving_time$1 = "Problem solving time";
 var minutes$1 = "m";
 var correct_rate$1 = "Correct rate";
+var difficult_level = "Difficult level";
+var difficulty_explain = "(The Difficulty Level provides an indication of the difficulty level of each test question)";
+var explain_your_answer = "Explain your answer";
+var hint = "Hint";
+var save_and_add_next_question = "Save and add next question";
+var save_and_exit$1 = "Save and exit";
+var question_text = "Question text";
+var title$1 = "Title";
+var create_question = "Create question";
+var parent_question = "Parent question";
+var edit_question = "Edit question";
+var easy = "Easy";
+var intermediate = "Intermediate";
+var difficult = "Difficult";
+var article = "Article";
+var correct_answer = "Correct answer";
+var mark = "Mark";
+var answer = "Answer";
+var add_new_row = "Add new row";
+var question_text_required = "Question text is required";
+var create_question_success = "Question is created successfully";
+var update_question_success = "Question is updated successfully";
+var number_of_answers = "Number of answers";
+var correct_answers = "Correct answers";
+var category$1 = "Category";
+var score = "Score";
+var enter_title$1 = "Enter title";
+var enter_score = "Enter score";
+var exam_title_required = "Exam title is required";
+var question_category_required = "Question category is required";
+var start_time$1 = "Start time";
+var end_time$1 = "End time";
+var start_date$1 = "Start date";
+var end_date$1 = "End date";
+var weekly_day$1 = "Weekly day";
+var weekly_days$1 = "Weekly days";
+var enter_class_name$1 = "Enter class name";
+var class_required = "Class name is required";
+var total_teachers$1 = "Total teachers";
+var start_date_required = "Start date is required";
+var end_date_required = "End date is required";
+var full_name$1 = "Full name";
+var email$1 = "Email";
+var is_paid = "Is paid";
+var payment_time = "Payment time";
+var create_and_continue = "Create and continue";
+var payments$1 = "Payments";
+var duration$1 = "Duration";
+var answer_count$1 = "Answer count";
+var question_count$1 = "Question count";
+var multi_choice = "Is multiple";
+var select_placeholder$1 = "Select...";
+var view_exam$1 = "View exam";
+var update_exam$1 = "Update exam";
+var create_exam$1 = "Create exam";
+var back$1 = "Back";
+var date_format$1 = "MM-DD-YYYY";
+var date_time_format$1 = "MM-DD-YYYY HH:mm";
+var date_time_format_12h$1 = "MM-DD-YYYY HH:mm A";
+var full_date_time_format$1 = "MMM Do YYYY HH:mm:ss";
+var total_questions$1 = "Total questions";
+var code$1 = "Code";
+var type$1 = "Type";
+var description$1 = "Description";
+var actions$1 = "Actions";
+var name$1 = "Name";
+var sunday$1 = "Sunday";
+var monday$1 = "Monday";
+var tuesday$1 = "Tuesday";
+var wednesday$1 = "Wednesday";
+var thursday$1 = "Thursday";
+var friday$1 = "Friday";
+var saturday$1 = "Saturday";
+var total_lessons$1 = "Total lessons";
+var is_cancelled = "Is cancelled";
+var date = "Date";
+var weekly_days_required$1 = "Weekly days are required";
+var main_teacher$1 = "Main teacher";
+var main_teacher_required = "Main teacher is required";
+var teacher = "Teacher";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -1144,7 +1353,87 @@ var lang_en = {
 	problem: problem$1,
 	problem_solving_time: problem_solving_time$1,
 	minutes: minutes$1,
-	correct_rate: correct_rate$1
+	correct_rate: correct_rate$1,
+	difficult_level: difficult_level,
+	difficulty_explain: difficulty_explain,
+	explain_your_answer: explain_your_answer,
+	hint: hint,
+	save_and_add_next_question: save_and_add_next_question,
+	save_and_exit: save_and_exit$1,
+	question_text: question_text,
+	title: title$1,
+	create_question: create_question,
+	parent_question: parent_question,
+	edit_question: edit_question,
+	easy: easy,
+	intermediate: intermediate,
+	difficult: difficult,
+	article: article,
+	correct_answer: correct_answer,
+	mark: mark,
+	answer: answer,
+	add_new_row: add_new_row,
+	question_text_required: question_text_required,
+	create_question_success: create_question_success,
+	update_question_success: update_question_success,
+	number_of_answers: number_of_answers,
+	correct_answers: correct_answers,
+	category: category$1,
+	score: score,
+	enter_title: enter_title$1,
+	enter_score: enter_score,
+	exam_title_required: exam_title_required,
+	question_category_required: question_category_required,
+	start_time: start_time$1,
+	end_time: end_time$1,
+	start_date: start_date$1,
+	end_date: end_date$1,
+	weekly_day: weekly_day$1,
+	weekly_days: weekly_days$1,
+	enter_class_name: enter_class_name$1,
+	class_required: class_required,
+	total_teachers: total_teachers$1,
+	start_date_required: start_date_required,
+	end_date_required: end_date_required,
+	full_name: full_name$1,
+	email: email$1,
+	is_paid: is_paid,
+	payment_time: payment_time,
+	create_and_continue: create_and_continue,
+	payments: payments$1,
+	duration: duration$1,
+	answer_count: answer_count$1,
+	question_count: question_count$1,
+	multi_choice: multi_choice,
+	select_placeholder: select_placeholder$1,
+	view_exam: view_exam$1,
+	update_exam: update_exam$1,
+	create_exam: create_exam$1,
+	back: back$1,
+	date_format: date_format$1,
+	date_time_format: date_time_format$1,
+	date_time_format_12h: date_time_format_12h$1,
+	full_date_time_format: full_date_time_format$1,
+	total_questions: total_questions$1,
+	code: code$1,
+	type: type$1,
+	description: description$1,
+	actions: actions$1,
+	name: name$1,
+	sunday: sunday$1,
+	monday: monday$1,
+	tuesday: tuesday$1,
+	wednesday: wednesday$1,
+	thursday: thursday$1,
+	friday: friday$1,
+	saturday: saturday$1,
+	total_lessons: total_lessons$1,
+	is_cancelled: is_cancelled,
+	date: date,
+	weekly_days_required: weekly_days_required$1,
+	main_teacher: main_teacher$1,
+	main_teacher_required: main_teacher_required,
+	teacher: teacher
 };
 
 i18n.use(initReactI18next).init({
@@ -1163,28 +1452,27 @@ i18n.use(initReactI18next).init({
   }
 });
 
-var DEFAULT_LANGUAGE_CODE = "ko";
+var DEFAULT_LANGUAGE_INDEX = 0;
 var LANGUAGES = [{
   code: "ko",
   fullName: "Korean",
   shortName: "Korean",
   nativeName: "Korean",
   name: "Korean",
-  image: "/images/korea.png"
+  image: "/images/korea.png",
+  momentLangCode: "ko"
 }, {
   code: "en",
   fullName: "English",
   shortName: "English",
   nativeName: "English",
   name: "English",
-  image: "/images/usa.png"
+  image: "/images/usa.png",
+  momentLangCode: "en-au"
 }];
-var SUPPORTED_LANGUAGES_CODE = LANGUAGES.map(function (i) {
-  return i.code;
-});
 
-var TheLanguageDropdown = function TheLanguageDropdown() {
-  var defaultLanguage = !!localStorage.getItem("language") ? localStorage.getItem("language") : navigator.language || DEFAULT_LANGUAGE_CODE;
+var useLanguage = function useLanguage() {
+  var defaultLanguage = !!localStorage.getItem("language") ? localStorage.getItem("language") : navigator.language || LANGUAGES[DEFAULT_LANGUAGE_INDEX].code;
   var dispatch = useDispatch();
   var _useTranslation = useTranslation(),
     i18n = _useTranslation.i18n;
@@ -1200,25 +1488,42 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
     });
   };
   var changeLanguageApp = function changeLanguageApp(lang) {
-    if (!SUPPORTED_LANGUAGES_CODE.includes(lang)) lang = DEFAULT_LANGUAGE_CODE;
-    i18n.changeLanguage(lang);
-    localStorage.setItem("language", lang);
-    setItemLanguage(lang);
-    dispatch(setLanguage(lang));
+    var language = LANGUAGES.find(function (i) {
+      return i.code === lang;
+    });
+    if (!language) language = LANGUAGES[DEFAULT_LANGUAGE_INDEX];
+    i18n.changeLanguage(language.code);
+    moment.locale(language.momentLangCode);
+    localStorage.setItem("language", language.code);
+    setItemLanguage(language.code);
+    dispatch(setLanguage(language.code));
   };
+  useEffect(function () {
+    changeLanguageApp(language);
+  }, [language]);
   var currentLanguage = useMemo(function () {
     var currentLang = LANGUAGES.find(function (i) {
       return i.code === language;
     });
     if (!currentLang) return null;
-    return React.createElement(React.Fragment, null, React.createElement("img", {
-      className: "mr-2 " + styles['dropdown-menu-flag'],
-      src: currentLang.image
-    }), " ", currentLang.shortName);
-  }, [language]);
-  useEffect(function () {
-    changeLanguageApp(language);
+    return currentLang;
   }, [language]);
+  return {
+    language: language,
+    dropdownOpen: dropdownOpen,
+    currentLanguage: currentLanguage,
+    toggle: toggle,
+    setItemLanguage: setItemLanguage
+  };
+};
+
+var TheLanguageDropdown = function TheLanguageDropdown() {
+  var _useLanguage = useLanguage(),
+    currentLanguage = _useLanguage.currentLanguage,
+    language = _useLanguage.language,
+    dropdownOpen = _useLanguage.dropdownOpen,
+    toggle = _useLanguage.toggle,
+    setItemLanguage = _useLanguage.setItemLanguage;
   return React.createElement(Dropdown, {
     isOpen: dropdownOpen,
     toggle: toggle,
@@ -1232,7 +1537,10 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
       display: 'flex',
       alignItems: 'center'
     }
-  }, currentLanguage, React.createElement(IoChevronDown, {
+  }, !!currentLanguage && React.createElement("img", {
+    className: "mr-2 " + styles['dropdown-menu-flag'],
+    src: currentLanguage.image
+  }), !!currentLanguage && currentLanguage.shortName, React.createElement(IoChevronDown, {
     className: "ml-2",
     style: {
       fontSize: '15px',
@@ -1316,14 +1624,54 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var _excluded = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var DropdownIndicator = function DropdownIndicator(props) {
+  return React.createElement(components.DropdownIndicator, Object.assign({}, props), React.createElement(FaCaretDown, {
+    color: "#5458D5"
+  }));
+};
+var CustomOption = function CustomOption(props) {
+  return React.createElement(components.Option, Object.assign({}, props), React.createElement("div", {
+    style: {
+      fontSize: "14px",
+      fontWeight: 500
+    }
+  }, props.data.label));
+};
+var customStyles = {
+  control: function control(baseStyles, state) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: "#5458D5",
+      borderColor: state.isFocused ? '#5458D5' : '#C3C5FE'
+    });
+  },
+  input: function input(baseStyles, _) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: "#5458D5"
+    });
+  },
+  singleValue: function singleValue(baseStyles) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: "#5458D5"
+    });
+  }
+};
 var CustomSelect = function CustomSelect(_ref) {
-  var options = _ref.options,
+  var isDefault = _ref.isDefault,
+    options = _ref.options,
     isDisabled = _ref.isDisabled,
     scrollBottom = _ref.scrollBottom,
     value = _ref.value,
     isMulti = _ref.isMulti,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var initialValues = Array.isArray(value) ? options.filter(function (i) {
     return value.includes(i.value);
   }) : isMulti ? options.filter(function (i) {
@@ -1334,9 +1682,19 @@ var CustomSelect = function CustomSelect(_ref) {
   return React.createElement(Select, Object.assign({
     isDisabled: isDisabled,
     options: options,
-    value: initialValues,
+    value: !isDefault ? initialValues != null ? initialValues : null : undefined,
+    defaultValue: isDefault ? initialValues : undefined,
     menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti
+    isMulti: isMulti,
+    components: {
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      DropdownIndicator: DropdownIndicator,
+      Option: CustomOption
+    },
+    styles: customStyles,
+    placeholder: t("select_placeholder")
   }, rest));
 };
 
@@ -1408,6 +1766,8 @@ var ChatRightItem = function ChatRightItem(_ref) {
   var _useState2 = useState(false),
     isShowInfo = _useState2[0],
     setShowInfo = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var handleShowInfo = function handleShowInfo() {
     setShowInfo(!isShowInfo);
     !isFirst && !isSystemLog && setShowTime(!isShowInfo);
@@ -1440,12 +1800,12 @@ var ChatRightItem = function ChatRightItem(_ref) {
     }
   }, "Add message to exam")), isSystemLog || !!isFirst ? React.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
-  }, utcToLocalTime(createdAt, "HH:mm DD MMM YYYY")) : React.createElement(Collapse, {
+  }, utcToLocalTime(createdAt, t("date_time_format"))) : React.createElement(Collapse, {
     className: "w-100",
     isOpen: isShowTime
   }, React.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
-  }, utcToLocalTime(createdAt, "HH:mm DD MMM YYYY"))), isSystemLog ? React.createElement("div", {
+  }, utcToLocalTime(createdAt, t("date_time_format")))), isSystemLog ? React.createElement("div", {
     className: "text-center w-100"
   }, React.createElement(Link, {
     to: "" + (actionLink || "/"),
@@ -1502,6 +1862,8 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   var _useState2 = useState(false),
     isShowInfo = _useState2[0],
     setShowInfo = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var handleShowInfo = function handleShowInfo() {
     if (!id) return;
     setShowInfo(!isShowInfo);
@@ -1530,12 +1892,12 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     }
   }, "Add message to exam")), isSystemLog || !!isFirst ? React.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
-  }, utcToLocalTime(createdAt, "HH:mm DD MMM YYYY")) : React.createElement(Collapse, {
+  }, utcToLocalTime(createdAt, t("date_time_format"))) : React.createElement(Collapse, {
     className: "w-100",
     isOpen: isShowTime
   }, React.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
-  }, utcToLocalTime(createdAt, "HH:mm DD MMM YYYY"))), isSystemLog ? React.createElement("div", {
+  }, utcToLocalTime(createdAt, t("date_time_format")))), isSystemLog ? React.createElement("div", {
     className: "text-center w-100"
   }, React.createElement(Link, {
     to: "" + (actionLink || "/"),
@@ -1688,9 +2050,16 @@ var ChatHeader = function ChatHeader(_ref) {
   var name = _ref.name,
     avatar = _ref.avatar,
     options = _ref.options,
+    selectedOption = _ref.selectedOption,
     onChangeOption = _ref.onChangeOption;
   var wrapperRef = useRef(null);
   var actionRef = useRef(null);
+  var language = 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.language;
+  });
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var handleChangeOption = function handleChangeOption(val) {
     onChangeOption === null || onChangeOption === void 0 ? void 0 : onChangeOption(val);
   };
@@ -1707,10 +2076,10 @@ var ChatHeader = function ChatHeader(_ref) {
     return options === null || options === void 0 ? void 0 : options.map(function (i) {
       return {
         value: i.id,
-        label: i.title + " (" + utcToLocalTime(i.startTime) + ")"
+        label: i.title + " (" + utcToLocalTime(i.startTime, t("date_time_format")) + ")"
       };
     });
-  }, [JSON.stringify(options)]);
+  }, [JSON.stringify(options), language]);
   return React.createElement("div", {
     className: "d-flex bg-light rounded-3 p-3"
   }, React.createElement("div", null, React.createElement("img", {
@@ -1726,6 +2095,7 @@ var ChatHeader = function ChatHeader(_ref) {
   }, selectOptions !== undefined && React.createElement("div", {
     className: styles$1["header__select"] + " mx-3"
   }, React.createElement(CustomSelect, {
+    value: selectedOption,
     options: selectOptions,
     onChange: handleChangeOption,
     isClearable: true
@@ -1843,7 +2213,7 @@ var ChatContainer = function ChatContainer(_ref) {
     onAddExamMessage: handleAddExamMessage
   }))), React.createElement("div", null, React.createElement(InputChat, Object.assign({}, inputProps, {
     inputRef: inputRef
-  }))), React.createElement(ToastContainer, null));
+  }))));
 };
 
 var CONVERSATION_URL = BASE_URL + "/api/conversation";
@@ -1960,13 +2330,14 @@ var useMessageList = function useMessageList(userId, getListExamOptions) {
           examId: !examId ? messageFilter.examId : examId
         });
         return Promise.resolve(getMessagesByConversation(conversationId, filter)).then(function (res) {
+          var _res$data$items2;
           function _temp(_getListExamOptions) {
             _getListExamOptions;
           }
-          setMessages(function (state) {
+          if (messageFilter.beforeDate) setMessages(function (state) {
             var _res$data$items;
             return [].concat(((_res$data$items = res.data.items) === null || _res$data$items === void 0 ? void 0 : _res$data$items.reverse()) || [], state);
-          });
+          });else setMessages((_res$data$items2 = res.data.items) === null || _res$data$items2 === void 0 ? void 0 : _res$data$items2.reverse());
           return getListExamOptions ? Promise.resolve(!!getListExamOptions && getListExamOptions(userId)).then(_temp) : _temp(!!getListExamOptions && getListExamOptions(userId));
         });
       }, function (error) {
@@ -2398,6 +2769,7 @@ var useChatContainer = function useChatContainer(props) {
       name: userName,
       avatar: userAvatar,
       options: exams,
+      selectedOption: messageFilter.examId,
       onChangeOption: handleFilterExam
     },
     chatListProps: {
@@ -2563,9 +2935,12 @@ var useConversationList = function useConversationList() {
         return i.id === lastMessage.conversationId;
       });
       if (updateIndex < 0) return state;
-      return [].concat(state.slice(0, updateIndex), [_extends({}, state[updateIndex], {
+      console.log({
         lastMessage: lastMessage
-      })], state.slice(updateIndex + 1));
+      });
+      return [_extends({}, state[updateIndex], {
+        lastMessage: lastMessage
+      })].concat(state.slice(0, updateIndex), state.slice(updateIndex + 1));
     });
   };
   var handleCreateConversationSuccess = function handleCreateConversationSuccess(id) {
@@ -2654,7 +3029,536 @@ var usePusherConversation = function usePusherConversation(onNewMessageConversat
   return {};
 };
 
+var _excluded$1 = ["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$1);
+  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$2 = ["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$2);
+  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 styles$2 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question--active":"_3IHYm","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
+
+var DURATION_OPTIONS = Array.from({
+  length: 120
+}, function (_, i) {
+  return i + 1;
+});
+var SCORE_OPTIONS = Array.from({
+  length: 10
+}, function (_, i) {
+  return i + 1;
+});
+var QUESTION_OPTIONS = Array.from({
+  length: 40
+}, function (_, i) {
+  return i + 1;
+});
+var ANSWER_OPTIONS = Array.from({
+  length: 9
+}, function (_, i) {
+  return i + 2;
+});
+var DEFAULT_SCORE = 2;
+var DEFAULT_ANSWER_COUNT = 5;
+
+var QuestionView = function QuestionView(_ref) {
+  var index = _ref.index,
+    question = _ref.question,
+    answerCount = _ref.answerCount,
+    isDisabled = _ref.isDisabled,
+    onChangeCorrectAnswers = _ref.onChangeCorrectAnswers,
+    onChangeScoreAnswer = _ref.onChangeScoreAnswer;
+  var scoreOptions = SCORE_OPTIONS.map(function (i) {
+    return {
+      label: DEFAULT_SCORE === i ? i + "\uC810 (\uAE30\uBCF8\uAC12)" : i + "\uC810",
+      value: i
+    };
+  });
+  return React.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, React.createElement("div", {
+    className: "d-flex flex-grow-1"
+  }, React.createElement("div", {
+    className: styles$2["question-title"] + " me-2"
+  }, "\uBB38\uC81C ", question.questionOrder + 1, "\uBC88"), React.createElement("div", {
+    className: "d-flex flex-grow-1"
+  }, Array.from({
+    length: answerCount
+  }, function (_, i) {
+    return i + 1;
+  }).map(function (i) {
+    return React.createElement(FormGroup, {
+      className: "d-flex flex-column px-4"
+    }, React.createElement(Label, {
+      htmlFor: "answer-" + i,
+      className: "" + styles$2["question-label"]
+    }, i, "\uBC88"), React.createElement(Input, {
+      id: "answer-" + i,
+      type: "radio",
+      checked: question.correctAnswers.includes(i),
+      onClick: function onClick() {
+        return onChangeCorrectAnswers(i, index);
+      },
+      disabled: isDisabled
+    }));
+  }))), React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, React.createElement(FormGroup, {
+    className: "mx-3",
+    style: {
+      width: "140px"
+    }
+  }, React.createElement(CustomSelect, {
+    value: question.score,
+    options: scoreOptions,
+    onChange: function onChange(value) {
+      return onChangeScoreAnswer(value.value, index);
+    },
+    isDisabled: isDisabled
+  }))));
+};
+
+var ArticleGroupView = function ArticleGroupView(_ref) {
+  var categoryOptions = _ref.categoryOptions,
+    article = _ref.article,
+    questions = _ref.questions,
+    answerCount = _ref.answerCount,
+    questionCount = _ref.questionCount,
+    categoryId = _ref.categoryId,
+    isActive = _ref.isActive,
+    isDisabled = _ref.isDisabled,
+    onChangeQuestionCount = _ref.onChangeQuestionCount,
+    onChangeCategory = _ref.onChangeCategory,
+    onChangeAnswerCount = _ref.onChangeAnswerCount,
+    onChangeCorrectAnswers = _ref.onChangeCorrectAnswers,
+    onChangeScoreAnswer = _ref.onChangeScoreAnswer;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleChangeQuestionCount = function handleChangeQuestionCount(value) {
+    onChangeQuestionCount(article, value === null || value === void 0 ? void 0 : value.value, answerCount);
+  };
+  var handleChangeCategory = function handleChangeCategory(value) {
+    onChangeCategory(article, value === null || value === void 0 ? void 0 : value.value);
+  };
+  var handleChangeAnswerCount = function handleChangeAnswerCount(value) {
+    onChangeAnswerCount(article, value === null || value === void 0 ? void 0 : value.value, answerCount);
+  };
+  var handleChangeCorrectAnswers = function handleChangeCorrectAnswers(value, index) {
+    onChangeCorrectAnswers(article, index, value);
+  };
+  var handleChangeScoreAnswer = function handleChangeScoreAnswer(value, index) {
+    onChangeScoreAnswer(article, index, value);
+  };
+  var questionOptions = QUESTION_OPTIONS.map(function (i) {
+    return {
+      label: i + "\uAC1C",
+      value: i
+    };
+  });
+  var answerOptions = ANSWER_OPTIONS.map(function (i) {
+    return {
+      label: i + "\uBC88",
+      value: i
+    };
+  });
+  return React.createElement("div", {
+    className: "d-flex " + styles$2["question"] + " " + (isActive ? styles$2["question--active"] : "")
+  }, React.createElement("div", {
+    className: "py-1"
+  }, React.createElement(PiDotsNineLight, {
+    size: 18
+  })), React.createElement("div", {
+    className: "px-4"
+  }, React.createElement(Row, null, React.createElement(Col, {
+    xs: 12
+  }, React.createElement("p", {
+    className: "mb-0 " + styles$2["question-article"]
+  }, "\uBB38\uD56D"), React.createElement("p", {
+    className: "text-center " + styles$2["question-article"]
+  }, article)))), React.createElement("div", {
+    className: "flex-grow-1"
+  }, React.createElement(Row, null, React.createElement(Col, {
+    xs: 3
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    htmlFor: "question_count",
+    className: "" + styles$2["question-label"]
+  }, t("question_count")), React.createElement(CustomSelect, {
+    inputId: "question_count",
+    value: questionCount,
+    options: questionOptions,
+    onChange: handleChangeQuestionCount,
+    isDisabled: isDisabled
+  }))), React.createElement(Col, {
+    xs: 3
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    htmlFor: "category",
+    className: "" + styles$2["question-label"]
+  }, t("category")), React.createElement(CustomSelect, {
+    inputId: "category",
+    value: categoryId,
+    options: categoryOptions,
+    onChange: handleChangeCategory,
+    isDisabled: isDisabled
+  }))), React.createElement(Col, {
+    xs: 3
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    htmlFor: "answer_count",
+    className: "" + styles$2["question-label"]
+  }, t("answer_count")), React.createElement(CustomSelect, {
+    inputId: "answer_count",
+    value: answerCount,
+    options: answerOptions,
+    onChange: handleChangeAnswerCount,
+    isDisabled: isDisabled
+  }))), React.createElement(Col, {
+    xs: 3
+  })), React.createElement("div", null, questions.map(function (q, index) {
+    return React.createElement(QuestionView, {
+      key: index,
+      question: q,
+      answerCount: answerCount,
+      index: index,
+      onChangeCorrectAnswers: handleChangeCorrectAnswers,
+      onChangeScoreAnswer: handleChangeScoreAnswer,
+      isDisabled: isDisabled
+    });
+  }))));
+};
+
+var useExamDetailView = function useExamDetailView(props) {
+  var exam = props.exam,
+    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 {
+      var remainQuestions = questions.slice(0, questionCount);
+      var _newQuestions = [].concat(prevQuestions, remainQuestions, nextQuestions.map(function (i) {
+        return _extends({}, i, {
+          questionOrder: i.questionOrder - questions.length + questionCount
+        });
+      }));
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(_newQuestions)
+      }));
+    }
+  };
+  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 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) {
+          return _extends({}, q, {
+            numberOfAnswers: newAnswerCount,
+            correctAnswers: q.correctAnswers.filter(function (i) {
+              return i <= newAnswerCount;
+            })
+          });
+        }))
+      }));
+    }
+  };
+  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 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 handleChangeDuration = function handleChangeDuration(value) {
+    if (!exam) return;
+    onChangeExam(_extends({}, exam, {
+      duration: value === null || value === void 0 ? void 0 : value.value
+    }));
+  };
+  var handleChangeTitle = function handleChangeTitle(e) {
+    if (!exam) return;
+    onChangeExam(_extends({}, exam, {
+      title: e.target.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,
+        score: DEFAULT_SCORE,
+        questionOrder: maxOrder + 1
+      }])
+    }));
+  };
+  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
+        });
+      }
+    }
+    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]);
+  return {
+    t: t,
+    durationOptions: durationOptions,
+    examGroupByArticle: examGroupByArticle,
+    handleAddArticle: handleAddArticle,
+    handleChangeScoreAnswer: handleChangeScoreAnswer,
+    handleChangeTitle: handleChangeTitle,
+    handleChangeDuration: handleChangeDuration,
+    handleChangeCorrectAnswers: handleChangeCorrectAnswers,
+    handleChangeAnswerCount: handleChangeAnswerCount,
+    handleChangeQuestionCount: handleChangeQuestionCount,
+    handleChangeCategory: handleChangeCategory
+  };
+};
+
+var ExamDetailView = function ExamDetailView(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    categoryOptions = _ref.categoryOptions,
+    exam = _ref.exam,
+    _ref$isUsingMui = _ref.isUsingMui,
+    isUsingMui = _ref$isUsingMui === void 0 ? true : _ref$isUsingMui,
+    isDisabled = _ref.isDisabled,
+    onChangeExam = _ref.onChangeExam;
+  var _useExamDetailView = useExamDetailView({
+      exam: exam,
+      onChangeExam: onChangeExam
+    }),
+    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;
+  return React.createElement(Row, {
+    className: "" + className
+  }, React.createElement(Col, {
+    xs: 5
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    className: "" + styles$2["question-label"],
+    htmlFor: "title"
+  }, t("title")), React.createElement(Input, {
+    disabled: isDisabled,
+    className: "w-100 rounded-2 " + styles$2["question-input"],
+    value: exam.title,
+    id: "title",
+    placeholder: t("enter_title"),
+    onChange: handleChangeTitle
+  }))), React.createElement(Col, {
+    xs: 3
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    className: "" + styles$2["question-label"],
+    htmlFor: "duration"
+  }, t("duration")), React.createElement(CustomSelect, {
+    inputId: "duration",
+    value: exam.duration,
+    options: durationOptions,
+    onChange: handleChangeDuration,
+    isDisabled: isDisabled
+  }))), React.createElement(Col, {
+    xs: 4
+  }), examGroupByArticle.map(function (i, index) {
+    return React.createElement(Col, {
+      xs: 12,
+      key: i.article,
+      className: (index === 0 && !isUsingMui ? "mt-3" : "") + " " + (!isUsingMui ? "mb-4" : "")
+    }, React.createElement(ArticleGroupView, Object.assign({}, i, {
+      categoryOptions: categoryOptions,
+      isActive: index === examGroupByArticle.length - 1,
+      onChangeQuestionCount: handleChangeQuestionCount,
+      onChangeCategory: handleChangeCategory,
+      onChangeAnswerCount: handleChangeAnswerCount,
+      onChangeCorrectAnswers: handleChangeCorrectAnswers,
+      onChangeScoreAnswer: handleChangeScoreAnswer,
+      isDisabled: isDisabled
+    })));
+  }), React.createElement(Col, {
+    xs: 12
+  }, React.createElement(Button, {
+    disabled: isDisabled,
+    className: "w-100 d-flex justify-content-center align-items-center " + styles$2["question-btn"],
+    color: "primary",
+    outline: true,
+    onClick: handleAddArticle
+  }, React.createElement(FaPlusCircle, {
+    className: "me-2"
+  }), "\uBB38\uD56D \uCD94\uAC00\uD558\uAE30")));
+};
+
 var historyCore = createBrowserHistory();
 
-export { ACCESS_TOKEN, BASE_URL, ChatContainer, ChatItemType, CommonAlert, CommonDialog, ConfirmDialog, CustomPagination, CustomSelect, DATE_MIN_VALUE, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, ExamEvent, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, TheLanguageDropdown, api, canAccess as canAccessRoute, diffFromNow, formatTime, getAccessToken$1 as getAccessToken, historyCore, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setUser, store, toISOString, useChatContainer, useConversationList, useGoogleSignOut, usePusherConversation, utcToLocalTime };
+export { ACCESS_TOKEN, BASE_URL, ChatContainer, ChatItemType, CommonAlert, CommonDialog, ConfirmDialog, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, DATE_MIN_VALUE, DATE_TIME_MIN_VALUE, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, ExamDetailView, ExamEvent, LANGUAGES, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, Role, TheLanguageDropdown, api, canAccess as canAccessRoute, diffFromNow, formatTime, getAccessToken$1 as getAccessToken, historyCore, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setUser, store, toISOString, useChatContainer, useConversationList, useGoogleSignOut, useLanguage, usePusherConversation, utcToLocalTime };
 //# sourceMappingURL=index.modern.js.map