mario-education 2.4.71-admin → 3.0.0-admin

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { api, BASE_URL, setAlert, CustomSelector, LinkEditButton, DeleteButtonIcon, EmptyDataAlert, CommonModal, RequiredLabel, ErrorHandler, useFilters, setLoading, setClassList, setModal, QuitPrompt, AddButton, CustomPagination, setConferenceRubricList, SearchBoxContainer, getTextFromHTML, generateRandomString, QuestionCategorySelector, DetailActionButtons, SuggestionCategorySelector, CreatableSelector, setSuggestionList, setStrategyList, UploadFileButton, systemStudentBadge, setBadgeList, getFileUrl, setGoalExampleList, setSubjectList, setLearningSupportCategoryList, apiUpload, utcToLocalTime, DATE_FORMAT, setSemesterList, setBandScoreList, EditButtonIcon, setSchoolBlankDayList, SearchBox, CustomTab, SkillList, QUESTION_TYPES, EMOTIONS, QUESTION_TYPES_OPTIONS, setQuestionList, setQuestionByCategory, setSelectQuestion, setResetQuestionList, setMoveItemQuestion, setEditItemQuesion, DEFAULT_FILTER as DEFAULT_FILTER$1, setReflectionList, setReflectionResultList, DATE_RESULT, StarRatingSelector, editorConfig, TINY_MCE_API_KEY, QuestionTypeSelector, setAssessmentList, FULL_DATE_RESULT, setFeedbackList, setTutorialScreenList, setQuestionCateList, setAssignmentList, setSessionTemplateList, setSessionTemplateGeneralClassList, setCustomAlertList, systemCertificateUpload, setCertificateList, LICENSE_AGGRID } from 'mario-core';
+import { api, BASE_URL, setAlert, CustomSelector, LinkEditButton, DeleteButtonIcon, EmptyDataAlert, CommonModal, RequiredLabel, ErrorHandler, useFilters, setLoading, setClassList, setModal, QuitPrompt, AddButton, CustomPagination, setConferenceRubricList, SearchBoxContainer, getTextFromHTML, generateRandomString, QuestionCategorySelector, DetailActionButtons, SuggestionCategorySelector, CreatableSelector, setSuggestionList, useTranslation, setStrategyList, UploadFileButton, systemStudentBadge, setBadgeList, getFileUrl, setGoalExampleList, setSubjectList, setLearningSupportCategoryList, apiUpload, utcToLocalTime, DATE_FORMAT, setSemesterList, setBandScoreList, EditButtonIcon, setSchoolBlankDayList, SearchBox, CustomTab, SkillList, QUESTION_TYPES, EMOTIONS, QUESTION_TYPES_OPTIONS, setQuestionList, setQuestionByCategory, setSelectQuestion, setResetQuestionList, setMoveItemQuestion, setEditItemQuesion, DEFAULT_FILTER as DEFAULT_FILTER$1, setReflectionList, setReflectionResultList, DATE_RESULT, StarRatingSelector, editorConfig, TINY_MCE_API_KEY, QuestionTypeSelector, setAssessmentList, FULL_DATE_RESULT, setFeedbackList, setTutorialScreenList, setQuestionCateList, setAssignmentList, setSessionTemplateList, setSessionTemplateGeneralClassList, setCustomAlertList, systemCertificateUpload, setCertificateList, LICENSE_AGGRID } from 'mario-core';
 import { LicenseManager } from '@ag-grid-enterprise/core';
 import React, { useState, useRef, useCallback, useEffect, forwardRef, useMemo, Fragment, memo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -1229,14 +1229,14 @@ var CONFERENCE_RUBRIC_TYPES = {
 var FILTER_NAME;
 
 (function (FILTER_NAME) {
-  FILTER_NAME["Calendar"] = "Calendar";
-  FILTER_NAME["Gender"] = "Gender";
-  FILTER_NAME["Grade"] = "Grade";
-  FILTER_NAME["BandScore"] = "Current Grade";
-  FILTER_NAME["StudentName"] = "Student name";
-  FILTER_NAME["TeacherName"] = "Teacher name";
-  FILTER_NAME["StartDate"] = "Start Date";
-  FILTER_NAME["EndDate"] = "End Date";
+  FILTER_NAME["Calendar"] = "calendar";
+  FILTER_NAME["Gender"] = "gender";
+  FILTER_NAME["Grade"] = "grade";
+  FILTER_NAME["BandScore"] = "current_grade";
+  FILTER_NAME["StudentName"] = "student_name";
+  FILTER_NAME["TeacherName"] = "teacher_name";
+  FILTER_NAME["StartDate"] = "start_date";
+  FILTER_NAME["EndDate"] = "end_date";
 })(FILTER_NAME || (FILTER_NAME = {}));
 
 var header$1 = "Conference rubric";
@@ -1483,7 +1483,8 @@ var QuestionList = function QuestionList(_ref) {
       onRemove = _ref.onRemove,
       isTeacherQuestion = _ref.isTeacherQuestion,
       onChangeMandatory = _ref.onChangeMandatory,
-      extraQuestionMandatory = _ref.extraQuestionMandatory;
+      extraQuestionMandatory = _ref.extraQuestionMandatory,
+      isHiddenMandatory = _ref.isHiddenMandatory;
   return React.createElement("div", {
     className: "overflow-y-auto " + styles["question-list-session-template"] + " mt-2"
   }, !!questions && !!questions.length ? React.createElement(Table, {
@@ -1495,7 +1496,7 @@ var QuestionList = function QuestionList(_ref) {
   }, React.createElement("tbody", null, questions.map(function (question) {
     return React.createElement("tr", {
       key: question.id
-    }, React.createElement("td", null, getTextFromHTML(question.text)), React.createElement("td", null, question.isDefaultQuestion ? question.isMandatory ? React.createElement("i", null, "Mandatory") : "" : React.createElement(CustomInput, {
+    }, React.createElement("td", null, getTextFromHTML(question.text)), !isHiddenMandatory ? React.createElement("td", null, question.isDefaultQuestion ? question.isMandatory ? React.createElement("i", null, "Mandatory") : "" : React.createElement(CustomInput, {
       id: "mandatory-" + (isTeacherQuestion ? "teacher" : "student") + "-" + question.text,
       type: "checkbox",
       label: "Mandatory",
@@ -1503,7 +1504,7 @@ var QuestionList = function QuestionList(_ref) {
       onChange: function onChange() {
         return onChangeMandatory(question.id, isTeacherQuestion);
       }
-    })), !question.isDefaultQuestion && React.createElement("td", {
+    })) : null, !question.isDefaultQuestion && React.createElement("td", {
       className: "text-center " + styles["delete-column-question-list-sesstion-template"]
     }, React.createElement(DeleteButtonIcon, {
       onClick: function onClick() {
@@ -1601,7 +1602,8 @@ var QuestionSelector = function QuestionSelector(_ref) {
   var value = _ref.value,
       categoryId = _ref.categoryId,
       onChange = _ref.onChange,
-      externalQuestionIds = _ref.externalQuestionIds;
+      externalQuestionIds = _ref.externalQuestionIds,
+      isDefaultQuestionSurvey = _ref.isDefaultQuestionSurvey;
 
   var _useState = useState([]),
       questions = _useState[0],
@@ -1611,7 +1613,8 @@ var QuestionSelector = function QuestionSelector(_ref) {
     try {
       var _temp2 = _catch(function () {
         return Promise.resolve(get$2({
-          categoryId: categoryId
+          categoryId: categoryId,
+          isDefaultQuestionSurvey: isDefaultQuestionSurvey
         })).then(function (res) {
           var _res$data;
 
@@ -2942,6 +2945,10 @@ var StrategyDetailModal = function StrategyDetailModal(props, ref) {
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var schema = object({
     name: string().required("Name is required")
   });
@@ -2978,10 +2985,10 @@ var StrategyDetailModal = function StrategyDetailModal(props, ref) {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Name"
+      text: t("Name")
     }), React.createElement(Input, {
       name: "name",
-      placeholder: "Strategy name",
+      placeholder: t("strategy_name"),
       value: values.name,
       onChange: function onChange(e) {
         handleChange(e);
@@ -2997,7 +3004,7 @@ var StrategyDetailModal = function StrategyDetailModal(props, ref) {
       type: "textarea",
       rows: 5,
       name: "questionText",
-      placeholder: "Question",
+      placeholder: t("question"),
       value: values.questionText,
       onChange: function onChange(e) {
         handleChange(e);
@@ -3011,7 +3018,7 @@ var StrategyDetailModal = function StrategyDetailModal(props, ref) {
       type: "textarea",
       rows: 5,
       name: "description",
-      placeholder: "Description",
+      placeholder: t("description"),
       value: values.description,
       onChange: function onChange(e) {
         handleChange(e);
@@ -3020,11 +3027,11 @@ var StrategyDetailModal = function StrategyDetailModal(props, ref) {
       onBlur: handleBlur("description")
     })), React.createElement(Col, {
       md: 12
-    }, React.createElement(Label, null, "Best fit"), React.createElement(Input, {
+    }, React.createElement(Label, null, t("best_fit")), React.createElement(Input, {
       type: "textarea",
       rows: 5,
       name: "bestfit",
-      placeholder: "Best fit",
+      placeholder: t("best_fit"),
       value: values.bestfit,
       onChange: function onChange(e) {
         handleChange(e);
@@ -3283,6 +3290,9 @@ var useStrategyDetail = function useStrategyDetail() {
 var LearningStrategyList = function LearningStrategyList() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useLearningStrategyL = useStrategyList(),
       strategyList = _useLearningStrategyL.strategyList,
       totalItems = _useLearningStrategyL.totalItems,
@@ -3327,8 +3337,8 @@ var LearningStrategyList = function LearningStrategyList() {
     className: "fadeIn animated"
   }, React.createElement(StrategyDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit strategy" : "Create strategy",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_strategy") : t("create_strategy"),
+    confirmText: !!id ? t("update") : t("create"),
     onCancel: onCancel,
     onConfirm: onConfirm,
     strategyDetail: strategyDetail,
@@ -3343,14 +3353,14 @@ var LearningStrategyList = function LearningStrategyList() {
   }, React.createElement(Col, {
     md: 8
   }, React.createElement(AddButton, {
-    text: "Create learning strategy",
+    text: t("create_learning_strategy"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of strategies: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_strategies"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12
@@ -3362,13 +3372,13 @@ var LearningStrategyList = function LearningStrategyList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Strategy name"), React.createElement("th", {
+  }, t("strategy_name")), React.createElement("th", {
     className: "align-top"
-  }, "Question"), React.createElement("th", {
+  }, t("question")), React.createElement("th", {
     className: "align-top"
-  }, "Detail"), React.createElement("th", {
+  }, t("detail")), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, strategyList.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, strategyList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -3390,7 +3400,7 @@ var LearningStrategyList = function LearningStrategyList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "strategy"
+    label: t("strategy")
   })), React.createElement(Col, {
     md: 12
   }, React.createElement(CustomPagination, {
@@ -3424,6 +3434,10 @@ var BadgeDetailModal = function BadgeDetailModal(props, ref) {
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: badgeDetail,
     enableReinitialize: true,
@@ -3459,10 +3473,10 @@ var BadgeDetailModal = function BadgeDetailModal(props, ref) {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Name"
+      text: t("Name")
     }), React.createElement(Input, {
       name: "name",
-      placeholder: "Name",
+      placeholder: t("Name"),
       value: values.name,
       onChange: function onChange(e) {
         handleChange(e);
@@ -3474,11 +3488,11 @@ var BadgeDetailModal = function BadgeDetailModal(props, ref) {
     })), React.createElement(Col, {
       md: 12,
       className: "mb-2"
-    }, React.createElement(Label, null, "Description"), React.createElement(Input, {
+    }, React.createElement(Label, null, t("description")), React.createElement(Input, {
       type: "textarea",
       rows: 5,
       name: "description",
-      placeholder: "Description",
+      placeholder: t("description"),
       value: values.description,
       onChange: function onChange(e) {
         handleChange(e);
@@ -3487,7 +3501,7 @@ var BadgeDetailModal = function BadgeDetailModal(props, ref) {
       onBlur: handleBlur("description")
     })))), React.createElement(Col, {
       md: 6
-    }, React.createElement(Label, null, "Badge image"), React.createElement(UploadFileButton, {
+    }, React.createElement(Label, null, t("badge_image")), React.createElement(UploadFileButton, {
       setFile: setFile,
       fileName: values.imgUrl
     }))));
@@ -3765,6 +3779,9 @@ var useBadgeList = function useBadgeList() {
 var BadgeList = function BadgeList() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useBadgeList = useBadgeList(),
       badgeList = _useBadgeList.badgeList,
       totalItems = _useBadgeList.totalItems,
@@ -3810,8 +3827,8 @@ var BadgeList = function BadgeList() {
     className: "fadeIn animated"
   }, React.createElement(BadgeDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit badge" : "Create badge",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_badge") : t("create_badge"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirm,
     onCancel: onCancel,
     badgeDetail: badgeDetail,
@@ -3827,14 +3844,14 @@ var BadgeList = function BadgeList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create badge",
+    text: t("create_badge"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of badges: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_badges"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -3846,13 +3863,13 @@ var BadgeList = function BadgeList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "text-center"
-  }, "Icon"), React.createElement("th", {
+  }, t("icon")), React.createElement("th", {
     className: "align-top"
-  }, "Name"), React.createElement("th", {
+  }, t("name")), React.createElement("th", {
     className: "align-top"
-  }, "Description"), React.createElement("th", {
+  }, t("description")), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, badgeList.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, badgeList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -3878,7 +3895,7 @@ var BadgeList = function BadgeList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "badge"
+    label: t("badge")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -3906,6 +3923,9 @@ var GoalExampleDetailModal = function GoalExampleDetailModal(props, ref) {
       checked = _useState[0],
       setChecked = _useState[1];
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var header = props.header,
       confirmText = props.confirmText,
       onConfirm = props.onConfirm,
@@ -3967,10 +3987,10 @@ var GoalExampleDetailModal = function GoalExampleDetailModal(props, ref) {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Name"
+      text: t("Name")
     }), React.createElement(Input, {
       name: "name",
-      placeholder: "Name",
+      placeholder: t("Name"),
       value: values.name,
       onChange: function onChange(e) {
         handleChange(e);
@@ -3983,7 +4003,7 @@ var GoalExampleDetailModal = function GoalExampleDetailModal(props, ref) {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Short term target examples"
+      text: t("short_term_target_examples")
     }), React.createElement(CreatableSelector, {
       value: value,
       inputValue: inputValue,
@@ -4351,6 +4371,9 @@ var useGoalExampleList = function useGoalExampleList() {
 var GoalExampleList = function GoalExampleList() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useGoalExampleList = useGoalExampleList(),
       goalExampleList = _useGoalExampleList.goalExampleList,
       totalItems = _useGoalExampleList.totalItems,
@@ -4404,8 +4427,8 @@ var GoalExampleList = function GoalExampleList() {
     className: "fadeIn animated"
   }, React.createElement(GoalExampleDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit goal example" : "Create goal example",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_goal_example") : t("create_goal_example"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirm,
     onCancel: onCancel,
     goalExampleDetail: goalExampleDetail,
@@ -4428,14 +4451,14 @@ var GoalExampleList = function GoalExampleList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create goal example",
+    text: t("create_goal_example"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of goal examples: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_goal_examples"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -4447,11 +4470,11 @@ var GoalExampleList = function GoalExampleList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Name"), React.createElement("th", {
+  }, t("Name")), React.createElement("th", {
     className: "align-top"
-  }, "Short term target examples"), React.createElement("th", {
+  }, t("short_term_target_examples")), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, goalExampleList.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, goalExampleList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -4471,7 +4494,7 @@ var GoalExampleList = function GoalExampleList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "goal example"
+    label: t("goal_example")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -4504,6 +4527,10 @@ var SubjectDetailModal = function SubjectDetailModal(props, ref) {
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: subjectDetail,
     enableReinitialize: true,
@@ -4537,10 +4564,10 @@ var SubjectDetailModal = function SubjectDetailModal(props, ref) {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Name"
+      text: t("Name")
     }), React.createElement(Input, {
       name: "name",
-      placeholder: "Name",
+      placeholder: t("Name"),
       value: values.name,
       onChange: function onChange(e) {
         handleChange(e);
@@ -4552,7 +4579,7 @@ var SubjectDetailModal = function SubjectDetailModal(props, ref) {
     })), React.createElement(Col, {
       md: 12,
       className: "mb-2"
-    }, React.createElement(Label, null, "Color"), React.createElement("div", null, React.createElement("input", {
+    }, React.createElement(Label, null, t("color")), React.createElement("div", null, React.createElement("input", {
       type: "color",
       className: styles["input-color-picker"],
       name: "color",
@@ -4563,11 +4590,11 @@ var SubjectDetailModal = function SubjectDetailModal(props, ref) {
       }
     }))), React.createElement(Col, {
       md: 12
-    }, React.createElement(Label, null, "Description"), React.createElement(Input, {
+    }, React.createElement(Label, null, t("description")), React.createElement(Input, {
       type: "textarea",
       rows: 5,
       name: "description",
-      placeholder: "Description",
+      placeholder: t("description"),
       value: values.description,
       onChange: function onChange(e) {
         handleChange(e);
@@ -4825,6 +4852,9 @@ var useSubjectList = function useSubjectList() {
 var SubjectList = function SubjectList() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useSubjectList = useSubjectList(),
       subjectList = _useSubjectList.subjectList,
       totalItems = _useSubjectList.totalItems,
@@ -4869,8 +4899,8 @@ var SubjectList = function SubjectList() {
     className: "fadeIn animated"
   }, React.createElement(SubjectDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit subject" : "Create subject",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_subject") : t("create_subject"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirm,
     onCancel: onCancel,
     subjectDetail: subjectDetail,
@@ -4885,14 +4915,14 @@ var SubjectList = function SubjectList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create subject",
+    text: t("create_subject"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of subjects: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_subjects"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -4904,13 +4934,13 @@ var SubjectList = function SubjectList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Name"), React.createElement("th", {
+  }, t('name')), React.createElement("th", {
     className: "align-top"
-  }, "Description"), React.createElement("th", {
+  }, t('description')), React.createElement("th", {
     className: "align-top"
-  }, "Color"), React.createElement("th", {
+  }, t('color')), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, subjectList.map(function (record) {
+  }, t('action')))), React.createElement("tbody", null, subjectList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -4939,7 +4969,7 @@ var SubjectList = function SubjectList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "subject"
+    label: t("subject")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -4972,6 +5002,10 @@ var LearningSupportCategoryDetailModal = function LearningSupportCategoryDetailM
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: learningSupportCategoryDetail,
     enableReinitialize: true,
@@ -5005,10 +5039,10 @@ var LearningSupportCategoryDetailModal = function LearningSupportCategoryDetailM
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Name"
+      text: t("Name")
     }), React.createElement(Input, {
       name: "name",
-      placeholder: "Name",
+      placeholder: t("Name"),
       value: values.name,
       onChange: function onChange(e) {
         handleChange(e);
@@ -5020,11 +5054,11 @@ var LearningSupportCategoryDetailModal = function LearningSupportCategoryDetailM
     })), React.createElement(Col, {
       md: 12,
       className: "mb-2"
-    }, React.createElement(Label, null, "Description"), React.createElement(Input, {
+    }, React.createElement(Label, null, t("description")), React.createElement(Input, {
       type: "textarea",
       rows: 5,
       name: "description",
-      placeholder: "Description",
+      placeholder: t("description"),
       value: values.description,
       onChange: function onChange(e) {
         handleChange(e);
@@ -5034,7 +5068,7 @@ var LearningSupportCategoryDetailModal = function LearningSupportCategoryDetailM
     })), React.createElement(Col, {
       md: 12,
       className: "mb-2"
-    }, React.createElement(Label, null, "Default Color"), React.createElement("div", null, React.createElement("input", {
+    }, React.createElement(Label, null, t("default_color")), React.createElement("div", null, React.createElement("input", {
       type: "color",
       className: styles["input-color-picker"],
       name: "defaultColor",
@@ -5323,6 +5357,9 @@ var useLearningSupportCategoryList = function useLearningSupportCategoryList() {
 var LearningSupportCategoryList = function LearningSupportCategoryList() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useLearningSupportCa = useLearningSupportCategoryList(),
       learningSupportCategoryList = _useLearningSupportCa.learningSupportCategoryList,
       totalItems = _useLearningSupportCa.totalItems,
@@ -5367,8 +5404,8 @@ var LearningSupportCategoryList = function LearningSupportCategoryList() {
     className: "fadeIn animated"
   }, React.createElement(LearningSupportCategoryDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit learning support category" : "Create learning support category",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_learning_support_category") : t("create_learning_support_category"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirm,
     onCancel: onCancel,
     learningSupportCategoryDetail: learningSupportCategoryDetail,
@@ -5383,14 +5420,14 @@ var LearningSupportCategoryList = function LearningSupportCategoryList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create category",
+    text: t("Create category"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of learning support categories: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_learning_support_categories"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -5400,9 +5437,9 @@ var LearningSupportCategoryList = function LearningSupportCategoryList() {
     striped: true,
     responsive: true,
     size: "sm"
-  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Name"), React.createElement("th", null, "Description"), React.createElement("th", null, "Color"), React.createElement("th", {
+  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, t('name')), React.createElement("th", null, t('description')), React.createElement("th", null, t('color')), React.createElement("th", {
     className: "text-center align-middle"
-  }, "Action"))), React.createElement("tbody", null, learningSupportCategoryList.map(function (record) {
+  }, t('action')))), React.createElement("tbody", null, learningSupportCategoryList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -5971,6 +6008,10 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: semesterDetail,
     enableReinitialize: true,
@@ -6004,10 +6045,10 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Name"
+      text: t("Name")
     }), React.createElement(Input, {
       name: "name",
-      placeholder: "Name",
+      placeholder: t("Name"),
       value: values.name,
       onChange: function onChange(e) {
         handleChange(e);
@@ -6023,7 +6064,7 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
       md: 3,
       className: "d-flex align-items-center"
     }, React.createElement(RequiredLabel, {
-      text: "Start date"
+      text: t("Start date")
     })), React.createElement(Col, {
       md: 6
     }, React.createElement(DatePicker, {
@@ -6038,13 +6079,13 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
         formikProps.setFieldValue("startTime", format(e, DATE_FORMAT));
         setEditedTrue();
       },
-      placeholderText: "Start date",
+      placeholderText: t("Start date"),
       customInput: React.createElement(Input, {
         type: "text",
         style: {
           width: "maxContent"
         },
-        placeholder: "Start date"
+        placeholder: t("Start date")
       })
     }), touched.startTime && errors.startTime && React.createElement(ErrorHandler, {
       text: errors.startTime
@@ -6054,7 +6095,7 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
       md: 3,
       className: "d-flex align-items-center"
     }, React.createElement(RequiredLabel, {
-      text: "End date"
+      text: t("End date")
     })), React.createElement(Col, {
       md: 6
     }, React.createElement(DatePicker, {
@@ -6069,13 +6110,13 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
         formikProps.setFieldValue("endTime", format(e, DATE_FORMAT));
         setEditedTrue();
       },
-      placeholderText: "End date",
+      placeholderText: t("End date"),
       customInput: React.createElement(Input, {
         type: "text",
         style: {
           width: "maxContent"
         },
-        placeholder: "End date"
+        placeholder: t("End date")
       })
     }), touched.endTime && errors.endTime && React.createElement(ErrorHandler, {
       text: errors.endTime
@@ -6135,6 +6176,10 @@ var BreakingMonthModal = function BreakingMonthModal(props, ref) {
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: breakingMonthDetail,
     enableReinitialize: true,
@@ -6166,9 +6211,9 @@ var BreakingMonthModal = function BreakingMonthModal(props, ref) {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "School year break month"
+      text: t("school_year_break_month")
     }), React.createElement(CustomSelector, {
-      name: "Breaking month",
+      name: t("breaking_month"),
       isRequired: true,
       value: options.find(function (o) {
         return o.value === values.value;
@@ -6552,6 +6597,9 @@ var SemesterList = function SemesterList() {
   var semesterModal = useRef();
   var breakingMonthModal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useSemesterList = useSemesterList(),
       semesterList = _useSemesterList.semesterList,
       totalItems = _useSemesterList.totalItems,
@@ -6611,8 +6659,8 @@ var SemesterList = function SemesterList() {
     className: "fadeIn animated"
   }, React.createElement(SemesterDetailModal$1, {
     ref: semesterModal,
-    header: !!id ? "Edit semester" : "Create semester",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_semester") : t("create_semester"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirmSemester,
     onCancel: onCancelSemester,
     semesterDetail: semesterDetail,
@@ -6622,8 +6670,8 @@ var SemesterList = function SemesterList() {
     setEditedFalse: setEditedFalse
   }), React.createElement(BreakingMonthModal$1, {
     ref: breakingMonthModal,
-    header: "Update school break month",
-    confirmText: "Update",
+    header: t("update_school_break_month"),
+    confirmText: t("update"),
     breakingMonthDetail: breakingMonthDetail,
     onConfirm: onConfirmBreakingMonth,
     edited: edited,
@@ -6637,14 +6685,14 @@ var SemesterList = function SemesterList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create semester",
+    text: t("create_semester"),
     onClick: function onClick() {
       return openSemesterModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of semesters: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_semesters"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -6656,13 +6704,13 @@ var SemesterList = function SemesterList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Name"), React.createElement("th", {
+  }, t("Name")), React.createElement("th", {
     className: "align-top"
-  }, "Start Date"), React.createElement("th", {
+  }, t("start_date")), React.createElement("th", {
     className: "align-top"
-  }, "End Date"), React.createElement("th", {
+  }, t("end_date")), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, semesterList.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, semesterList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -6684,7 +6732,7 @@ var SemesterList = function SemesterList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "semester"
+    label: t("semester")
   }), React.createElement(CustomPagination, {
     filters: filters,
     totalRecordCount: totalItems,
@@ -6702,7 +6750,7 @@ var SemesterList = function SemesterList() {
     md: 4
   }, React.createElement(Card, null, React.createElement(CardBody, null, React.createElement(CardTitle, {
     tag: "h5"
-  }, "Breaking month"), React.createElement("div", {
+  }, t("breaking_month")), React.createElement("div", {
     style: {
       border: "1px splid black",
       minHeight: "35px"
@@ -6713,7 +6761,7 @@ var SemesterList = function SemesterList() {
       return openBreakingMonthModal();
     },
     color: "primary"
-  }, "Change breaking month"))))));
+  }, t("change_breaking_month")))))));
 };
 
 var schema$7 = object({
@@ -6731,6 +6779,10 @@ var BandScoreDetailModal = function BandScoreDetailModal(props, ref) {
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: bandScoreDetail,
     enableReinitialize: true,
@@ -6758,11 +6810,11 @@ var BandScoreDetailModal = function BandScoreDetailModal(props, ref) {
     }, React.createElement(Row, null, React.createElement(Col, {
       md: 12
     }, React.createElement(RequiredLabel, {
-      text: "Label"
+      text: t("Label")
     }), React.createElement(Input, {
       type: "textarea",
       name: "label",
-      placeholder: "Label",
+      placeholder: t("Label"),
       value: values.label,
       onChange: function onChange(e) {
         handleChange(e);
@@ -6775,11 +6827,11 @@ var BandScoreDetailModal = function BandScoreDetailModal(props, ref) {
       md: 12,
       className: "pt-2"
     }, React.createElement(RequiredLabel, {
-      text: "Value"
+      text: t("Value")
     }), React.createElement(Input, {
       type: "number",
       name: "value",
-      placeholder: "Value",
+      placeholder: t("Value"),
       value: values.value,
       onChange: function onChange(e) {
         handleChange(e);
@@ -7106,6 +7158,9 @@ var useBreakPoint = function useBreakPoint() {
 var BandScoreList = function BandScoreList() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useBandScoreList = useBandScoreList(),
       bandScoreList = _useBandScoreList.bandScoreList,
       totalItems = _useBandScoreList.totalItems,
@@ -7153,8 +7208,8 @@ var BandScoreList = function BandScoreList() {
     className: "fadeIn animated"
   }, React.createElement(BandScoreDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit  point" : "Create new point",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_point") : t("create_new_point"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirm,
     onCancel: onCancel,
     bandScoreDetail: bandScoreDetail,
@@ -7171,14 +7226,14 @@ var BandScoreList = function BandScoreList() {
   }, React.createElement(Col, {
     md: 6
   }, React.createElement(AddButton, {
-    text: "Create new point",
+    text: t("create_new_point"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 6,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of point: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_point"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12
@@ -7190,11 +7245,11 @@ var BandScoreList = function BandScoreList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Label"), React.createElement("th", {
+  }, t("label")), React.createElement("th", {
     className: "align-top"
-  }, "Value"), React.createElement("th", {
+  }, t("value")), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, bandScoreList.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, bandScoreList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -7223,7 +7278,7 @@ var BandScoreList = function BandScoreList() {
     }
   }, React.createElement(CardBody, null, React.createElement(CardTitle, {
     tag: "h5"
-  }, "Break point"), React.createElement("div", {
+  }, t("break_point")), React.createElement("div", {
     style: {
       border: "1px splid black",
       minHeight: "35px"
@@ -7250,7 +7305,7 @@ var BandScoreList = function BandScoreList() {
       fontWeight: 500
     },
     className: "mb-0"
-  }, "Update break point")))))));
+  }, t("update_break_point"))))))));
 };
 
 var CURRENT_SERVICE_URL = BASE_URL + "/api/License";
@@ -7350,6 +7405,9 @@ var CurrentLicense = function CurrentLicense() {
       currentLicense = _useCurrentLicense.currentLicense,
       createRequestNewLicense = _useCurrentLicense.createRequestNewLicense;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement("div", {
     className: "fadeIn animated"
   }, React.createElement(Row, {
@@ -7365,17 +7423,17 @@ var CurrentLicense = function CurrentLicense() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Name"), React.createElement("th", {
+  }, t("Name")), React.createElement("th", {
     className: "align-top"
-  }, "Maximum number of admins"), React.createElement("th", {
+  }, t("maximum_number_of_admins")), React.createElement("th", {
     className: "align-top"
-  }, "Maximum number of assistants"), React.createElement("th", {
+  }, t("maximum_number_of_assistants")), React.createElement("th", {
     className: "align-top"
-  }, "Maximum number of students"), React.createElement("th", {
+  }, t("maximum_number_of_students")), React.createElement("th", {
     className: "align-top"
-  }, "Maximum number of teachers"), React.createElement("th", {
+  }, t("maximum_number_of_teachers")), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, allPlans.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, allPlans.map(function (record) {
     var isCurrentLicense = currentLicense && currentLicense.id == record.id;
     return React.createElement("tr", {
       key: record.id
@@ -7393,7 +7451,7 @@ var CurrentLicense = function CurrentLicense() {
       className: "d-flex justify-content-center align-items-center"
     }, currentLicense && currentLicense.id == record.id ? null : React.createElement(AiOutlineSend, {
       className: "cursor-pointer",
-      title: "Request to this plan",
+      title: t("request_to_this_plan"),
       onClick: function onClick() {
         createRequestNewLicense(record.id);
       }
@@ -7419,6 +7477,10 @@ var SchoolBlankDayDetailModal = function SchoolBlankDayDetailModal(props, ref) {
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: schoolBlankDayDetail,
     enableReinitialize: true,
@@ -7454,10 +7516,10 @@ var SchoolBlankDayDetailModal = function SchoolBlankDayDetailModal(props, ref) {
     }, React.createElement(FormGroup, {
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Name"
+      text: t("Name")
     }), React.createElement(Input, {
       name: "name",
-      placeholder: "Name",
+      placeholder: t("Name"),
       value: values.name,
       onChange: function onChange(e) {
         handleChange(e);
@@ -7469,14 +7531,14 @@ var SchoolBlankDayDetailModal = function SchoolBlankDayDetailModal(props, ref) {
     })), React.createElement(FormGroup, {
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Start time"
+      text: t("start_time")
     }), React.createElement(DatePicker, {
       todayButton: "Today",
       peekNextMonth: true,
       showMonthDropdown: true,
       showYearDropdown: true,
       dropdownMode: "select",
-      placeholderText: "Start time",
+      placeholderText: t("start_time"),
       selected: values.startTime ? new Date(values.startTime) : null,
       onChange: function onChange(e) {
         setFieldValue("startTime", format$1(e, DATE_FORMAT));
@@ -7491,14 +7553,14 @@ var SchoolBlankDayDetailModal = function SchoolBlankDayDetailModal(props, ref) {
     })), React.createElement(FormGroup, {
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "End time"
+      text: t("end_time")
     }), React.createElement(DatePicker, {
       todayButton: "Today",
       peekNextMonth: true,
       showMonthDropdown: true,
       showYearDropdown: true,
       dropdownMode: "select",
-      placeholderText: "End time",
+      placeholderText: t("end_time"),
       selected: values.endTime ? new Date(values.endTime) : null,
       onChange: function onChange(e) {
         setFieldValue("endTime", format$1(e, DATE_FORMAT));
@@ -7761,6 +7823,9 @@ var useSchoolBlankDayList = function useSchoolBlankDayList() {
 var SchoolBlankDayList = function SchoolBlankDayList() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useShoolBlankDayList = useSchoolBlankDayList(),
       schoolBlankDayList = _useShoolBlankDayList.schoolBlankDayList,
       totalItems = _useShoolBlankDayList.totalItems,
@@ -7805,8 +7870,8 @@ var SchoolBlankDayList = function SchoolBlankDayList() {
     className: "fadeIn animated"
   }, React.createElement(SchoolBlankDayDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit blank day" : "Create blank day",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_blank_day") : t("create_blank_day"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirm,
     onCancel: onCancel,
     schoolBlankDayDetail: schoolBlankDayDetail,
@@ -7821,14 +7886,14 @@ var SchoolBlankDayList = function SchoolBlankDayList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create blank day",
+    text: t("create_blank_day"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of blank days: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_blank_days"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -7840,13 +7905,13 @@ var SchoolBlankDayList = function SchoolBlankDayList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Name"), React.createElement("th", {
+  }, t("name")), React.createElement("th", {
     className: "align-top"
-  }, "Start time"), React.createElement("th", {
+  }, t("start_time")), React.createElement("th", {
     className: "align-top"
-  }, "End time"), React.createElement("th", {
+  }, t("end_time")), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, schoolBlankDayList.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, schoolBlankDayList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -7868,7 +7933,7 @@ var SchoolBlankDayList = function SchoolBlankDayList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "school blank day"
+    label: t("school_blank_day")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -8129,9 +8194,9 @@ var UserDeletedModal = function UserDeletedModal(props, ref) {
       options = props.options,
       teacherChangeId = props.teacherChangeId,
       setTeacherChangeId = props.setTeacherChangeId;
-  console.log({
-    hags: userChoiced.id
-  });
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
 
   var getFile = function getFile() {
     var url = window.location.origin + "/api/ExportDataUser/" + userChoiced.id;
@@ -8147,33 +8212,33 @@ var UserDeletedModal = function UserDeletedModal(props, ref) {
   }, React.createElement(Row, null, React.createElement(Col, {
     md: 12,
     className: "mb-2"
-  }, React.createElement("p", null, "Export user data"), React.createElement("div", {
+  }, React.createElement("p", null, t("export_user_data")), React.createElement("div", {
     className: "pb-3"
   }, React.createElement(Button, {
     color: "success",
     onClick: function onClick() {
       getFile();
     }
-  }, "Download user's data")), React.createElement("p", null, "Delete user"), !!userChoiced && React.createElement("div", null, userChoiced.roles.includes("Student") && React.createElement("div", null, React.createElement(Alert, {
+  }, t("Download user's data"))), React.createElement("p", null, "Delete user"), !!userChoiced && React.createElement("div", null, userChoiced.roles.includes("Student") && React.createElement("div", null, React.createElement(Alert, {
     color: "danger"
-  }, "All data of this user will be permanently deleted from the system. Please export before continuing"), React.createElement(Button, {
+  }, t("alert_delete_user")), React.createElement(Button, {
     color: "danger",
     onClick: function onClick() {
       return removeData(userChoiced.id);
     }
-  }, "Delete user")), userChoiced.roles.includes("Admin") && React.createElement("div", null, React.createElement(Alert, {
+  }, t("delete_user"))), userChoiced.roles.includes("Admin") && React.createElement("div", null, React.createElement(Alert, {
     color: "danger"
-  }, "All data of this user will be permanently deleted from the system. Please export before continuing"), React.createElement(Button, {
+  }, t("alert_delete_user")), React.createElement(Button, {
     color: "danger",
     onClick: function onClick() {
       return removeData(userChoiced.id);
     }
-  }, "Delete user")), userChoiced.roles.includes("Teacher") && React.createElement("div", null, React.createElement(Alert, {
+  }, t("delete_user"))), userChoiced.roles.includes("Teacher") && React.createElement("div", null, React.createElement(Alert, {
     color: "warning"
-  }, "A teacher must be selected before deleting this teacher. We will transfer the entire class and students to this teacher before deleting all of this teacher's data."), React.createElement(CustomSelector, {
+  }, t("alert_delete_user")), React.createElement(CustomSelector, {
     options: options,
     defaultValue: teacherChangeId,
-    placeholder: "Select teacher change",
+    placeholder: "select_teacher_change",
     onChange: function onChange(e) {
       return setTeacherChangeId(e.value);
     }
@@ -8181,24 +8246,24 @@ var UserDeletedModal = function UserDeletedModal(props, ref) {
     className: "mt-2"
   }, React.createElement(Alert, {
     color: "danger"
-  }, "All data of this user will be permanently deleted from the system. Please export before continuing"), React.createElement(Button, {
+  }, t("alert_delete_user")), React.createElement(Button, {
     color: "danger",
     onClick: function onClick() {
       return removeData(userChoiced.id);
     }
-  }, "Delete user"))), userChoiced.roles.includes("Parent") && React.createElement("div", null, React.createElement(Alert, {
+  }, t("delete_user")))), userChoiced.roles.includes("Parent") && React.createElement("div", null, React.createElement(Alert, {
     color: "danger"
-  }, "All data of this user will be permanently deleted from the system. Please export before continuing"), React.createElement(Button, {
+  }, t("alert_delete_user")), React.createElement(Button, {
     color: "danger",
     onClick: function onClick() {
       return removeData(userChoiced.id);
     }
-  }, "Delete user"))))));
+  }, t("delete_user")))))));
 };
 
 var UserDeletedModal$1 = forwardRef(UserDeletedModal);
 
-var header$3 = "User deleted";
+var header$3 = "user_deleted";
 
 var UserList = function UserList() {
   var _useUserDeletedList = useUserDeletedList(),
@@ -8216,6 +8281,9 @@ var UserList = function UserList() {
       setTeacherChangeId = _useUserDeletedList.setTeacherChangeId,
       resetData = _useUserDeletedList.resetData;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var choiceUser = function choiceUser(userChoiced) {
     !!userChoiced && setUserChoiced(userChoiced);
     openModal();
@@ -8225,7 +8293,7 @@ var UserList = function UserList() {
     className: "fadeIn animated"
   }, React.createElement("h5", {
     className: "mb-2"
-  }, header$3), React.createElement(Row, {
+  }, t(header$3)), React.createElement(Row, {
     className: "my-2"
   }, React.createElement(Col, {
     md: 8
@@ -8236,11 +8304,11 @@ var UserList = function UserList() {
         searchString: searchString
       });
     },
-    placeholder: "Type something to search reflection result"
+    placeholder: t("type_something_to_search_reflection_result")
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex justify-content-end align-items-center"
-  }, "Total of users: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_users"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12
@@ -8252,11 +8320,11 @@ var UserList = function UserList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Name"), React.createElement("th", {
+  }, t("name")), React.createElement("th", {
     className: "align-top"
-  }, "Email"), React.createElement("th", {
+  }, t("email")), React.createElement("th", {
     className: "align-top"
-  }, "Role"))), React.createElement("tbody", null, userList.map(function (record) {
+  }, t("role")))), React.createElement("tbody", null, userList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -8492,13 +8560,17 @@ var SwitchTeacherModal = function SwitchTeacherModal(props, ref) {
       options = props.options,
       teacherChangeId = props.teacherChangeId,
       setTeacherChangeId = props.setTeacherChangeId;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var valueDefault = options === null || options === void 0 ? void 0 : options.find(function (item) {
     return item.value == teacherChangeId;
   });
   return React.createElement(CommonModal, {
     header: header,
     ref: ref,
-    confirmText: "Change Save",
+    confirmText: t("change_save"),
     onConfirm: function onConfirm() {
       return removeData(teacherChangeId, userChoiced.id);
     },
@@ -8510,16 +8582,16 @@ var SwitchTeacherModal = function SwitchTeacherModal(props, ref) {
     className: "mb-2"
   }, React.createElement("p", {
     className: "font-weight-bold"
-  }, "Student Name"), React.createElement("p", null, userChoiced.studentName, " "), React.createElement("p", {
+  }, t("student_name")), React.createElement("p", null, userChoiced.studentName, " "), React.createElement("p", {
     className: "font-weight-bold"
-  }, "Student Email"), React.createElement("p", null, userChoiced.emailStudent, " "), React.createElement("p", {
+  }, t("student_email")), React.createElement("p", null, userChoiced.emailStudent, " "), React.createElement("p", {
     className: "font-weight-bold"
-  }, "Current Teacher Name"), React.createElement("p", null, userChoiced.teacherName, " "), React.createElement("p", {
+  }, t("current_teacher_name")), React.createElement("p", null, userChoiced.teacherName, " "), React.createElement("p", {
     className: "font-weight-bold"
-  }, "Current Teacher Email"), React.createElement("p", null, userChoiced.emailTeacher, " "), !!userChoiced && React.createElement(CustomSelector, {
+  }, t("current_teacher_email")), React.createElement("p", null, userChoiced.emailTeacher, " "), !!userChoiced && React.createElement(CustomSelector, {
     options: options,
     value: valueDefault,
-    placeholder: "Select teacher change",
+    placeholder: t("select_teacher_change"),
     onChange: function onChange(e) {
       return setTeacherChangeId(e.value);
     }
@@ -8528,7 +8600,7 @@ var SwitchTeacherModal = function SwitchTeacherModal(props, ref) {
 
 var SwitchTeacherModal$1 = forwardRef(SwitchTeacherModal);
 
-var header$4 = "List Students";
+var header$4 = "list_students";
 
 var SwitchTeacherList = function SwitchTeacherList() {
   var _useSwitchTeacher = useSwitchTeacher(),
@@ -8546,6 +8618,9 @@ var SwitchTeacherList = function SwitchTeacherList() {
       removeData = _useSwitchTeacher.removeData,
       resetData = _useSwitchTeacher.resetData;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var choiceUser = function choiceUser(userChoiced) {
     !!userChoiced && setUserChoiced(userChoiced);
     setTeacherChangeId(userChoiced.teacherUserId);
@@ -8556,7 +8631,7 @@ var SwitchTeacherList = function SwitchTeacherList() {
     className: "fadeIn animated"
   }, React.createElement("h5", {
     className: "mt-4 mb-2"
-  }, header$4), React.createElement(Row, {
+  }, t(header$4)), React.createElement(Row, {
     className: "my-2"
   }, React.createElement(Col, {
     md: 8
@@ -8567,11 +8642,11 @@ var SwitchTeacherList = function SwitchTeacherList() {
         searchString: searchString
       });
     },
-    placeholder: "Type something to search reflection result"
+    placeholder: t("type_something_to_search_reflection_result")
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex justify-content-end align-items-center"
-  }, "Total of users: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_users"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12
@@ -8583,13 +8658,13 @@ var SwitchTeacherList = function SwitchTeacherList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Student Name"), React.createElement("th", {
+  }, t("student_name")), React.createElement("th", {
     className: "align-top"
-  }, "Student Email"), React.createElement("th", {
+  }, t("student_email")), React.createElement("th", {
     className: "align-top"
-  }, "Current Teacher Name"), React.createElement("th", {
+  }, t("current_teacher_name")), React.createElement("th", {
     className: "align-top"
-  }, "Current Teacher Email"))), React.createElement("tbody", null, !!userList && userList.length > 0 && userList.map(function (record) {
+  }, t("current_teacher_email")))), React.createElement("tbody", null, !!userList && userList.length > 0 && userList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -8896,10 +8971,14 @@ var SwitchAssistantModal = function SwitchAssistantModal(_ref, ref) {
   var valueDefault = options === null || options === void 0 ? void 0 : options.find(function (item) {
     return item.value == assistantChangeId;
   });
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(CommonModal, {
     header: header,
     ref: ref,
-    confirmText: "Change Save",
+    confirmText: t("change_save"),
     onConfirm: function onConfirm() {
       return removeData(assistantChangeId, userChoiced.id);
     },
@@ -8911,16 +8990,16 @@ var SwitchAssistantModal = function SwitchAssistantModal(_ref, ref) {
     className: "mb-2"
   }, React.createElement("p", {
     className: "font-weight-bold"
-  }, "Student Name"), React.createElement("p", null, userChoiced.studentName, " "), React.createElement("p", {
+  }, t('student_name')), React.createElement("p", null, userChoiced.studentName, " "), React.createElement("p", {
     className: "font-weight-bold"
-  }, "Student Email"), React.createElement("p", null, userChoiced.emailStudent), React.createElement("p", {
+  }, t("student_email")), React.createElement("p", null, userChoiced.emailStudent), React.createElement("p", {
     className: "font-weight-bold"
-  }, "Current Assistant Name"), React.createElement("p", null, userChoiced.assistantName), React.createElement("p", {
+  }, t("current_assistant_name")), React.createElement("p", null, userChoiced.assistantName), React.createElement("p", {
     className: "font-weight-bold"
-  }, "Current Assistant Email"), React.createElement("p", null, userChoiced.emailAssistant), !!userChoiced && React.createElement(CustomSelector, {
+  }, t("current_assistant_email")), React.createElement("p", null, userChoiced.emailAssistant), !!userChoiced && React.createElement(CustomSelector, {
     options: options,
     value: valueDefault,
-    placeholder: "Select Assistant change",
+    placeholder: t("select_assistant_change"),
     onChange: function onChange(e) {
       return setAssistantChangeId(e.value);
     }
@@ -8929,7 +9008,7 @@ var SwitchAssistantModal = function SwitchAssistantModal(_ref, ref) {
 
 var SwitchAssistantModal$1 = forwardRef(SwitchAssistantModal);
 
-var header$5 = "List Students";
+var header$5 = "list_students";
 
 var SwitchAssistantList = function SwitchAssistantList() {
   var _useSwitchTeacher = useSwitchAssistant(),
@@ -8947,11 +9026,14 @@ var SwitchAssistantList = function SwitchAssistantList() {
       choiceUser = _useSwitchTeacher.choiceUser,
       onDeleteAssistant = _useSwitchTeacher.onDeleteAssistant;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement("div", {
     className: "fadeIn animated"
   }, React.createElement("h5", {
     className: "mt-4 mb-2"
-  }, header$5), React.createElement(Row, {
+  }, t(header$5)), React.createElement(Row, {
     className: "my-2"
   }, React.createElement(Col, {
     md: 8
@@ -8962,11 +9044,11 @@ var SwitchAssistantList = function SwitchAssistantList() {
         searchString: searchString
       });
     },
-    placeholder: "Type something to search reflection result"
+    placeholder: t("type_something_to_search_reflection_result")
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex justify-content-end align-items-center"
-  }, "Total of users: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_users"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12
@@ -8978,15 +9060,15 @@ var SwitchAssistantList = function SwitchAssistantList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Student Name"), React.createElement("th", {
+  }, t("student_name")), React.createElement("th", {
     className: "align-top"
-  }, "Student Email"), React.createElement("th", {
+  }, t("student_email")), React.createElement("th", {
     className: "align-top"
-  }, "Current Assistant Name"), React.createElement("th", {
+  }, t("current_assistant_name")), React.createElement("th", {
     className: "align-top"
-  }, "Current Assistant Email"), React.createElement("th", {
+  }, t("current_assistant_email")), React.createElement("th", {
     className: "align-top"
-  }, "Remove Assistant"))), React.createElement("tbody", null, !!userList && userList.length > 0 && userList.map(function (record) {
+  }, t("remove_assistant")))), React.createElement("tbody", null, !!userList && userList.length > 0 && userList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -9028,7 +9110,7 @@ var SwitchAssistantList = function SwitchAssistantList() {
     }
   }))), React.createElement(SwitchAssistantModal$1, {
     ref: modal,
-    header: "Switch Assistant",
+    header: t("switch_assistant"),
     userChoiced: userChoiced,
     removeData: removeData,
     options: options,
@@ -9235,6 +9317,9 @@ var WelcomeEmailResend = function WelcomeEmailResend() {
       isCheckAll = _useGetUserList.isCheckAll,
       isCheck = _useGetUserList.isCheck;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useResendMail = useResendMail(),
       handleSendMultiUsers = _useResendMail.handleSendMultiUsers,
       handleSendSingleUser = _useResendMail.handleSendSingleUser;
@@ -9243,7 +9328,7 @@ var WelcomeEmailResend = function WelcomeEmailResend() {
     className: "fadeIn animated"
   }, React.createElement("h5", {
     className: "mt-4 mb-2"
-  }, "Welcome Email Re-send"), React.createElement(Row, {
+  }, t("welcome_email_resend")), React.createElement(Row, {
     className: "my-2"
   }, React.createElement(Col, {
     md: 8
@@ -9254,18 +9339,18 @@ var WelcomeEmailResend = function WelcomeEmailResend() {
         searchString: searchString
       });
     },
-    placeholder: "Type something to search by user name"
+    placeholder: t("type_something_to_search_by_user_name")
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex justify-content-end align-items-center"
-  }, "Total of users: ", totalItem)), React.createElement(Row, {
+  }, t("total_of_users"), ": ", totalItem)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, null, React.createElement(Button, {
     onClick: function onClick() {
       return handleSendMultiUsers(isCheck);
     },
     color: "primary"
-  }, "Send for selected users"))), React.createElement(Row, {
+  }, t("send_for_selected_users")))), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12
@@ -9283,13 +9368,13 @@ var WelcomeEmailResend = function WelcomeEmailResend() {
     checked: isCheckAll
   })), React.createElement("th", {
     className: "align-top"
-  }, "User Name"), React.createElement("th", {
+  }, t("user_name")), React.createElement("th", {
     className: "align-top"
-  }, "User Email"), React.createElement("th", {
+  }, t("user_email")), React.createElement("th", {
     className: "align-top"
-  }, "Role"), React.createElement("th", {
+  }, t("role")), React.createElement("th", {
     className: "align-top"
-  }, "Action"))), React.createElement("tbody", null, userList.map(function (item) {
+  }, t("action")))), React.createElement("tbody", null, userList.map(function (item) {
     return React.createElement("tr", {
       key: item.id
     }, React.createElement("td", {
@@ -9357,6 +9442,9 @@ var QuestionDetailModal = function QuestionDetailModal(props, ref) {
       typeQuestion = _useState[0],
       setTypeQuestion = _useState[1];
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: questionDetail,
     enableReinitialize: true,
@@ -9397,10 +9485,10 @@ var QuestionDetailModal = function QuestionDetailModal(props, ref) {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Question"
+      text: t("question")
     }), React.createElement(Input, {
       name: "question",
-      placeholder: "Question",
+      placeholder: t("question"),
       value: values.question,
       onChange: function onChange(e) {
         handleChange(e);
@@ -9413,7 +9501,7 @@ var QuestionDetailModal = function QuestionDetailModal(props, ref) {
       className: "mb-2"
     }, React.createElement(Label, null, "Level"), React.createElement("div", null, React.createElement(Input, {
       name: "level",
-      placeholder: "Level",
+      placeholder: t("level"),
       value: values.level,
       onChange: function onChange(e) {
         handleChange(e);
@@ -9422,9 +9510,9 @@ var QuestionDetailModal = function QuestionDetailModal(props, ref) {
     }))), React.createElement(Col, {
       md: 12,
       className: "mb-2"
-    }, React.createElement(Label, null, "Category"), React.createElement(Input, {
+    }, React.createElement(Label, null, t("category")), React.createElement(Input, {
       name: "category",
-      placeholder: "Category",
+      placeholder: t("category"),
       value: values.category,
       onChange: function onChange(e) {
         handleChange(e);
@@ -9433,7 +9521,7 @@ var QuestionDetailModal = function QuestionDetailModal(props, ref) {
     })), React.createElement(Col, {
       md: 12,
       className: "mb-2"
-    }, React.createElement(Label, null, "Use for"), React.createElement(CustomSelector, {
+    }, React.createElement(Label, null, t("use_for")), React.createElement(CustomSelector, {
       name: "typeScaffolding",
       isRequired: true,
       value: options$1.find(function (o) {
@@ -9763,6 +9851,9 @@ var useQuestionList = function useQuestionList() {
 var QuestionScaffolding = function QuestionScaffolding() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useQuestionList = useQuestionList(),
       questionScaffoldingList = _useQuestionList.questionScaffoldingList,
       totalItems = _useQuestionList.totalItems,
@@ -9809,8 +9900,8 @@ var QuestionScaffolding = function QuestionScaffolding() {
     className: "fadeIn animated"
   }, React.createElement(QuestionDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit Question" : "Create Question",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("Edit Question") : t("Create Question"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirm,
     onCancel: onCancel,
     questionDetail: questionDetail,
@@ -9825,14 +9916,14 @@ var QuestionScaffolding = function QuestionScaffolding() {
   }, React.createElement(Col, {
     md: 8
   }, React.createElement(AddButton, {
-    text: "Create Question",
+    text: t("Create Question"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of questions: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_questions"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12
@@ -9865,7 +9956,7 @@ var QuestionScaffolding = function QuestionScaffolding() {
     }))));
   }), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, questionScaffoldingList.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, questionScaffoldingList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -9968,7 +10059,7 @@ var useTrainingLink = function useTrainingLink() {
           setLinkTraining(res.data);
           dispatch(setAlert({
             type: "success",
-            message: "Update subject successfully"
+            message: "Update link successfully"
           }));
         });
       }, function (err) {
@@ -9999,6 +10090,9 @@ var Training = function Training() {
       linkTraining = _useTrainingLink.linkTraining,
       updateData = _useTrainingLink.updateData;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: linkTraining,
     enableReinitialize: true,
@@ -10017,7 +10111,7 @@ var Training = function Training() {
       style: {
         fontWeight: 700
       }
-    }, "Admin training:"), React.createElement(Input, {
+    }, t("admin_training"), ":"), React.createElement(Input, {
       name: "adminTraining",
       placeholder: "Admin training",
       value: values.adminTraining,
@@ -10034,7 +10128,7 @@ var Training = function Training() {
       }
     }, "Teacher training:"), React.createElement(Input, {
       name: "teacherTraining",
-      placeholder: "Teacher training",
+      placeholder: t("teacher_training"),
       value: values.teacherTraining,
       onChange: function onChange(e) {
         handleChange(e);
@@ -10047,9 +10141,9 @@ var Training = function Training() {
       style: {
         fontWeight: 700
       }
-    }, "Student training:"), React.createElement(Input, {
+    }, t("student_training"), ":"), React.createElement(Input, {
       name: "studentTraining",
-      placeholder: "Student training",
+      placeholder: t("student_training"),
       value: values.studentTraining,
       onChange: function onChange(e) {
         handleChange(e);
@@ -10059,7 +10153,7 @@ var Training = function Training() {
       md: 7,
       className: "d-flex justify-content-end"
     }, React.createElement(AddButton, {
-      text: "Update",
+      text: t("update"),
       onClick: function onClick() {
         return handleSubmit();
       }
@@ -10083,9 +10177,10 @@ var DestinationModal = function DestinationModal(_ref) {
       isError = _useState2[0],
       setIsError = _useState2[1];
 
-  var handleConfirm = function handleConfirm() {
-    console.log(name);
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
 
+  var handleConfirm = function handleConfirm() {
     if (!name) {
       setIsError(true);
       return;
@@ -10103,14 +10198,14 @@ var DestinationModal = function DestinationModal(_ref) {
   }, [name]);
   return React.createElement("div", null, React.createElement(Modal, {
     isOpen: isOpen
-  }, React.createElement(ModalHeader, null, isEdit ? "Edit designation" : "Create designation"), React.createElement(ModalBody, null, React.createElement(Row, null, React.createElement(Col, {
+  }, React.createElement(ModalHeader, null, isEdit ? t("edit_destination") : t("create_destination")), React.createElement(ModalBody, null, React.createElement(Row, null, React.createElement(Col, {
     md: 12,
     className: "mb-2"
   }, React.createElement(RequiredLabel, {
     text: "Name"
   }), React.createElement(Input, {
     name: "name",
-    placeholder: "Name",
+    placeholder: t("Name"),
     defaultValue: value.name,
     onChange: function onChange(e) {
       return setName(e.target.value);
@@ -10122,9 +10217,9 @@ var DestinationModal = function DestinationModal(_ref) {
   }, React.createElement(Button, {
     color: "primary",
     onClick: handleConfirm
-  }, "Confirm"), React.createElement(Button, {
+  }, t("confirm")), React.createElement(Button, {
     onClick: onCancel
-  }, "Cancel"))));
+  }, t("cancel")))));
 };
 
 var DESIGNATION_URL = BASE_URL + "/api/designation";
@@ -10395,6 +10490,9 @@ var initialEditDesignation = function initialEditDesignation(designations, id) {
 var Destinations = function Destinations() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useDestination = useDestination(),
       filter = _useDestination.filter,
       changeFilters = _useDestination.changeFilters,
@@ -10421,12 +10519,12 @@ var Destinations = function Destinations() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create Destination",
+    text: t("create_destination"),
     onClick: openModalCreate
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of Designation: ", designations.totalItems)), React.createElement(Row, {
+  }, t("total_of_designation"), ": ", designations.totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -10438,9 +10536,9 @@ var Destinations = function Destinations() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Name"), React.createElement("th", {
+  }, t("Name")), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, designations.items.map(function (designation) {
+  }, t("action")))), React.createElement("tbody", null, designations.items.map(function (designation) {
     return React.createElement("tr", {
       key: designation.id
     }, React.createElement("td", {
@@ -10458,7 +10556,7 @@ var Destinations = function Destinations() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "Destinations"
+    label: t("destinations")
   })), React.createElement(Col, {
     md: 8,
     className: "text-right"
@@ -10551,11 +10649,14 @@ var tabs = [{
   title: "Destinations",
   component: Destinations
 }];
-var title$1 = "Set up";
+var title$1 = "set_up";
 
 var SetupContainer = function SetupContainer() {
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(CustomTab, {
-    title: title$1,
+    title: t(title$1),
     tabs: tabs
   });
 };
@@ -10983,6 +11084,9 @@ var QuestionBankList = function QuestionBankList(_ref) {
       changeFilters = _useQuestionList.changeFilters,
       updateOrderQuestions = _useQuestionList.updateOrderQuestions;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var onRowDragEnd = function onRowDragEnd(e) {
     var dataAfterDrag = e.node.parent.childrenAfterFilter.map(function (item, index) {
       return {
@@ -11000,7 +11104,7 @@ var QuestionBankList = function QuestionBankList(_ref) {
   }, React.createElement(Col, {
     md: 8
   }, React.createElement(SearchBoxContainer, {
-    text: "Create question",
+    text: t("create_question"),
     onClick: function onClick() {
       return goToDetail();
     },
@@ -11010,7 +11114,7 @@ var QuestionBankList = function QuestionBankList(_ref) {
         searchString: searchString
       });
     },
-    placeholder: "Type something to Search question"
+    placeholder: t("type_something_to_search_question")
   })), isDefaultQuestion && React.createElement(Col, {
     md: 2
   }, React.createElement(DefaultQuestionStudentTeacherFilter, {
@@ -11033,7 +11137,7 @@ var QuestionBankList = function QuestionBankList(_ref) {
   })), React.createElement(Col, {
     md: isDefaultQuestion || isDefaultQuestionGeneral ? 2 : 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of questions: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_questions"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12,
@@ -12680,7 +12784,8 @@ var initValue$g = {
   isSurvey: true,
   subQuestions: [],
   isMandatory: false,
-  isBeforeSession: false
+  isBeforeSession: false,
+  isDefaultQuestionSurvey: false
 };
 var TITLE$h = "Question detail";
 
@@ -12803,14 +12908,17 @@ var useQuestionDetail$1 = function useQuestionDetail(id) {
   };
 };
 
-var CREATE_QUESTION_HEADER = "Create question";
-var EDIT_QUESTION_HEADER = "Edit question";
+var CREATE_QUESTION_HEADER = "create_question";
+var EDIT_QUESTION_HEADER = "edit_question";
 var EMOTIONALS_LENGTH = EMOTIONS.length;
 
 var QuestionDetail = function QuestionDetail() {
   var _useParams = useParams(),
       id = _useParams.id;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useQuestionDetail = useQuestionDetail$1(parseInt(id)),
       questionDetail = _useQuestionDetail.questionDetail,
       backToList = _useQuestionDetail.backToList,
@@ -12819,8 +12927,8 @@ var QuestionDetail = function QuestionDetail() {
       setEdited = _useQuestionDetail.setEdited,
       setEditedTrue = _useQuestionDetail.setEditedTrue;
 
-  var header = !!id ? EDIT_QUESTION_HEADER : CREATE_QUESTION_HEADER;
-  var confirmText = !!id ? "Update" : "Create";
+  var header = !!id ? t(EDIT_QUESTION_HEADER) : t(CREATE_QUESTION_HEADER);
+  var confirmText = !!id ? t("update") : t("create");
   var additionalFields = ["fromLabel", "toLabel", "numberOfStars"];
   return React.createElement(Formik, {
     initialValues: questionDetail,
@@ -12882,7 +12990,7 @@ var QuestionDetail = function QuestionDetail() {
     }, React.createElement(Col, {
       md: 6
     }, React.createElement(RequiredLabel, {
-      text: "Question Type"
+      text: t("question_type")
     }), React.createElement(QuestionTypeSelector, {
       onChange: onChangeQuestionType,
       id: values.type,
@@ -12892,7 +13000,7 @@ var QuestionDetail = function QuestionDetail() {
     })), React.createElement(Col, {
       md: 6
     }, React.createElement(RequiredLabel, {
-      text: "Category"
+      text: t("category")
     }), React.createElement(QuestionCategorySelector, {
       onChange: function onChange(e) {
         setFieldValue("categoryId", e.value);
@@ -12907,7 +13015,7 @@ var QuestionDetail = function QuestionDetail() {
       md: 12,
       className: "mb-2"
     }, React.createElement(RequiredLabel, {
-      text: "Question text"
+      text: t("question_text")
     }), (questionDetail.text || !id) && React.createElement(Editor, {
       apiKey: TINY_MCE_API_KEY,
       initialValue: questionDetail.text,
@@ -12920,7 +13028,19 @@ var QuestionDetail = function QuestionDetail() {
       text: errors.text
     })))), React.createElement(Col, {
       md: 4
-    }, React.createElement(Row, null, React.createElement(Col, {
+    }, React.createElement(Row, null, [QUESTION_TYPES.RATING, QUESTION_TYPES.SUMMARIZE, QUESTION_TYPES.TEXT_INPUT, QUESTION_TYPES.SINGLE_CHOICE].includes(values.type) && React.createElement(Col, {
+      md: 12,
+      className: "mb-1"
+    }, React.createElement(CustomInput, {
+      type: "checkbox",
+      id: "question-default-survey-checkbox",
+      label: "Is default question survey",
+      checked: values.isDefaultQuestionSurvey,
+      onChange: function onChange() {
+        setFieldValue("isDefaultQuestionSurvey", !values.isDefaultQuestionSurvey);
+        setEditedTrue();
+      }
+    })), React.createElement(Col, {
       md: 12,
       className: "mb-1"
     }, React.createElement(Row, null, [QUESTION_TYPES.EMOTIONAL, QUESTION_TYPES.LEARNING_STRATEGY, QUESTION_TYPES.RATING, QUESTION_TYPES.SUMMARIZE, QUESTION_TYPES.TEXT_INPUT_WITH_SUGGESTIONS, QUESTION_TYPES.TEXT_INPUT].includes(values.type) && React.createElement(React.Fragment, null, React.createElement(Col, {
@@ -12928,7 +13048,7 @@ var QuestionDetail = function QuestionDetail() {
     }, React.createElement(CustomInput, {
       type: "checkbox",
       id: "question-default-checkbox",
-      label: "Is default question for one-to-one",
+      label: t("is_default_question_for_one_to_one"),
       checked: values.isDefaultQuestion,
       onChange: function onChange() {
         setFieldValue("isDefaultQuestion", !values.isDefaultQuestion);
@@ -12943,7 +13063,7 @@ var QuestionDetail = function QuestionDetail() {
         setFieldValue("isDefaultQuestionTeacher", e ? e.value : null);
         setEditedTrue();
       },
-      placeholder: "Default question for students or teachers"
+      placeholder: t("default_question_for_students_or_teachers")
     }), touched.isDefaultQuestionTeacher && errors.isDefaultQuestionTeacher && React.createElement(ErrorHandler, {
       text: errors.isDefaultQuestionTeacher
     })), React.createElement(Col, {
@@ -12951,7 +13071,7 @@ var QuestionDetail = function QuestionDetail() {
     }, React.createElement(CustomInput, {
       type: "checkbox",
       id: "question-default-general-checkbox",
-      label: "Is default question general class",
+      label: t("is_default_question_general_class"),
       checked: values.isDefaultQuestionGeneralClass,
       onChange: function onChange() {
         setFieldValue("isDefaultQuestionGeneralClass", !values.isDefaultQuestionGeneralClass);
@@ -12966,7 +13086,7 @@ var QuestionDetail = function QuestionDetail() {
         setFieldValue("isDefaultQuestionGeneralClassTeacher", e ? e.value : null);
         setEditedTrue();
       },
-      placeholder: "Default question general for students or teachers",
+      placeholder: t("default_question_general_for_students_or_teachers"),
       isDefaultGeneralClass: true
     }), touched.isDefaultQuestionGeneralClassTeacher && errors.isDefaultQuestionGeneralClassTeacher && React.createElement(ErrorHandler, {
       text: errors.isDefaultQuestionGeneralClassTeacher
@@ -12975,7 +13095,7 @@ var QuestionDetail = function QuestionDetail() {
     }, React.createElement(CustomInput, {
       type: "checkbox",
       id: "question-default-before-session-checkbox",
-      label: "Before session",
+      label: t("before_session"),
       checked: values.isBeforeSession,
       onChange: function onChange() {
         setFieldValue("isBeforeSession", !values.isBeforeSession);
@@ -14559,11 +14679,454 @@ var TutorialScreenContainer = function TutorialScreenContainer() {
   });
 };
 
-var schema$e = object({
+var schema$e = object({
+  name: string().required("Name is required")
+});
+
+var QuestionCateModal = function QuestionCateModal(props, ref) {
+  var header = props.header,
+      confirmText = props.confirmText,
+      onConfirm = props.onConfirm,
+      questionCateDetail = props.questionCateDetail,
+      onCancel = props.onCancel,
+      edited = props.edited,
+      setEdited = props.setEdited,
+      setEditedTrue = props.setEditedTrue,
+      setEditedFalse = props.setEditedFalse;
+  return React.createElement(Formik, {
+    initialValues: questionCateDetail,
+    enableReinitialize: true,
+    validationSchema: schema$e,
+    onSubmit: function onSubmit(values, actions) {
+      onConfirm(values);
+      actions.resetForm();
+    }
+  }, function (formikProps) {
+    var values = formikProps.values,
+        touched = formikProps.touched,
+        errors = formikProps.errors,
+        handleChange = formikProps.handleChange,
+        handleBlur = formikProps.handleBlur,
+        handleSubmit = formikProps.handleSubmit;
+    return React.createElement(CommonModal, {
+      header: header,
+      confirmText: confirmText,
+      onConfirm: handleSubmit,
+      onCancel: onCancel,
+      ref: ref,
+      edited: edited,
+      setEdited: setEdited,
+      setEditedFalse: setEditedFalse
+    }, React.createElement(Row, null, React.createElement(Col, {
+      md: 12
+    }, React.createElement(RequiredLabel, {
+      text: "Name"
+    }), React.createElement(Input, {
+      name: "name",
+      placeholder: "Name",
+      value: values.name,
+      onChange: function onChange(e) {
+        handleChange(e);
+        setEditedTrue();
+      },
+      onBlur: handleBlur("name")
+    }), touched.name && errors.name && React.createElement(ErrorHandler, {
+      text: errors.name
+    }))));
+  });
+};
+
+var QuestionCateModal$1 = forwardRef(QuestionCateModal);
+
+var QUESTION_CATE_URL = BASE_URL + "/api/questioncategory";
+var CATE_SURVEY_URL = BASE_URL + "/api/questioncategory/template-survey";
+var get$m = function get(filter) {
+  return api.get(QUESTION_CATE_URL, {
+    params: filter
+  });
+};
+var getById$i = function getById(id) {
+  return api.get(QUESTION_CATE_URL + "/" + id);
+};
+var create$g = function create(data) {
+  return api.post(QUESTION_CATE_URL, data);
+};
+var update$h = function update(data) {
+  return api.put(QUESTION_CATE_URL + "/" + data.id, data);
+};
+var remove$h = function remove(id) {
+  return api["delete"](QUESTION_CATE_URL + "/" + id);
+};
+var getSurvey = function getSurvey(filter) {
+  return api.get(CATE_SURVEY_URL, {
+    params: filter
+  });
+};
+var getSurveyById = function getSurveyById(id) {
+  return api.get(CATE_SURVEY_URL + "/" + id);
+};
+var createSurvey = function createSurvey(data) {
+  return api.post(CATE_SURVEY_URL, data);
+};
+var updateSurvey = function updateSurvey(data) {
+  return api.put(CATE_SURVEY_URL + "/" + data.id, data);
+};
+var removeSurvey = function removeSurvey(id) {
+  return api["delete"](CATE_SURVEY_URL + "/" + id);
+};
+
+var initValue$k = {
+  name: "",
+  ParentCategoryId: null
+};
+
+var useQuestionCateDetail = function useQuestionCateDetail() {
+  var dispatch = useDispatch();
+
+  var _useState = useState(0),
+      id = _useState[0],
+      setId = _useState[1];
+
+  var _useState2 = useState(initValue$k),
+      questionCateDetail = _useState2[0],
+      setQuestionCateDetail = _useState2[1];
+
+  var _useState3 = useState(false),
+      edited = _useState3[0],
+      setEdited = _useState3[1];
+
+  var setEditedTrue = function setEditedTrue() {
+    try {
+      localStorage.setItem(window.location.href, "true");
+      setEdited(true);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var setEditedFalse = function setEditedFalse() {
+    try {
+      !!localStorage.getItem(window.location.href) && localStorage.removeItem(window.location.href);
+      setEdited(false);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  useEffect(function () {
+    !!id ? getData() : setQuestionCateDetail(initValue$k);
+  }, [id]);
+  useEffect(function () {
+    setEditedFalse();
+  }, []);
+
+  var reset = function reset() {
+    setQuestionCateDetail(initValue$k);
+    setId(0);
+  };
+
+  var getData = useCallback(function () {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(getById$i(id)).then(function (res) {
+          setQuestionCateDetail(res.data);
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [id]);
+  var confirmData = useCallback(function (values, cb) {
+    try {
+      var _temp7 = function _temp7() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp8 = _catch(function () {
+        var next = !!id ? update$h : create$g;
+        return Promise.resolve(next(values)).then(function () {
+          dispatch(setAlert({
+            type: "success",
+            message: (!!id ? "Update" : "Create") + " question category successfully"
+          }));
+          cb && cb();
+          !!id && setId(0);
+        });
+      }, function (err) {
+        var _err$response2, _err$response2$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [id]);
+  return {
+    id: id,
+    setId: setId,
+    questionCateDetail: questionCateDetail,
+    confirmData: confirmData,
+    initValue: initValue$k,
+    reset: reset,
+    edited: edited,
+    setEdited: setEdited,
+    setEditedTrue: setEditedTrue,
+    setEditedFalse: setEditedFalse
+  };
+};
+
+var TITLE$l = "Question category list";
+
+var useQuestionCateList = function useQuestionCateList() {
+  var questionCateList = useSelector(function (state) {
+    return state.questionCate.questionCateList;
+  });
+  var totalItems = useSelector(function (state) {
+    return state.questionCate.totalItems;
+  });
+
+  var _useFilters = useFilters(),
+      filters = _useFilters.filters,
+      changeFilters = _useFilters.changeFilters;
+
+  var dispatch = useDispatch();
+  var getData = useCallback(function () {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(get$m(filters)).then(function (res) {
+          var _res$data = res.data,
+              items = _res$data.items,
+              totalItems = _res$data.totalItems;
+          dispatch(setQuestionCateList({
+            questionCateList: items,
+            totalItems: totalItems
+          }));
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [dispatch, filters]);
+  var removeData = useCallback(function (id) {
+    dispatch(setLoading(true));
+
+    try {
+      dispatch(setModal({
+        isOpen: true,
+        type: "warning",
+        message: "Do you want to remove this category?",
+        onConfirm: function () {
+          try {
+            return Promise.resolve(remove$h(id)).then(function () {
+              dispatch(setAlert({
+                type: "success",
+                message: "Remove category successfully"
+              }));
+              changeFilters({
+                currentPage: 1
+              });
+            });
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        }
+      }));
+    } catch (err) {
+      var _err$response2, _err$response2$data;
+
+      dispatch(setAlert({
+        type: "danger",
+        message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+      }));
+    }
+
+    dispatch(setLoading(false));
+  }, [filters]);
+  useEffect(function () {
+    document.title = TITLE$l;
+  }, []);
+  useEffect(function () {
+    getData();
+  }, [filters]);
+  return {
+    questionCateList: questionCateList,
+    totalItems: totalItems,
+    filters: filters,
+    changeFilters: changeFilters,
+    getData: getData,
+    removeData: removeData
+  };
+};
+
+var QuestionCateList = function QuestionCateList() {
+  var modal = useRef();
+
+  var _useQuestionCateList = useQuestionCateList(),
+      questionCateList = _useQuestionCateList.questionCateList,
+      totalItems = _useQuestionCateList.totalItems,
+      getData = _useQuestionCateList.getData,
+      removeData = _useQuestionCateList.removeData,
+      filters = _useQuestionCateList.filters,
+      changeFilters = _useQuestionCateList.changeFilters;
+
+  var _useQuestionCateDetai = useQuestionCateDetail(),
+      id = _useQuestionCateDetai.id,
+      setId = _useQuestionCateDetai.setId,
+      questionCateDetail = _useQuestionCateDetai.questionCateDetail,
+      confirmData = _useQuestionCateDetai.confirmData,
+      reset = _useQuestionCateDetai.reset,
+      edited = _useQuestionCateDetai.edited,
+      setEdited = _useQuestionCateDetai.setEdited,
+      setEditedTrue = _useQuestionCateDetai.setEditedTrue,
+      setEditedFalse = _useQuestionCateDetai.setEditedFalse;
+
+  var openModal = function openModal(questionCateId) {
+    questionCateId ? setId(questionCateId) : setId(0);
+    modal && modal.current && modal.current.toggle();
+  };
+
+  var onConfirm = function onConfirm(values) {
+    confirmData(values, function () {
+      modal && modal.current && modal.current.toggle();
+      getData();
+    });
+    setEditedFalse();
+  };
+
+  var onRemove = function onRemove(id) {
+    removeData(id);
+  };
+
+  var onCancel = function onCancel() {
+    return reset();
+  };
+
+  return React.createElement("div", null, React.createElement(QuestionCateModal$1, {
+    ref: modal,
+    header: !!id ? "Edit category" : "create_category",
+    confirmText: !!id ? "Update" : "Create",
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    questionCateDetail: questionCateDetail,
+    questionCateList: questionCateList,
+    edited: edited,
+    setEdited: setEdited,
+    setEditedTrue: setEditedTrue,
+    setEditedFalse: setEditedFalse
+  }), React.createElement(QuitPrompt, {
+    when: edited
+  }), React.createElement(Row, {
+    className: "my-2"
+  }, React.createElement(Col, {
+    md: 4
+  }, React.createElement(AddButton, {
+    text: "create_category",
+    onClick: function onClick() {
+      return openModal();
+    }
+  })), React.createElement(Col, {
+    md: 4,
+    className: "d-flex align-items-center justify-content-end"
+  }, "Total of category: ", totalItems)), React.createElement(Row, {
+    className: "mb-2"
+  }, React.createElement(Col, {
+    md: 8
+  }, questionCateList && questionCateList.length > 0 ? React.createElement(Table, {
+    bordered: true,
+    hover: true,
+    striped: true,
+    responsive: true,
+    size: "sm"
+  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+    className: "align-top"
+  }, "Name"), React.createElement("th", {
+    className: "align-top"
+  }, "Number of question"), React.createElement("th", {
+    className: "text-center"
+  }, "Action"))), React.createElement("tbody", null, questionCateList.map(function (record) {
+    return React.createElement("tr", {
+      key: record.id
+    }, React.createElement("td", {
+      className: "align-middle"
+    }, React.createElement(LinkEditButton, {
+      label: record.name,
+      onClick: function onClick() {
+        return openModal(record.id);
+      }
+    })), React.createElement("td", {
+      className: "align-middle"
+    }, record.numberOfQuestions), React.createElement("td", {
+      className: "text-center align-middle"
+    }, React.createElement(DeleteButtonIcon, {
+      onClick: function onClick() {
+        return onRemove(record.id);
+      }
+    })));
+  }))) : React.createElement(EmptyDataAlert, {
+    label: "question category"
+  })), React.createElement(Col, {
+    md: 8,
+    className: "text-right"
+  }, React.createElement(CustomPagination, {
+    totalRecordCount: totalItems,
+    filters: filters,
+    changePageSize: function changePageSize(pageSize) {
+      return changeFilters({
+        pageSize: pageSize
+      });
+    },
+    changePage: function changePage(currentPage) {
+      return changeFilters({
+        currentPage: currentPage
+      });
+    }
+  }))));
+};
+
+var schema$f = object({
   name: string().required("Name is required")
 });
 
-var QuestionCateModal = function QuestionCateModal(props, ref) {
+var QuestionCateModal$2 = function QuestionCateModal(props, ref) {
   var header = props.header,
       confirmText = props.confirmText,
       onConfirm = props.onConfirm,
@@ -14572,11 +15135,18 @@ var QuestionCateModal = function QuestionCateModal(props, ref) {
       edited = props.edited,
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
-      setEditedFalse = props.setEditedFalse;
+      setEditedFalse = props.setEditedFalse,
+      categoryId = props.categoryId,
+      setCategoryId = props.setCategoryId,
+      questionSelectorValue = props.questionSelectorValue,
+      setTemporaryQuestion = props.setTemporaryQuestion,
+      addQuestion = props.addQuestion,
+      listQuestions = props.listQuestions,
+      removeQuestion = props.removeQuestion;
   return React.createElement(Formik, {
     initialValues: questionCateDetail,
     enableReinitialize: true,
-    validationSchema: schema$e,
+    validationSchema: schema$f,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -14596,9 +15166,11 @@ var QuestionCateModal = function QuestionCateModal(props, ref) {
       ref: ref,
       edited: edited,
       setEdited: setEdited,
-      setEditedFalse: setEditedFalse
+      setEditedFalse: setEditedFalse,
+      size: "lg"
     }, React.createElement(Row, null, React.createElement(Col, {
-      md: 12
+      md: 12,
+      className: "mb-3"
     }, React.createElement(RequiredLabel, {
       text: "Name"
     }), React.createElement(Input, {
@@ -14612,44 +15184,66 @@ var QuestionCateModal = function QuestionCateModal(props, ref) {
       onBlur: handleBlur("name")
     }), touched.name && errors.name && React.createElement(ErrorHandler, {
       text: errors.name
+    })), React.createElement(Col, {
+      md: 12,
+      className: "mb-3"
+    }, React.createElement("label", null, "Question Category"), React.createElement(QuestionCategorySelector, {
+      id: categoryId,
+      onChange: function onChange(e) {
+        setCategoryId(e.value);
+        setEditedTrue();
+      },
+      placeholder: "Select question category"
+    }))), React.createElement(Row, {
+      className: "mb-3"
+    }, React.createElement(Col, {
+      md: 12
+    }, React.createElement("label", null, "Select Question"), React.createElement(QuestionSelector, {
+      categoryId: categoryId,
+      value: questionSelectorValue,
+      onChange: function onChange(e) {
+        setTemporaryQuestion(e);
+        setEditedTrue();
+      },
+      externalQuestionIds: listQuestions.map(function (item) {
+        return item.id;
+      }),
+      isDefaultQuestionSurvey: true
+    }))), React.createElement(Row, null, React.createElement(Col, {
+      md: 4,
+      className: "float-right"
+    }, React.createElement(Button, {
+      color: "success",
+      className: "h-100 w-100",
+      onClick: addQuestion
+    }, "Add questions"))), React.createElement(Row, {
+      className: "mb-3"
+    }, React.createElement(Col, {
+      md: 12
+    }, React.createElement(QuestionList, {
+      isHiddenMandatory: true,
+      questions: listQuestions,
+      onRemove: removeQuestion,
+      onChangeMandatory: function onChangeMandatory() {}
     }))));
   });
 };
 
-var QuestionCateModal$1 = forwardRef(QuestionCateModal);
-
-var QUESTION_CATE_URL = BASE_URL + "/api/questioncategory";
-var get$m = function get(filter) {
-  return api.get(QUESTION_CATE_URL, {
-    params: filter
-  });
-};
-var getById$i = function getById(id) {
-  return api.get(QUESTION_CATE_URL + "/" + id);
-};
-var create$g = function create(data) {
-  return api.post(QUESTION_CATE_URL, data);
-};
-var update$h = function update(data) {
-  return api.put(QUESTION_CATE_URL + "/" + data.id, data);
-};
-var remove$h = function remove(id) {
-  return api["delete"](QUESTION_CATE_URL + "/" + id);
-};
+var TemplateCateModal = forwardRef(QuestionCateModal$2);
 
-var initValue$k = {
+var initValue$l = {
   name: "",
-  ParentCategoryId: null
+  questionIds: []
 };
 
-var useQuestionCateDetail = function useQuestionCateDetail() {
+var useTemplateCateDetail = function useTemplateCateDetail() {
   var dispatch = useDispatch();
 
   var _useState = useState(0),
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = useState(initValue$k),
+  var _useState2 = useState(initValue$l),
       questionCateDetail = _useState2[0],
       setQuestionCateDetail = _useState2[1];
 
@@ -14657,6 +15251,18 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
       edited = _useState3[0],
       setEdited = _useState3[1];
 
+  var _useState4 = useState(0),
+      categoryId = _useState4[0],
+      setCategoryId = _useState4[1];
+
+  var _useState5 = useState(null),
+      temporaryQuestion = _useState5[0],
+      setTemporaryQuestion = _useState5[1];
+
+  var _useState6 = useState([]),
+      listQuestions = _useState6[0],
+      setListQuestions = _useState6[1];
+
   var setEditedTrue = function setEditedTrue() {
     try {
       localStorage.setItem(window.location.href, "true");
@@ -14678,14 +15284,14 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
   };
 
   useEffect(function () {
-    !!id ? getData() : setQuestionCateDetail(initValue$k);
+    !!id ? getData() : setQuestionCateDetail(initValue$l);
   }, [id]);
   useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setQuestionCateDetail(initValue$k);
+    setQuestionCateDetail(initValue$l);
     setId(0);
   };
 
@@ -14698,8 +15304,16 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
       dispatch(setLoading(true));
 
       var _temp4 = _catch(function () {
-        return Promise.resolve(getById$i(id)).then(function (res) {
-          setQuestionCateDetail(res.data);
+        return Promise.resolve(getSurveyById(id)).then(function (res) {
+          var data = {
+            id: res.data.id,
+            name: res.data.name,
+            questionIds: res.data.questionList.map(function (item) {
+              return item === null || item === void 0 ? void 0 : item.id;
+            })
+          };
+          setQuestionCateDetail(data);
+          setListQuestions(res.data.questionList);
         });
       }, function (err) {
         var _err$response, _err$response$data;
@@ -14724,7 +15338,10 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
       dispatch(setLoading(true));
 
       var _temp8 = _catch(function () {
-        var next = !!id ? update$h : create$g;
+        var next = !!id ? updateSurvey : createSurvey;
+        values.questionIds = listQuestions.map(function (item) {
+          return item.id;
+        });
         return Promise.resolve(next(values)).then(function () {
           dispatch(setAlert({
             type: "success",
@@ -14746,24 +15363,66 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [id]);
+  }, [id, listQuestions]);
+  var questionSelectorValue = useMemo(function () {
+    if (!temporaryQuestion) return null;
+    var pureText = getTextFromHTML(temporaryQuestion.text);
+    var shortenPureText = pureText.length < 100 ? pureText : pureText.slice(0, 100) + "...";
+    return {
+      id: temporaryQuestion.id,
+      value: temporaryQuestion.id,
+      label: shortenPureText,
+      text: temporaryQuestion.text
+    };
+  }, [temporaryQuestion]);
+  var addQuestion = useCallback(function () {
+    if (!temporaryQuestion) return;
+    var question = {
+      id: temporaryQuestion.id,
+      text: temporaryQuestion.text
+    };
+    setListQuestions([].concat(listQuestions, [question]));
+    setTemporaryQuestion(null);
+    setEditedTrue();
+  }, [listQuestions, temporaryQuestion]);
+  var removeQuestion = useCallback(function (questionId) {
+    dispatch(setModal({
+      isOpen: true,
+      type: "warning",
+      message: "Do you want to remove this question?",
+      onConfirm: function onConfirm() {
+        setListQuestions(listQuestions.filter(function (question) {
+          return question.id !== questionId;
+        }));
+      }
+    }));
+    setEditedTrue();
+  }, [listQuestions]);
   return {
     id: id,
     setId: setId,
     questionCateDetail: questionCateDetail,
     confirmData: confirmData,
-    initValue: initValue$k,
+    initValue: initValue$l,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
     setEditedTrue: setEditedTrue,
-    setEditedFalse: setEditedFalse
+    setEditedFalse: setEditedFalse,
+    categoryId: categoryId,
+    setCategoryId: setCategoryId,
+    questionSelectorValue: questionSelectorValue,
+    setTemporaryQuestion: setTemporaryQuestion,
+    addQuestion: addQuestion,
+    listQuestions: listQuestions,
+    setListQuestions: setListQuestions,
+    removeQuestion: removeQuestion
   };
 };
 
-var TITLE$l = "Question category list";
+var TITLE$m = "Question category list";
 
-var useQuestionCateList = function useQuestionCateList() {
+var useTemplateCateList = function useTemplateCateList() {
   var questionCateList = useSelector(function (state) {
     return state.questionCate.questionCateList;
   });
@@ -14785,7 +15444,7 @@ var useQuestionCateList = function useQuestionCateList() {
       dispatch(setLoading(true));
 
       var _temp4 = _catch(function () {
-        return Promise.resolve(get$m(filters)).then(function (res) {
+        return Promise.resolve(getSurvey(filters)).then(function (res) {
           var _res$data = res.data,
               items = _res$data.items,
               totalItems = _res$data.totalItems;
@@ -14818,33 +15477,44 @@ var useQuestionCateList = function useQuestionCateList() {
         message: "Do you want to remove this category?",
         onConfirm: function () {
           try {
-            return Promise.resolve(remove$h(id)).then(function () {
+            var _temp6 = _catch(function () {
+              return Promise.resolve(removeSurvey(id)).then(function () {
+                dispatch(setAlert({
+                  type: "success",
+                  message: "Remove category successfully"
+                }));
+                changeFilters({
+                  currentPage: 1
+                });
+              });
+            }, function (err) {
+              var _err$response2, _err$response2$data;
+
               dispatch(setAlert({
-                type: "success",
-                message: "Remove category successfully"
+                type: "danger",
+                message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
               }));
-              changeFilters({
-                currentPage: 1
-              });
             });
+
+            return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
           } catch (e) {
             return Promise.reject(e);
           }
         }
       }));
     } catch (err) {
-      var _err$response2, _err$response2$data;
+      var _err$response3, _err$response3$data;
 
       dispatch(setAlert({
         type: "danger",
-        message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+        message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message
       }));
     }
 
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$l;
+    document.title = TITLE$m;
   }, []);
   useEffect(function () {
     getData();
@@ -14859,27 +15529,35 @@ var useQuestionCateList = function useQuestionCateList() {
   };
 };
 
-var QuestionCateList = function QuestionCateList() {
+var TemplateSurveyList = function TemplateSurveyList() {
   var modal = useRef();
 
-  var _useQuestionCateList = useQuestionCateList(),
-      questionCateList = _useQuestionCateList.questionCateList,
-      totalItems = _useQuestionCateList.totalItems,
-      getData = _useQuestionCateList.getData,
-      removeData = _useQuestionCateList.removeData,
-      filters = _useQuestionCateList.filters,
-      changeFilters = _useQuestionCateList.changeFilters;
-
-  var _useQuestionCateDetai = useQuestionCateDetail(),
-      id = _useQuestionCateDetai.id,
-      setId = _useQuestionCateDetai.setId,
-      questionCateDetail = _useQuestionCateDetai.questionCateDetail,
-      confirmData = _useQuestionCateDetai.confirmData,
-      reset = _useQuestionCateDetai.reset,
-      edited = _useQuestionCateDetai.edited,
-      setEdited = _useQuestionCateDetai.setEdited,
-      setEditedTrue = _useQuestionCateDetai.setEditedTrue,
-      setEditedFalse = _useQuestionCateDetai.setEditedFalse;
+  var _useTemplateCateList = useTemplateCateList(),
+      questionCateList = _useTemplateCateList.questionCateList,
+      totalItems = _useTemplateCateList.totalItems,
+      getData = _useTemplateCateList.getData,
+      removeData = _useTemplateCateList.removeData,
+      filters = _useTemplateCateList.filters,
+      changeFilters = _useTemplateCateList.changeFilters;
+
+  var _useTemplateCateDetai = useTemplateCateDetail(),
+      id = _useTemplateCateDetai.id,
+      setId = _useTemplateCateDetai.setId,
+      questionCateDetail = _useTemplateCateDetai.questionCateDetail,
+      confirmData = _useTemplateCateDetai.confirmData,
+      reset = _useTemplateCateDetai.reset,
+      edited = _useTemplateCateDetai.edited,
+      setEdited = _useTemplateCateDetai.setEdited,
+      setEditedTrue = _useTemplateCateDetai.setEditedTrue,
+      setEditedFalse = _useTemplateCateDetai.setEditedFalse,
+      categoryId = _useTemplateCateDetai.categoryId,
+      setCategoryId = _useTemplateCateDetai.setCategoryId,
+      questionSelectorValue = _useTemplateCateDetai.questionSelectorValue,
+      setTemporaryQuestion = _useTemplateCateDetai.setTemporaryQuestion,
+      addQuestion = _useTemplateCateDetai.addQuestion,
+      listQuestions = _useTemplateCateDetai.listQuestions,
+      setListQuestions = _useTemplateCateDetai.setListQuestions,
+      removeQuestion = _useTemplateCateDetai.removeQuestion;
 
   var openModal = function openModal(questionCateId) {
     questionCateId ? setId(questionCateId) : setId(0);
@@ -14889,6 +15567,8 @@ var QuestionCateList = function QuestionCateList() {
   var onConfirm = function onConfirm(values) {
     confirmData(values, function () {
       modal && modal.current && modal.current.toggle();
+      setListQuestions([]);
+      setCategoryId(0);
       getData();
     });
     setEditedFalse();
@@ -14902,9 +15582,9 @@ var QuestionCateList = function QuestionCateList() {
     return reset();
   };
 
-  return React.createElement("div", null, React.createElement(QuestionCateModal$1, {
+  return React.createElement("div", null, React.createElement(TemplateCateModal, {
     ref: modal,
-    header: !!id ? "Edit category" : "Create category",
+    header: !!id ? "Edit template" : "Create template",
     confirmText: !!id ? "Update" : "Create",
     onConfirm: onConfirm,
     onCancel: onCancel,
@@ -14913,7 +15593,14 @@ var QuestionCateList = function QuestionCateList() {
     edited: edited,
     setEdited: setEdited,
     setEditedTrue: setEditedTrue,
-    setEditedFalse: setEditedFalse
+    setEditedFalse: setEditedFalse,
+    categoryId: categoryId,
+    setCategoryId: setCategoryId,
+    questionSelectorValue: questionSelectorValue,
+    setTemporaryQuestion: setTemporaryQuestion,
+    addQuestion: addQuestion,
+    listQuestions: listQuestions,
+    removeQuestion: removeQuestion
   }), React.createElement(QuitPrompt, {
     when: edited
   }), React.createElement(Row, {
@@ -14921,7 +15608,7 @@ var QuestionCateList = function QuestionCateList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create category",
+    text: "Create template",
     onClick: function onClick() {
       return openModal();
     }
@@ -14964,7 +15651,7 @@ var QuestionCateList = function QuestionCateList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "question category"
+    label: "template survey"
   })), React.createElement(Col, {
     md: 8,
     className: "text-right"
@@ -15010,12 +15697,19 @@ var tabs$3 = [{
   path: "/admin/question/question-category",
   title: "Question category",
   component: QuestionCateList
+}, {
+  path: "/admin/question/template-survey",
+  title: "Template Survey",
+  component: TemplateSurveyList
 }];
-var title$4 = "Question bank";
+var title$4 = "question_bank";
 
 var QuestionBankContainer = function QuestionBankContainer() {
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(CustomTab, {
-    title: title$4,
+    title: t(title$4),
     tabs: tabs$3
   });
 };
@@ -15181,7 +15875,7 @@ var SemesterSelector = function SemesterSelector(_ref) {
   }));
 };
 
-var schema$f = object({
+var schema$g = object({
   beginDate: string().required("Begin date is required"),
   endDate: string().required("End date is required"),
   timeSemester: string().required("Time Semester is required"),
@@ -15217,7 +15911,7 @@ var AssignmentDetailModal = function AssignmentDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: assignmentDetail,
     enableReinitialize: true,
-    validationSchema: schema$f,
+    validationSchema: schema$g,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -15433,7 +16127,7 @@ var getAllSemesters = function getAllSemesters() {
   return api.get(BASE_URL + "/api/Semester/all");
 };
 
-var initValue$l = {
+var initValue$m = {
   assessmentId: 0,
   assessment: null,
   studentIds: [],
@@ -15453,7 +16147,7 @@ var useAssignmentDetail = function useAssignmentDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = useState(initValue$l),
+  var _useState2 = useState(initValue$m),
       assignmentDetail = _useState2[0],
       setAssignmentDetail = _useState2[1];
 
@@ -15482,14 +16176,14 @@ var useAssignmentDetail = function useAssignmentDetail() {
   };
 
   useEffect(function () {
-    !!id ? getData() : setAssignmentDetail(initValue$l);
+    !!id ? getData() : setAssignmentDetail(initValue$m);
   }, [id]);
   useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setAssignmentDetail(initValue$l);
+    setAssignmentDetail(initValue$m);
     setId(0);
   };
 
@@ -15604,7 +16298,7 @@ var useAssignmentDetail = function useAssignmentDetail() {
     assignmentDetail: assignmentDetail,
     confirmData: confirmData,
     onRemoveStudent: onRemoveStudent,
-    initValue: initValue$l,
+    initValue: initValue$m,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -15613,7 +16307,7 @@ var useAssignmentDetail = function useAssignmentDetail() {
   };
 };
 
-var TITLE$m = "Assignment list";
+var TITLE$n = "Assignment list";
 
 var useAssignmentList = function useAssignmentList() {
   var assignmentList = useSelector(function (state) {
@@ -15710,7 +16404,7 @@ var useAssignmentList = function useAssignmentList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$m;
+    document.title = TITLE$n;
   }, []);
   useEffect(function () {
     getData();
@@ -15947,7 +16641,7 @@ var useAssignmentResultList = function useAssignmentResultList() {
   };
 };
 
-var initValue$m = {
+var initValue$n = {
   questionResponses: [],
   answerTexts: []
 };
@@ -15959,7 +16653,7 @@ var useReflectionResultDetail$1 = function useReflectionResultDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = useState(initValue$m),
+  var _useState2 = useState(initValue$n),
       assignmentResultDetail = _useState2[0],
       setAssignmentResultDetail = _useState2[1];
 
@@ -16160,7 +16854,7 @@ var getRandomQuestion = function getRandomQuestion(data) {
   return api.post(QUESTION_URL$2 + "/random", data);
 };
 
-var TITLE$n = "Session template list";
+var TITLE$o = "Session template list";
 var SESSION_TEMPLATE_URL$1 = "/admin/session-template-learning-support";
 var CREATE_TEMPLATE_URL = "/admin/create-session-template-learning-support";
 
@@ -16264,7 +16958,7 @@ var useSessionTemplateList = function useSessionTemplateList() {
     history.push(url);
   }, []);
   useEffect(function () {
-    document.title = TITLE$n;
+    document.title = TITLE$o;
   }, []);
   useEffect(function () {
     getData();
@@ -16411,7 +17105,7 @@ var remove$k = function remove(id) {
   return api["delete"](SESSION_TEMPLATE_GENERAL_CLASS_URL + "/" + id);
 };
 
-var TITLE$o = "Session template general class list";
+var TITLE$p = "Session template general class list";
 var SESSION_TEMPLATE_GENERAL_CLASS_URL$1 = "/admin/session-template/general-class";
 var CREATE_TEMPLATE_GENERAL_CLASS_URL = "/admin/create-session-template-general-class";
 
@@ -16501,7 +17195,7 @@ var useSessionTemplateGeneralClassList = function useSessionTemplateGeneralClass
     history.push(url);
   }, []);
   useEffect(function () {
-    document.title = TITLE$o;
+    document.title = TITLE$p;
   }, []);
   useEffect(function () {
     getData();
@@ -16905,7 +17599,7 @@ var SkillSelector$1 = function SkillSelector(_ref) {
   });
 };
 
-var schema$g = object({
+var schema$h = object({
   name: string().required("Name is required"),
   isConference: boolean().required("Is conference is required"),
   conferenceRubricId: number().nullable().test("Test conference rubric id", "Conference rubric is required", function () {
@@ -16934,7 +17628,7 @@ var useAddQuestion = function useAddQuestion() {
   };
 };
 
-var initValue$n = {
+var initValue$o = {
   name: "",
   isConference: false,
   conferenceRubricId: null,
@@ -16984,7 +17678,7 @@ var useSessionTemplateDetail = function useSessionTemplateDetail(id) {
       isTeacherQuestion = _useState7[0],
       setIsTeacherQuestion = _useState7[1];
 
-  var _useState8 = useState(initValue$n),
+  var _useState8 = useState(initValue$o),
       sessionTemplateDetail = _useState8[0],
       setSessionTemplateDetail = _useState8[1];
 
@@ -17293,7 +17987,7 @@ var SessionTemplateDetail = function SessionTemplateDetail() {
   return React.createElement(Formik, {
     initialValues: sessionTemplateDetail,
     enableReinitialize: true,
-    validationSchema: schema$g,
+    validationSchema: schema$h,
     onSubmit: function onSubmit(values) {
       confirmData(values);
       setEdited(false);
@@ -17575,7 +18269,7 @@ var SubjectSelector = function SubjectSelector(_ref) {
   });
 };
 
-var initValue$o = {
+var initValue$p = {
   name: "",
   subjectId: 0,
   questionTeacherIds: [],
@@ -17626,7 +18320,7 @@ var useSessionTemplateGeneralClassDetail = function useSessionTemplateGeneralCla
       extraStudentMandatory = _useState9[0],
       setExtraStudentMandatory = _useState9[1];
 
-  var _useState10 = useState(initValue$o),
+  var _useState10 = useState(initValue$p),
       sessionTemplateGeneralClassDetail = _useState10[0],
       setSessionTemplateGeneralClassDetail = _useState10[1];
 
@@ -17846,7 +18540,7 @@ var useSessionTemplateGeneralClassDetail = function useSessionTemplateGeneralCla
 };
 
 var LINK_TO_DEFAULT_QUESTION_GENERAL_CLASS = "/admin/question/default-question-general-list";
-var schema$h = object({
+var schema$i = object({
   name: string().trim().required("Name is required"),
   subjectId: number().required("Subject is required").test("Test subject", "Subject is required", function (value) {
     return value > 0;
@@ -17930,7 +18624,7 @@ var SessionTemplateGeneralClassDetail = function SessionTemplateGeneralClassDeta
   return React.createElement(Formik, {
     initialValues: sessionTemplateGeneralClassDetail,
     enableReinitialize: true,
-    validationSchema: schema$h,
+    validationSchema: schema$i,
     onSubmit: function onSubmit(values) {
       confirmData(values);
       setEdited(false);
@@ -18137,7 +18831,7 @@ var SessionTemplateGeneralClassDetail = function SessionTemplateGeneralClassDeta
   });
 };
 
-var schema$i = object({
+var schema$j = object({
   learningSupportCategoryId: number().test("testLearningSupportCategoryId", "Invalid category", function (number) {
     return !!number && number >= 1;
   }),
@@ -18164,10 +18858,14 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
       setEdited = props.setEdited,
       setEditedTrue = props.setEditedTrue,
       setEditedFalse = props.setEditedFalse;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Formik, {
     initialValues: customAlertDetail,
     enableReinitialize: true,
-    validationSchema: schema$i,
+    validationSchema: schema$j,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -18180,7 +18878,7 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
         setFieldValue = formProps.setFieldValue,
         handleChange = formProps.handleChange;
     return React.createElement(CommonModal, {
-      header: header,
+      header: t(header),
       confirmText: confirmText,
       onConfirm: handleSubmit,
       onCancel: onCancel,
@@ -18198,7 +18896,7 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
     }, React.createElement(Col, {
       md: 6
     }, React.createElement(RequiredLabel, {
-      text: "Category"
+      text: t("category")
     }), React.createElement(CategorySelector, {
       defaultValue: values.learningSupportCategoryId,
       onChange: function onChange(e) {
@@ -18210,7 +18908,7 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
     })), React.createElement(Col, {
       md: 6
     }, React.createElement(RequiredLabel, {
-      text: "Number of sessions"
+      text: t("number_of_sessions")
     }), React.createElement(Input, {
       name: "numberOfSessions",
       value: !!values.numberOfSessions && values.numberOfSessions,
@@ -18228,7 +18926,7 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
     }, React.createElement(Col, {
       md: 6
     }, React.createElement(RequiredLabel, {
-      text: "Begin date"
+      text: t("begin_date")
     }), React.createElement(DatePicker, {
       value: values.beginDate,
       todayButton: "Today",
@@ -18250,7 +18948,7 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
     })), React.createElement(Col, {
       md: 6
     }, React.createElement(RequiredLabel, {
-      text: "Duration (days)"
+      text: t("duration_days")
     }), React.createElement(Input, {
       name: "duration",
       value: !!values.duration && values.duration,
@@ -18264,7 +18962,7 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
     })))), React.createElement(Col, {
       md: 12,
       className: "mb-2"
-    }, React.createElement(Label, null, "Students"), React.createElement(StudentSelector, {
+    }, React.createElement(Label, null, t('students')), React.createElement(StudentSelector, {
       onChange: function onChange(e) {
         formProps.setFieldValue("studentIds", e.map(function (i) {
           return i.value;
@@ -18284,9 +18982,9 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
       striped: true,
       responsive: true,
       size: "sm"
-    }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Student"), React.createElement("th", {
+    }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, t('Student')), React.createElement("th", {
       className: "text-center"
-    }, "Action"))), React.createElement("tbody", null, !!values.students && values.students.map(function (record) {
+    }, t('action')))), React.createElement("tbody", null, !!values.students && values.students.map(function (record) {
       return React.createElement("tr", null, React.createElement("td", null, record.fullName + " (" + record.email + ")"), React.createElement("td", {
         className: "text-center"
       }, React.createElement(DeleteButtonIcon, {
@@ -18322,7 +19020,7 @@ var removeStudent$1 = function removeStudent(customAlertStudentId) {
   return api["delete"](CUSTOM_ALERT_URL + "/customAlertStudents/" + customAlertStudentId);
 };
 
-var initValue$p = {
+var initValue$q = {
   learningSupportCategoryId: 0,
   numberOfSessions: 0,
   beginDate: "",
@@ -18337,7 +19035,7 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = useState(initValue$p),
+  var _useState2 = useState(initValue$q),
       customAlertDetail = _useState2[0],
       setCustomAlertDetail = _useState2[1];
 
@@ -18366,14 +19064,14 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
   };
 
   useEffect(function () {
-    !!id ? getData() : setCustomAlertDetail(initValue$p);
+    !!id ? getData() : setCustomAlertDetail(initValue$q);
   }, [id]);
   useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setCustomAlertDetail(initValue$p);
+    setCustomAlertDetail(initValue$q);
     setId(0);
   };
 
@@ -18481,7 +19179,7 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
     customAlertDetail: customAlertDetail,
     confirmData: confirmData,
     onRemoveStudent: onRemoveStudent,
-    initValue: initValue$p,
+    initValue: initValue$q,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -18490,7 +19188,7 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
   };
 };
 
-var TITLE$p = "Custom alert list";
+var TITLE$q = "Custom alert list";
 
 var useCustomAlertList = function useCustomAlertList() {
   var customAlertList = useSelector(function (state) {
@@ -18578,7 +19276,7 @@ var useCustomAlertList = function useCustomAlertList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$p;
+    document.title = TITLE$q;
   }, []);
   useEffect(function () {
     getData();
@@ -18593,11 +19291,14 @@ var useCustomAlertList = function useCustomAlertList() {
   };
 };
 
-var header$7 = "Custom alert";
+var header$7 = "custom_alert";
 
 var CustomAlertList = function CustomAlertList() {
   var modal = useRef();
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useCustomAlertList = useCustomAlertList(),
       customAlertList = _useCustomAlertList.customAlertList,
       totalItems = _useCustomAlertList.totalItems,
@@ -18647,8 +19348,8 @@ var CustomAlertList = function CustomAlertList() {
     className: "fadeIn animated"
   }, React.createElement(CustomAlertDetailModal$1, {
     ref: modal,
-    header: !!id ? "Edit custom alert" : "Create custom alert",
-    confirmText: !!id ? "Update" : "Create",
+    header: !!id ? t("edit_custom_alert") : t("create_custom_alert"),
+    confirmText: !!id ? t("update") : t("create"),
     onConfirm: onConfirm,
     onCancel: onCancel,
     customAlertDetail: customAlertDetail,
@@ -18661,19 +19362,19 @@ var CustomAlertList = function CustomAlertList() {
     when: edited
   }), React.createElement("h5", {
     className: "mb-2"
-  }, header$7), React.createElement(Row, {
+  }, t(header$7)), React.createElement(Row, {
     className: "my-2"
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create custom alert",
+    text: t("create_custom_alert"),
     onClick: function onClick() {
       return openModal();
     }
   })), React.createElement(Col, {
     md: 4,
     className: "d-flex align-items-center justify-content-end"
-  }, "Total of custom alert: ", totalItems)), React.createElement(Row, {
+  }, t("total_of_custom_alert"), ": ", totalItems)), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -18685,17 +19386,17 @@ var CustomAlertList = function CustomAlertList() {
     size: "sm"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "align-top"
-  }, "Category"), React.createElement("th", {
+  }, t("category")), React.createElement("th", {
     className: "align-top"
-  }, "Number of sessions"), React.createElement("th", {
+  }, t("number_of_sessions")), React.createElement("th", {
     className: "align-top"
-  }, "Number of students"), React.createElement("th", {
+  }, t("number_of_students")), React.createElement("th", {
     className: "align-top"
-  }, "Begin date"), React.createElement("th", {
+  }, t("begin_date")), React.createElement("th", {
     className: "align-top"
-  }, "Duration (days)"), React.createElement("th", {
+  }, t('duration_days')), React.createElement("th", {
     className: "text-center"
-  }, "Action"))), React.createElement("tbody", null, customAlertList.map(function (record) {
+  }, t("action")))), React.createElement("tbody", null, customAlertList.map(function (record) {
     return React.createElement("tr", {
       key: record.id
     }, React.createElement("td", {
@@ -18720,7 +19421,7 @@ var CustomAlertList = function CustomAlertList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "Custom alert"
+    label: t("custom_alert")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -18741,7 +19442,7 @@ var CustomAlertList = function CustomAlertList() {
 
 var certificate = {"certificate-item":"_3DVMZ","add-breakpoint":"_3zOGW","box-item":"_3DQwX"};
 
-var schema$j = object({
+var schema$k = object({
   name: string().required("Name is required"),
   certificateItems: array().test("Text label required", "Text is required", function (value) {
     return value === null || value === void 0 ? void 0 : value.every(function (item) {
@@ -18766,7 +19467,7 @@ var CertificateDetailModal = function CertificateDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: certificateDetail,
     enableReinitialize: true,
-    validationSchema: schema$j,
+    validationSchema: schema$k,
     onSubmit: function onSubmit(values, actions) {
       var _values$certificateIt;
 
@@ -19072,7 +19773,7 @@ var initItemValue = {
   text: "",
   breakPointCertification: []
 };
-var initValue$q = {
+var initValue$r = {
   name: "",
   description: "",
   imageUrl: "",
@@ -19094,7 +19795,7 @@ var useCertificateDetail = function useCertificateDetail() {
       file = _useState2[0],
       setFile = _useState2[1];
 
-  var _useState3 = useState(initValue$q),
+  var _useState3 = useState(initValue$r),
       certificateDetail = _useState3[0],
       setCertificateDetail = _useState3[1];
 
@@ -19123,7 +19824,7 @@ var useCertificateDetail = function useCertificateDetail() {
   };
 
   useEffect(function () {
-    !!id ? getData() : setCertificateDetail(initValue$q);
+    !!id ? getData() : setCertificateDetail(initValue$r);
   }, [id]);
   useEffect(function () {
     setEditedFalse();
@@ -19211,7 +19912,7 @@ var useCertificateDetail = function useCertificateDetail() {
     certificateDetail: certificateDetail,
     initItemValue: initItemValue,
     confirmData: confirmData,
-    initValue: initValue$q,
+    initValue: initValue$r,
     setFile: setFile,
     edited: edited,
     setEdited: setEdited,
@@ -19220,7 +19921,7 @@ var useCertificateDetail = function useCertificateDetail() {
   };
 };
 
-var TITLE$q = "Certificate list";
+var TITLE$r = "Certificate list";
 
 var useCertificateList = function useCertificateList() {
   var certificateList = useSelector(function (state) {
@@ -19303,7 +20004,7 @@ var useCertificateList = function useCertificateList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$q;
+    document.title = TITLE$r;
   }, []);
   useEffect(function () {
     getData();
@@ -19451,7 +20152,7 @@ var CertificateList = function CertificateList() {
   }))));
 };
 
-var TITLE$r = "Certificate list";
+var TITLE$s = "Certificate list";
 
 var useCertificateList$1 = function useCertificateList() {
   var dispatch = useDispatch();
@@ -19539,7 +20240,7 @@ var useCertificateList$1 = function useCertificateList() {
     }
   }, [listWaiting]);
   useEffect(function () {
-    document.title = TITLE$r;
+    document.title = TITLE$s;
     getListWaiting();
     getListApproved();
   }, []);
@@ -20237,8 +20938,8 @@ var INITIAl_STUDENT_DASHBOARD = {
   totalTimeOneToOne: 0
 };
 var INITIAL_AVG = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-var COLOR_CHART_AND_PERCENTS = ["#40D2CC", "#78B6E2", "#FFB04F", "#CE4A49", "#1CB7B1", "#4B92CE", "#F09422", "#A23333", "#0D9994", "#1D74C5", "#DD7B00"];
-var COLOR_CHART_BUBBLE = ["#53ACF5", "#9DD889", "#FFB04F", "#E15454", "#9747FF"];
+var COLOR_CHART_AND_PERCENTS = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
+var COLOR_CHART_BUBBLE = ["#336DDA", "#00B8B2", "#C6A762", "#C94645", "#BD7CFF"];
 var PERCENT = [100, 80, 60, 40, 20, 0, -20, -40, -60, -80, -100];
 var GENDER_OPTION = [{
   value: -1,
@@ -25973,7 +26674,7 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
       width: 1,
       colors: ["#fff"]
     },
-    colors: ["#86BD74", "#9DD889"],
+    colors: ["#00B8B2", "#006E60"],
     xaxis: {
       categories: labelNames,
       labels: {
@@ -26050,7 +26751,7 @@ var optionsChartGrade = function optionsChartGrade(maxDatas) {
       enabled: false,
       style: {
         fontSize: "16px",
-        colors: ["#4B92CE"]
+        colors: ["#336DDA"]
       }
     },
     states: {
@@ -26086,7 +26787,7 @@ var optionsChartGrade = function optionsChartGrade(maxDatas) {
       },
       axisBorder: {
         show: true,
-        color: "#F6F6F6"
+        color: "#FFFFFF"
       },
       axisTicks: {
         show: false
@@ -26137,7 +26838,7 @@ var studentByAgeOptions = function studentByAgeOptions(series) {
     grid: {
       borderColor: "#F6F6F6"
     },
-    colors: ["#78B6E2", "#80E7E2"],
+    colors: ["#B3D4FF", "#00B8B2"],
     xaxis: {
       axisBorder: {
         show: true,
@@ -26210,7 +26911,7 @@ var average = function average(arr) {
 };
 var pieChartOptions = {
   labels: LABEL_NAME_PIE_CHART,
-  colors: ["#40D2CC", "#A4D1F0"],
+  colors: ["#387875", "#B3D4FF"],
   legend: {
     show: false
   },
@@ -26335,6 +27036,7 @@ var readinesToLearnoptions = function readinesToLearnoptions(seriesName, data) {
     });
   });
   return {
+    colors: ["#336DDA", "#00B8B2", "#C6A762", "#C94645", "#BD7CFF"],
     chart: {
       height: 450,
       toolbar: {
@@ -27283,7 +27985,7 @@ var getLearningStrategiesTableApi = function getLearningStrategiesTableApi(filte
   });
 };
 
-var TITLE$s = "Dashboard";
+var TITLE$t = "Dashboard";
 var DEFAULT_START_DATE = moment().subtract(3, 'months').startOf("day").valueOf();
 var DEFAULT_END_DATE = moment().endOf("day").valueOf();
 
@@ -27710,7 +28412,7 @@ var useDashboard = function useDashboard() {
 
   var getData = useCallback(function () {
     try {
-      document.title = TITLE$s;
+      document.title = TITLE$t;
       dispatch(setLoading(true));
       return Promise.resolve(Promise.any([callApi(getAllTotalTime, setListTotalTime, []), callApi(getReadinessToLearning, setReadinessToLearning, []), callApi(getTopLearningStrategies, setTopLearningStrategies, []), callApi(getStudentByGrade, setStudentByGrade, []), callApi(getOverviewQuestionChart, setChartOneToOneData, [], "OneToOne"), callApi(getOverviewQuestionChart, setChartClassReflection, [], "ClassReflection"), callApi(getOverviewQuestionChart, setChartConference, [], "Conference"), callApi(getOverviewQuestionChart, setLearningProgress, [], "LearningProgress"), callApi(getOverviewQuestionChart, setSafety, [], "Safety"), callApi(getOverviewQuestionChart, setTopSkill, [], "TopSkill"), callApi(getFriendCircleItems, setFriendCircles, INITIAL_BEST_FRIENDS), callApi(getActivityCircleItems, setActivityCircles, INITIAL_ACTIVITY_FRIENDS), callApi(getStudentBySpecialNeed, setStudentBySpecialNeed, []), callApi(getStudentByAge, setStudentByAge, INITIAL_AGE_OF_STUDENT), callApi(getStudentByGender, setStudentByGender, [])])).then(function () {
         dispatch(setLoading(false));
@@ -27929,7 +28631,7 @@ var useChartDatas = function useChartDatas() {
   var chartDashBoards = [{
     chartIndex: 2,
     id: "readiness_to_learn",
-    label: "Readiness to Learn",
+    label: "readiness_to_learn",
     children: function children(_) {
       return React.createElement(BubbleChartCustom$1, {
         data: readinessToLearning
@@ -27937,11 +28639,11 @@ var useChartDatas = function useChartDatas() {
     },
     isShowChangeChart: false,
     options: [],
-    contentTooltip: "The represenation of individual student responses to their own feelings of Energy, Focus, Happiness, Safety, and Stress at the time administered. Note that scores are set on a 1-100 scale with the exception of Stress which optimum stress is set at '0' to get a sense of High Stress vs Low Stress."
+    contentTooltip: "tooltip_content_readiness_to_learn_chart"
   }, {
     chartIndex: 1,
     id: "high_impact_learning_strategie",
-    label: "High Impact Learning Strategies",
+    label: "high_impact_learning_strategies",
     children: function children(_) {
       return React.createElement(TopLearningStrategy$1, {
         data: topLearningStrategies
@@ -27949,12 +28651,12 @@ var useChartDatas = function useChartDatas() {
     },
     isShowChangeChart: false,
     options: [],
-    contentTooltip: "Both the composite of individual students reporting their perceived use of John Hattie's High Impact Learning Strategies measured against the actual application with a teacher in total.",
+    contentTooltip: "tooltip_content_high_impact_chart",
     handleClickOpenTable: handleOpenCloseLearningStrategiesTable
   }, {
     chartIndex: 3,
     id: "1_to_1",
-    label: "1 To 1",
+    label: "1_to_1",
     children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedOneToOne,
@@ -27976,11 +28678,11 @@ var useChartDatas = function useChartDatas() {
       label: "Bar charts",
       value: TYPECHART.BAR
     }],
-    contentTooltip: "The composite results of the survey completed by individual students assessing their own perception of performance in the 6 key areas followed by 3 specific areas of well being over time."
+    contentTooltip: "tooltip_content_1_to_1_chart"
   }, {
     chartIndex: 4,
     id: "class_reflection",
-    label: "Reflection",
+    label: "reflection",
     children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedClassReflection,
@@ -28003,11 +28705,11 @@ var useChartDatas = function useChartDatas() {
       label: "Line charts",
       value: TYPECHART.LINE
     }],
-    contentTooltip: "The result of surveys sent to any individual (external or internal) that connects with the student to assist in measuring the individual student's: Productivity, Happiness, Energy, Focus, and Stress over time."
+    contentTooltip: "tooltip_content_class_reflection_chart"
   }, {
     chartIndex: 5,
     id: "conference",
-    label: "Conferences",
+    label: "conferences",
     children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedConference,
@@ -28029,11 +28731,11 @@ var useChartDatas = function useChartDatas() {
       label: "Bar charts",
       value: TYPECHART.BAR
     }],
-    contentTooltip: "The composite representation of individual aggregate scores located at the bottom of individual Conferences conducted between Teachers and Students over time. Note that scores of 'Not Applicable' do not get measured."
+    contentTooltip: "tooltip_content_conference_chart"
   }, {
     chartIndex: 6,
     id: "safety",
-    label: "Safety",
+    label: "safety",
     children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedSafety,
@@ -28056,7 +28758,7 @@ var useChartDatas = function useChartDatas() {
       label: "Line charts",
       value: TYPECHART.LINE
     }],
-    contentTooltip: "The visual represenation of all the responses from the question asking students to rate their perceived level of safety for themselves at your school over time."
+    contentTooltip: "tooltip_content_safety_chart"
   }, {
     chartIndex: 7,
     id: "student_by_age",
@@ -28070,11 +28772,11 @@ var useChartDatas = function useChartDatas() {
     },
     isShowChangeChart: false,
     options: [],
-    contentTooltip: "The specific representation of students by gender and grade level at your school."
+    contentTooltip: "tooltip_content_student_by_age_chart"
   }, {
     chartIndex: 8,
     id: "student_by_grade",
-    label: "Students by Designation",
+    label: "students_by_designation",
     children: function children(_) {
       return React.createElement(StudentByGrade$1, {
         data: studentByGrade
@@ -28082,42 +28784,42 @@ var useChartDatas = function useChartDatas() {
     },
     isShowChangeChart: false,
     options: [],
-    contentTooltip: "The composite representation of students by individual grades in your school with specific designations."
+    contentTooltip: "tooltip_content_students_by_designation"
   }];
   var initialTypeChart = chartDashBoards.map(function (i) {
     return i.options.length > 0 ? i.options[0].value : TYPECHART.AREA;
   });
   var totalCardData = [{
     icon: "images/icon_chart.png",
-    title: "Total 1-to-1:",
+    title: "total_1_to_1",
     value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.totalOneToOne,
     isUp: true,
     deviant: "2",
     filter: "this week"
   }, {
     icon: "images/icon_watch.png",
-    title: "Total 1-to-1 Time:",
+    title: "total_1_to_1_time",
     value: getConvertMinuteToHour(listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.totalTimeOneToOne),
     isUp: true,
     deviant: "17 min",
     filter: "this week"
   }, {
     icon: "images/icon_meeting.png",
-    title: "Total Conferences:",
+    title: "total_conferences",
     value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.totalConference,
     isUp: false,
     deviant: "-4",
     filter: "this week"
   }, {
     icon: "images/icon_watch.png",
-    title: "Total Conferences Time:",
+    title: "total_conferences_time",
     value: getConvertMinuteToHour(listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.totalTimeConference),
     isUp: true,
     deviant: "8 min",
     filter: "this week"
   }, {
     icon: "images/icon_watch.png",
-    title: "Total Reflections:",
+    title: "total_reflections",
     value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.avgClassReflection,
     isUp: false,
     deviant: "-15%",
@@ -28314,6 +29016,10 @@ var SelectFilter = function SelectFilter(_ref) {
       filter = _ref.filter,
       teacherUserId = _ref.teacherUserId,
       changeCurrentTeacherUserId = _ref.changeCurrentTeacherUserId;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var ref = useRef(null);
 
   var _useState = useState(false),
@@ -28429,16 +29135,14 @@ var SelectFilter = function SelectFilter(_ref) {
         alt: labelBox.calendar.label
       }), React.createElement("p", {
         className: styles["color-filter"] + " my-0 mx-2"
-      }, "Start Date", !!(filter !== null && filter !== void 0 && filter.startDate) && ": " + moment(filter === null || filter === void 0 ? void 0 : filter.startDate).format("DD/MM/YYYY"))), isOpenCollapse && React.createElement("div", {
+      }, t(name), !!(filter !== null && filter !== void 0 && filter.startDate) && ": " + moment(filter === null || filter === void 0 ? void 0 : filter.startDate).format("DD/MM/YYYY"))), isOpenCollapse && React.createElement("div", {
         className: styles["date-picker"] + " date-picker-admin"
       }, React.createElement(DatePicker, {
         selected: moment(filter === null || filter === void 0 ? void 0 : filter.startDate).toDate(),
         onChange: function onChange(date) {
           return handleChangeStartDate(date);
         },
-        inline: true,
-        maxDate: moment(filter === null || filter === void 0 ? void 0 : filter.endDate).toDate(),
-        minDate: moment(filter === null || filter === void 0 ? void 0 : filter.endDate).subtract(3, "months").toDate()
+        inline: true
       })));
     }
 
@@ -28455,16 +29159,14 @@ var SelectFilter = function SelectFilter(_ref) {
         alt: labelBox.calendar.label
       }), React.createElement("p", {
         className: styles["color-filter"] + " my-0 mx-2"
-      }, "End Date", !!(filter !== null && filter !== void 0 && filter.endDate) && ": " + moment(filter === null || filter === void 0 ? void 0 : filter.endDate).format("DD/MM/YYYY"))), isOpenCollapse && React.createElement("div", {
+      }, t(name), !!(filter !== null && filter !== void 0 && filter.endDate) && ": " + moment(filter === null || filter === void 0 ? void 0 : filter.endDate).format("DD/MM/YYYY"))), isOpenCollapse && React.createElement("div", {
         className: styles["date-picker"] + " date-picker-admin"
       }, React.createElement(DatePicker, {
         selected: moment(filter === null || filter === void 0 ? void 0 : filter.endDate).toDate(),
         onChange: function onChange(date) {
           return handleChangeEndDate(date);
         },
-        inline: true,
-        maxDate: moment(filter === null || filter === void 0 ? void 0 : filter.startDate).add(3, "months").toDate(),
-        minDate: moment(filter === null || filter === void 0 ? void 0 : filter.startDate).toDate()
+        inline: true
       })));
     }
 
@@ -28481,7 +29183,7 @@ var SelectFilter = function SelectFilter(_ref) {
         alt: labelBox.gender.label
       }), React.createElement("p", {
         className: styles["color-filter"] + " my-0 mx-2"
-      }, labelBox.gender.value === -1 ? "Gender" : labelBox.gender.label), !isOpenCollapse ? React.createElement(FiChevronDown, null) : React.createElement(FiChevronUp, null)), React.createElement("div", {
+      }, labelBox.gender.value === -1 ? "" + t(name) : labelBox.gender.label), !isOpenCollapse ? React.createElement(FiChevronDown, null) : React.createElement(FiChevronUp, null)), React.createElement("div", {
         className: styles["select-filter-component"] + " " + (!isOpenCollapse && "" + styles["hidden"])
       }, React.createElement(Form, {
         className: "" + styles["box-select"]
@@ -28523,7 +29225,7 @@ var SelectFilter = function SelectFilter(_ref) {
         alt: name
       }), React.createElement("p", {
         className: styles["color-filter"] + " my-0 mx-2"
-      }, labelBox.grade === -1 ? name : option === null || option === void 0 ? void 0 : (_option$find = option.find(function (i) {
+      }, labelBox.grade === -1 ? "" + t(name) : option === null || option === void 0 ? void 0 : (_option$find = option.find(function (i) {
         return i.value === labelBox.grade;
       })) === null || _option$find === void 0 ? void 0 : _option$find.label), !isOpenCollapse ? React.createElement(FiChevronDown, null) : React.createElement(FiChevronUp, null)), React.createElement("div", {
         className: styles["select-filter-component"] + " " + (!isOpenCollapse && "" + styles["hidden"])
@@ -28567,7 +29269,7 @@ var SelectFilter = function SelectFilter(_ref) {
         alt: name
       }), React.createElement("p", {
         className: styles["color-filter"] + " my-0 mx-2"
-      }, labelBox.bandScore === -1 ? name : option === null || option === void 0 ? void 0 : (_option$find2 = option.find(function (i) {
+      }, labelBox.bandScore === -1 ? "" + t(name) : option === null || option === void 0 ? void 0 : (_option$find2 = option.find(function (i) {
         return i.value === labelBox.bandScore;
       })) === null || _option$find2 === void 0 ? void 0 : _option$find2.label), !isOpenCollapse ? React.createElement(FiChevronDown, null) : React.createElement(FiChevronUp, null)), React.createElement("div", {
         className: styles["select-filter-component"] + " " + (!isOpenCollapse && "" + styles["hidden"])
@@ -28609,7 +29311,7 @@ var SelectFilter = function SelectFilter(_ref) {
         alt: name
       }), React.createElement("p", {
         className: styles["color-filter"] + " my-0 mx-2"
-      }, teacherName || name), !isOpenCollapse ? React.createElement(FiChevronDown, null) : React.createElement(FiChevronUp, null)), React.createElement("div", {
+      }, teacherName || t(name)), !isOpenCollapse ? React.createElement(FiChevronDown, null) : React.createElement(FiChevronUp, null)), React.createElement("div", {
         className: styles["select-filter-component"] + " " + (!isOpenCollapse && "" + styles["hidden"])
       }, React.createElement(TeacherItemSelector, {
         onChange: function onChange(e) {
@@ -28641,7 +29343,7 @@ var SelectFilter = function SelectFilter(_ref) {
         alt: name
       }), React.createElement("p", {
         className: styles["color-filter"] + " my-0 mx-2"
-      }, studentName || name), !isOpenCollapse ? React.createElement(FiChevronDown, null) : React.createElement(FiChevronUp, null)), React.createElement("div", {
+      }, studentName || t(name)), !isOpenCollapse ? React.createElement(FiChevronDown, null) : React.createElement(FiChevronUp, null)), React.createElement("div", {
         className: styles["select-filter-component"] + " " + (!isOpenCollapse && "" + styles["hidden"])
       }, React.createElement(StudentItemSelector, {
         onChange: function onChange(e) {
@@ -28678,7 +29380,7 @@ var TotalCard = function TotalCard(_ref) {
     src: icon
   }), React.createElement("p", {
     className: styles$1["title-card"] + " m-0 mx-2"
-  }, title)), React.createElement("div", {
+  }, title, ":")), React.createElement("div", {
     className: "d-flex align-items-center justify-content-center mt-3"
   }, React.createElement("p", {
     className: "" + styles$1["value-card"]
@@ -28710,6 +29412,10 @@ var DashboardToPDF = function DashboardToPDF(props) {
       dataConvertedSafety = props.dataConvertedSafety,
       activeColumnSafety = props.activeColumnSafety,
       avgSafety = props.avgSafety;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var dispatch = useDispatch();
   var filterSelectedToPDF = selectedToPDF === null || selectedToPDF === void 0 ? void 0 : selectedToPDF.filter(function (i) {
     return i.id != null;
@@ -28809,7 +29515,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                               doc.setFontSize(14);
                               doc.setFont("Helvetica", "normal", "bold");
-                              doc.text((_filterSelectedToPDF$2 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$2 === void 0 ? void 0 : _filterSelectedToPDF$2.label, left, 70);
+                              doc.text(t((_filterSelectedToPDF$2 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$2 === void 0 ? void 0 : _filterSelectedToPDF$2.label), left, 70);
                               var chart = document.getElementById("student_by_grade");
                               return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                                 doc.addImage(canvas.toDataURL("image/png"), left, line, 400, 130);
@@ -28830,7 +29536,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                             doc.setFontSize(14);
                             doc.setFont("Helvetica", "normal", "bold");
-                            doc.text((_filterSelectedToPDF$4 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$4 === void 0 ? void 0 : _filterSelectedToPDF$4.label, left, 70);
+                            doc.text(t((_filterSelectedToPDF$4 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$4 === void 0 ? void 0 : _filterSelectedToPDF$4.label), left, 70);
                             var chart = document.getElementById("student_by_age");
                             return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                               doc.addImage(canvas.toDataURL("image/png"), left, line, 800, 450);
@@ -28853,7 +29559,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                           doc.setFontSize(14);
                           doc.setTextColor("#242424");
                           doc.setFont("Helvetica", "normal", "bold");
-                          doc.text((_filterSelectedToPDF$6 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$6 === void 0 ? void 0 : _filterSelectedToPDF$6.label, left, 70);
+                          doc.text(t((_filterSelectedToPDF$6 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$6 === void 0 ? void 0 : _filterSelectedToPDF$6.label), left, 70);
                           var chart = document.getElementById("safety");
                           return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                             function _temp12() {
@@ -28984,7 +29690,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                         doc.setFontSize(14);
                         doc.setTextColor("#242424");
                         doc.setFont("Helvetica", "normal", "bold");
-                        doc.text((_filterSelectedToPDF$8 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$8 === void 0 ? void 0 : _filterSelectedToPDF$8.label, left, 70);
+                        doc.text(t((_filterSelectedToPDF$8 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$8 === void 0 ? void 0 : _filterSelectedToPDF$8.label), left, 70);
                         var chart = document.getElementById("conference");
                         return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                           function _temp9() {
@@ -29002,7 +29708,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                                 doc.text(dataConvertedConference[idxConferenceConverted], left + 7, line + 5);
                                 left = left + dataConvertedConference[idxConferenceConverted].length * 3 + 15;
 
-                                if (!!dataConvertedConference[idxConferenceConverted + 1] && left + dataConvertedConference[idxConferenceConverted + 1].length * 3 + 15) {
+                                if (!!dataConvertedConference[idxConferenceConverted + 1] && left + dataConvertedConference[idxConferenceConverted + 1].length * 3 + 15 > WIDTH_PAPER) {
                                   left = 20;
                                   line += 10;
                                 }
@@ -29055,17 +29761,19 @@ var DashboardToPDF = function DashboardToPDF(props) {
                             doc.setFontSize(8);
 
                             for (var idxConferenceResultQuestion = 0; idxConferenceResultQuestion < (listResultQuestion === null || listResultQuestion === void 0 ? void 0 : listResultQuestion.length); idxConferenceResultQuestion++) {
-                              if (listResultQuestion[idxConferenceResultQuestion] != 0) {
-                                var _listResultQuestion$i4, _listResultQuestion$i5;
+                              var _listResultQuestion$i4;
+
+                              if (((_listResultQuestion$i4 = listResultQuestion[idxConferenceResultQuestion]) === null || _listResultQuestion$i4 === void 0 ? void 0 : _listResultQuestion$i4.avgOfStudentChoice) != 0) {
+                                var _listResultQuestion$i5, _listResultQuestion$i6;
 
-                                var resultQuestion = (_listResultQuestion$i4 = listResultQuestion[idxConferenceResultQuestion]) === null || _listResultQuestion$i4 === void 0 ? void 0 : _listResultQuestion$i4.questionText;
+                                var resultQuestion = (_listResultQuestion$i5 = listResultQuestion[idxConferenceResultQuestion]) === null || _listResultQuestion$i5 === void 0 ? void 0 : _listResultQuestion$i5.questionText;
                                 doc.setDrawColor(0);
                                 doc.setFillColor(COLOR_CHART_AND_PERCENTS[idxConferenceResultQuestion]);
                                 doc.roundedRect(left, _line + 5, 5, 5, 1, 1, "F");
                                 doc.setFont("Helvetica", "normal", "bold");
                                 doc.text(resultQuestion + ":", left + 8, _line + 10);
                                 doc.setFont("Helvetica", "normal", "normal");
-                                doc.text(((_listResultQuestion$i5 = listResultQuestion[idxConferenceResultQuestion]) === null || _listResultQuestion$i5 === void 0 ? void 0 : _listResultQuestion$i5.avgOfStudentChoice.toFixed(2)) + "%", left + resultQuestion.length * 3 + 17, _line + 10);
+                                doc.text(((_listResultQuestion$i6 = listResultQuestion[idxConferenceResultQuestion]) === null || _listResultQuestion$i6 === void 0 ? void 0 : _listResultQuestion$i6.avgOfStudentChoice.toFixed(2)) + "%", left + resultQuestion.length * 3 + 17, _line + 10);
                                 _line += 10;
 
                                 if (_line > lineOptionConference) {
@@ -29113,7 +29821,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                       doc.setFontSize(14);
                       doc.setTextColor("#242424");
                       doc.setFont("Helvetica", "normal", "bold");
-                      doc.text((_filterSelectedToPDF$10 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$10 === void 0 ? void 0 : _filterSelectedToPDF$10.label, left, 70);
+                      doc.text(t((_filterSelectedToPDF$10 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$10 === void 0 ? void 0 : _filterSelectedToPDF$10.label), left, 70);
                       var chart = document.getElementById("class_reflection");
                       return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                         function _temp6() {
@@ -29248,7 +29956,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                     doc.setFontSize(14);
                     doc.setFont("Helvetica", "normal", "bold");
-                    doc.text((_filterSelectedToPDF$12 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$12 === void 0 ? void 0 : _filterSelectedToPDF$12.label, left, 70);
+                    doc.text(t((_filterSelectedToPDF$12 = filterSelectedToPDF[i]) === null || _filterSelectedToPDF$12 === void 0 ? void 0 : _filterSelectedToPDF$12.label), left, 70);
                     var chart = document.getElementById("1_to_1");
                     return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                       function _temp3() {
@@ -29317,15 +30025,15 @@ var DashboardToPDF = function DashboardToPDF(props) {
                         doc.setFontSize(8);
 
                         for (var indexResult = 0; indexResult < (listResultQuestion === null || listResultQuestion === void 0 ? void 0 : listResultQuestion.length); indexResult++) {
-                          var _listResultQuestion$i6;
+                          var _listResultQuestion$i7;
 
-                          if (((_listResultQuestion$i6 = listResultQuestion[indexResult]) === null || _listResultQuestion$i6 === void 0 ? void 0 : _listResultQuestion$i6.avgOfStudentChoice) != 0) {
-                            var _listResultQuestion$i7, _listResultQuestion$i8;
+                          if (((_listResultQuestion$i7 = listResultQuestion[indexResult]) === null || _listResultQuestion$i7 === void 0 ? void 0 : _listResultQuestion$i7.avgOfStudentChoice) != 0) {
+                            var _listResultQuestion$i8, _listResultQuestion$i9;
 
-                            var resultQuestion = ((_listResultQuestion$i7 = listResultQuestion[indexResult]) === null || _listResultQuestion$i7 === void 0 ? void 0 : _listResultQuestion$i7.questionText.slice(3, (_listResultQuestion$i8 = listResultQuestion[indexResult]) === null || _listResultQuestion$i8 === void 0 ? void 0 : _listResultQuestion$i8.questionText.indexOf("</p>"))) || "";
+                            var resultQuestion = ((_listResultQuestion$i8 = listResultQuestion[indexResult]) === null || _listResultQuestion$i8 === void 0 ? void 0 : _listResultQuestion$i8.questionText.slice(3, (_listResultQuestion$i9 = listResultQuestion[indexResult]) === null || _listResultQuestion$i9 === void 0 ? void 0 : _listResultQuestion$i9.questionText.indexOf("</p>"))) || "";
 
                             if (resultQuestion != "") {
-                              var _listResultQuestion$i9, _listResultQuestion$i10;
+                              var _listResultQuestion$i10, _listResultQuestion$i11;
 
                               doc.setDrawColor(0);
                               doc.setFillColor(COLOR_CHART_AND_PERCENTS[indexResult]);
@@ -29333,7 +30041,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion + ":", left + 8, _line + 10);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_listResultQuestion$i9 = listResultQuestion[indexResult]) === null || _listResultQuestion$i9 === void 0 ? void 0 : (_listResultQuestion$i10 = _listResultQuestion$i9.avgOfStudentChoice) === null || _listResultQuestion$i10 === void 0 ? void 0 : _listResultQuestion$i10.toFixed(2)) + "%", left + (resultQuestion === null || resultQuestion === void 0 ? void 0 : resultQuestion.length) * 2.5 + 20.5, _line + 10);
+                              doc.text(((_listResultQuestion$i10 = listResultQuestion[indexResult]) === null || _listResultQuestion$i10 === void 0 ? void 0 : (_listResultQuestion$i11 = _listResultQuestion$i10.avgOfStudentChoice) === null || _listResultQuestion$i11 === void 0 ? void 0 : _listResultQuestion$i11.toFixed(2)) + "%", left + (resultQuestion === null || resultQuestion === void 0 ? void 0 : resultQuestion.length) * 2.5 + 20.5, _line + 10);
                             }
 
                             _line += 10;
@@ -29380,7 +30088,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                 return Promise.resolve(createImageHeader()).then(function () {
                   doc.setFontSize(14);
                   doc.setFont("Helvetica", "normal", "bold");
-                  doc.text(filterSelectedToPDF[i].label, left, 70);
+                  doc.text(t(filterSelectedToPDF[i].label), left, 70);
                   var chart = document.getElementById("readiness_to_learn");
                   return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                     doc.addImage(canvas.toDataURL("image/png"), 15, line + 10, 420, 150);
@@ -29399,7 +30107,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
               return Promise.resolve(createImageHeader()).then(function () {
                 doc.setFontSize(14);
                 doc.setFont("Helvetica", "normal", "bold");
-                doc.text(filterSelectedToPDF[i].label, left, 70);
+                doc.text(t(filterSelectedToPDF[i].label), left, 70);
                 doc.setFontSize(8);
                 var topLearningStrategiesData = topLearningStrategies === null || topLearningStrategies === void 0 ? void 0 : topLearningStrategies.learningStrategies;
 
@@ -29645,6 +30353,9 @@ var Dashboard = function Dashboard() {
       teacherUserId = _useBehavior.teacherUserId,
       changeCurrentTeacherUserId = _useBehavior.changeCurrentTeacherUserId;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useState = useState(false),
       modal = _useState[0],
       setModal = _useState[1];
@@ -29665,11 +30376,11 @@ var Dashboard = function Dashboard() {
     centered: true
   }, React.createElement(ModalHeader, null, React.createElement("p", {
     className: "" + styles$1["title-modal"]
-  }, "Export to PDF"), React.createElement("p", {
+  }, t('export_to_pdf')), React.createElement("p", {
     className: "" + styles$1["header-desc-modal"]
-  }, "The data is taken from the home screen."), React.createElement("p", {
+  }, t('the_data_is_taken_from_the_home_screen'), "."), React.createElement("p", {
     className: "" + styles$1["header-desc-modal"]
-  }, "Make sure everything is set correctly before exporting.")), React.createElement(ModalBody, null, chartDashBoards === null || chartDashBoards === void 0 ? void 0 : chartDashBoards.map(function (item, index) {
+  }, t('make_sure_everything_is_set_correctly_before_exporting'), ".")), React.createElement(ModalBody, null, chartDashBoards === null || chartDashBoards === void 0 ? void 0 : chartDashBoards.map(function (item, index) {
     return React.createElement(FormGroup, {
       check: true,
       className: "" + styles$1["form-checkbox"]
@@ -29682,11 +30393,11 @@ var Dashboard = function Dashboard() {
     }), React.createElement(Label, {
       check: true,
       className: "" + styles$1["checkbox-content"]
-    }, item.label));
+    }, t("" + item.label)));
   })), React.createElement(ModalFooter, null, React.createElement(Button, {
     color: "light",
     onClick: toggle
-  }, "Cancel"), React.createElement(DashboardToPDF, {
+  }, t('cancel')), React.createElement(DashboardToPDF, {
     startTime: filter === null || filter === void 0 ? void 0 : filter.startDate,
     endTime: filter === null || filter === void 0 ? void 0 : filter.endDate,
     selectedToPDF: selectedToPrint,
@@ -29715,7 +30426,7 @@ var Dashboard = function Dashboard() {
     className: "d-flex align-items-center mx-3"
   }, React.createElement("h4", {
     className: styles$1["title-dashboard"] + " m-0"
-  }, "Hey ", user.firstName, "!"), React.createElement("img", {
+  }, t('hey'), " ", user.firstName, "!"), React.createElement("img", {
     className: "mx-2",
     src: "images/waving-hand.png",
     alt: ""
@@ -29729,7 +30440,7 @@ var Dashboard = function Dashboard() {
     alt: ""
   })), React.createElement("p", {
     className: styles$1["button-content"] + " mb-0"
-  }, "Export to PDF"))), React.createElement("div", {
+  }, t("export_to_pdf")))), React.createElement("div", {
     className: "d-flex justify-content-between flex-wrap my-2"
   }, React.createElement("div", {
     className: "d-flex"
@@ -29765,7 +30476,7 @@ var Dashboard = function Dashboard() {
   }, totalCardData.map(function (item) {
     return React.createElement(TotalCard, {
       icon: item.icon,
-      title: item.title,
+      title: t("" + item.title),
       value: item.value,
       isUp: item.isUp,
       deviant: item.deviant,
@@ -29776,7 +30487,7 @@ var Dashboard = function Dashboard() {
       key: chartDashBoard.id,
       className: "shadow-lg mb-3 " + styles$1["chart-header-wrapper"] + " " + (chartDashBoard.id === "Student_by_age" && chartIsOpened[index] && styles$1["devide-component"])
     }, React.createElement(HeaderChart, {
-      title: chartDashBoard.label,
+      title: t("" + chartDashBoard.label),
       onToggle: function onToggle() {
         return _onToggle(index);
       },
@@ -29787,7 +30498,7 @@ var Dashboard = function Dashboard() {
       },
       isOpen: chartIsOpened[index],
       options: chartDashBoard.options,
-      contentTooltip: chartDashBoard === null || chartDashBoard === void 0 ? void 0 : chartDashBoard.contentTooltip,
+      contentTooltip: t("" + (chartDashBoard === null || chartDashBoard === void 0 ? void 0 : chartDashBoard.contentTooltip)),
       index: index,
       onClickOptions: chartDashBoard === null || chartDashBoard === void 0 ? void 0 : chartDashBoard.handleClickOpenTable
     }), React.createElement(Collapse, {
@@ -29804,6 +30515,20 @@ var Dashboard = function Dashboard() {
   }));
 };
 
+var LoadLanguage = function LoadLanguage() {
+  var language = useSelector(function (state) {
+    return state.common.language;
+  });
+
+  var _useTranslation = useTranslation(),
+      i18n = _useTranslation.i18n;
+
+  useEffect(function () {
+    i18n.changeLanguage(language);
+  }, [language]);
+  return null;
+};
+
 var useAdminTraning = function useAdminTraning() {
   var dispatch = useDispatch();
 
@@ -29869,5 +30594,5 @@ var AdminTraining = function AdminTraining() {
 
 LicenseManager.setLicenseKey(LICENSE_AGGRID);
 
-export { AdminTraining, AssessmentAssignmentContainer, AssessmentList, AssetLog, AssignmentList, BadgeList, CertificateContainer, ClassList, CompareTeacher, ConferenceRubricDetail, ConferenceRubricList, CustomAlertList, Dashboard, FeedbackList, GoalExampleList, LearningStrategyList, LearningSupportCategoryList, QuestionBankContainer, QuestionBankList, QuestionCateList as QuestionCategoryList, QuestionDetail, ReflectionContainer, ReflectionFormList, SessionTemplateContainer, SessionTemplateDetail, SessionTemplateGeneralClassDetail, SessionTemplateGeneralClassList, SessionTemplateList, SetupContainer, SubjectList, SuggestionBankList as SuggestionList, TutorialScreenContainer };
+export { AdminTraining, AssessmentAssignmentContainer, AssessmentList, AssetLog, AssignmentList, BadgeList, CertificateContainer, ClassList, CompareTeacher, ConferenceRubricDetail, ConferenceRubricList, CustomAlertList, Dashboard, FeedbackList, GoalExampleList, LearningStrategyList, LearningSupportCategoryList, LoadLanguage, QuestionBankContainer, QuestionBankList, QuestionCateList as QuestionCategoryList, QuestionDetail, ReflectionContainer, ReflectionFormList, SessionTemplateContainer, SessionTemplateDetail, SessionTemplateGeneralClassDetail, SessionTemplateGeneralClassList, SessionTemplateList, SetupContainer, SubjectList, SuggestionBankList as SuggestionList, TutorialScreenContainer };
 //# sourceMappingURL=index.modern.js.map