mario-education 2.4.33-admin → 2.4.34-beta

package/dist/index.modern.js

@@ -1,8 +1,8 @@
-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';
-import { Table, Row, Col, Input, Label, Button, CustomInput, Card, CardBody, CardTitle, FormGroup, Alert, Modal, ModalHeader, ModalBody, ModalFooter, Progress, Form, Collapse } from 'reactstrap';
+import { Table, Row, Col, Input, Label, Button, CustomInput, Card, CardBody, CardTitle, FormGroup, Alert, Modal, ModalHeader, ModalBody, ModalFooter, Progress, Tooltip, Form, Collapse } from 'reactstrap';
 import { Formik } from 'formik';
 import { object, string, array, number, boolean } from 'yup';
 import { useHistory, useParams } from 'react-router-dom';
@@ -17,6 +17,7 @@ import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-mod
 import { FaCheck, FaTimes, FaRegEdit } from 'react-icons/fa';
 import { Editor } from '@tinymce/tinymce-react';
 import Chart from 'react-apexcharts';
+import 'react-datepicker/dist/react-datepicker.css';
 import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';
@@ -1045,12 +1046,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["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";
@@ -1148,7 +1151,7 @@ var ConferenceRubricList = function ConferenceRubricList() {
   }))));
 };
 
-var styles = {"test":"_3ybTi","body-question-right":"_1H0W8","body-question":"_b-AXV","badge-icon":"_1fgfO","input-color-picker":"_2YR4l","question-list-session-template":"_114IY","delete-column-question-list-sesstion-template":"_qE7J0","conference-rubric-skill-column":"_2BV3o","conference-rubric-additional-row":"_1P4F2","conference-rubric-row-test":"_1SRmg","emotional-response":"_ZDINp","star-rating":"_Kzkzd","list-teacher-compare":"_Q0sF1","teacher-item":"_gu_yD","teacher-item-selected":"_33tYy","btn-filter":"_2VZin","color-filter":"_2M0vR","block-filter-component":"_1d6uY","select-filter-component":"_1XSIo","hidden":"_3o8gR","box-select":"_3ru37","radio-btn":"_1tQvL","box-select-label":"_3VNX5"};
+var styles = {"test":"_3ybTi","body-question-right":"_1H0W8","body-question":"_b-AXV","badge-icon":"_1fgfO","input-color-picker":"_2YR4l","question-list-session-template":"_114IY","delete-column-question-list-sesstion-template":"_qE7J0","conference-rubric-skill-column":"_2BV3o","conference-rubric-additional-row":"_1P4F2","conference-rubric-row-test":"_1SRmg","emotional-response":"_ZDINp","star-rating":"_Kzkzd","list-teacher-compare":"_Q0sF1","teacher-item":"_gu_yD","teacher-item-selected":"_33tYy","btn-filter":"_2VZin","color-filter":"_2M0vR","block-filter-component":"_1d6uY","select-filter-component":"_1XSIo","hidden":"_3o8gR","box-select":"_3ru37","radio-btn":"_1tQvL","box-select-label":"_3VNX5","date-picker":"_I8kqz","filter-box-learning":"_3xuSa","search-box-learning":"_15ep6"};
 
 var ToggleInput = function ToggleInput(_ref) {
   var value = _ref.value,
@@ -1297,7 +1300,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, {
@@ -1309,7 +1313,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",
@@ -1317,7 +1321,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() {
@@ -1415,7 +1419,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],
@@ -1425,7 +1430,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;
 
@@ -2756,6 +2762,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")
   });
@@ -2792,10 +2802,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);
@@ -2811,7 +2821,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);
@@ -2825,7 +2835,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);
@@ -2834,11 +2844,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);
@@ -3097,6 +3107,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,
@@ -3141,8 +3154,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,
@@ -3157,14 +3170,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
@@ -3176,13 +3189,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", {
@@ -3204,7 +3217,7 @@ var LearningStrategyList = function LearningStrategyList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "strategy"
+    label: t("strategy")
   })), React.createElement(Col, {
     md: 12
   }, React.createElement(CustomPagination, {
@@ -3238,6 +3251,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,
@@ -3273,10 +3290,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);
@@ -3288,11 +3305,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);
@@ -3301,7 +3318,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
     }))));
@@ -3579,6 +3596,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,
@@ -3624,8 +3644,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,
@@ -3641,14 +3661,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
@@ -3660,13 +3680,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", {
@@ -3692,7 +3712,7 @@ var BadgeList = function BadgeList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "badge"
+    label: t("badge")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -3720,6 +3740,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,
@@ -3781,10 +3804,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);
@@ -3797,7 +3820,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,
@@ -4165,6 +4188,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,
@@ -4218,8 +4244,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,
@@ -4242,14 +4268,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
@@ -4261,11 +4287,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", {
@@ -4285,7 +4311,7 @@ var GoalExampleList = function GoalExampleList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "goal example"
+    label: t("goal_example")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -4318,6 +4344,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,
@@ -4351,10 +4381,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);
@@ -4366,7 +4396,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",
@@ -4377,11 +4407,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);
@@ -4639,6 +4669,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,
@@ -4683,8 +4716,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,
@@ -4699,14 +4732,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
@@ -4718,13 +4751,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", {
@@ -4753,7 +4786,7 @@ var SubjectList = function SubjectList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "subject"
+    label: t("subject")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -4786,6 +4819,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,
@@ -4819,10 +4856,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);
@@ -4834,11 +4871,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);
@@ -4848,7 +4885,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",
@@ -5137,6 +5174,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,
@@ -5181,8 +5221,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,
@@ -5197,14 +5237,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
@@ -5214,9 +5254,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", {
@@ -5785,6 +5825,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,
@@ -5818,10 +5862,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);
@@ -5837,7 +5881,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, {
@@ -5852,13 +5896,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
@@ -5868,7 +5912,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, {
@@ -5883,13 +5927,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
@@ -5949,6 +5993,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,
@@ -5980,9 +6028,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;
@@ -6366,6 +6414,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,
@@ -6425,8 +6476,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,
@@ -6436,8 +6487,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,
@@ -6451,14 +6502,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
@@ -6470,13 +6521,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", {
@@ -6498,7 +6549,7 @@ var SemesterList = function SemesterList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "semester"
+    label: t("semester")
   }), React.createElement(CustomPagination, {
     filters: filters,
     totalRecordCount: totalItems,
@@ -6516,7 +6567,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"
@@ -6527,7 +6578,7 @@ var SemesterList = function SemesterList() {
       return openBreakingMonthModal();
     },
     color: "primary"
-  }, "Change breaking month"))))));
+  }, t("change_breaking_month")))))));
 };
 
 var schema$7 = object({
@@ -6545,6 +6596,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,
@@ -6572,11 +6627,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);
@@ -6589,11 +6644,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);
@@ -6920,6 +6975,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,
@@ -6967,8 +7025,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,
@@ -6985,14 +7043,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
@@ -7004,11 +7062,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", {
@@ -7037,7 +7095,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"
@@ -7064,7 +7122,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";
@@ -7164,6 +7222,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, {
@@ -7179,17 +7240,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
@@ -7207,7 +7268,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);
       }
@@ -7233,6 +7294,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,
@@ -7268,10 +7333,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);
@@ -7283,14 +7348,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));
@@ -7305,14 +7370,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));
@@ -7575,6 +7640,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,
@@ -7619,8 +7687,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,
@@ -7635,14 +7703,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
@@ -7654,13 +7722,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", {
@@ -7682,7 +7750,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, {
@@ -7943,9 +8011,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;
@@ -7961,33 +8029,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);
     }
@@ -7995,24 +8063,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(),
@@ -8030,6 +8098,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();
@@ -8039,7 +8110,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
@@ -8050,11 +8121,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
@@ -8066,11 +8137,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", {
@@ -8306,13 +8377,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);
     },
@@ -8324,16 +8399,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);
     }
@@ -8342,7 +8417,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(),
@@ -8360,6 +8435,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);
@@ -8370,7 +8448,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
@@ -8381,11 +8459,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
@@ -8397,13 +8475,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", {
@@ -8710,10 +8788,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);
     },
@@ -8725,16 +8807,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);
     }
@@ -8743,7 +8825,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(),
@@ -8761,11 +8843,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
@@ -8776,11 +8861,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
@@ -8792,15 +8877,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", {
@@ -8842,7 +8927,7 @@ var SwitchAssistantList = function SwitchAssistantList() {
     }
   }))), React.createElement(SwitchAssistantModal$1, {
     ref: modal,
-    header: "Switch Assistant",
+    header: t("switch_assistant"),
     userChoiced: userChoiced,
     removeData: removeData,
     options: options,
@@ -9049,6 +9134,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;
@@ -9057,7 +9145,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
@@ -9068,18 +9156,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
@@ -9097,13 +9185,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", {
@@ -9171,6 +9259,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,
@@ -9211,10 +9302,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);
@@ -9227,7 +9318,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);
@@ -9236,9 +9327,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);
@@ -9247,7 +9338,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) {
@@ -9577,6 +9668,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,
@@ -9623,8 +9717,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,
@@ -9639,14 +9733,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
@@ -9679,7 +9773,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", {
@@ -9812,6 +9906,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,
@@ -9830,9 +9927,9 @@ var Training = function Training() {
       style: {
         fontWeight: 700
       }
-    }, "Teacher training:"), React.createElement(Input, {
+    }, t("teacher_training"), ":"), React.createElement(Input, {
       name: "teacherTraining",
-      placeholder: "Teacher training",
+      placeholder: t("teacher_training"),
       value: values.teacherTraining,
       onChange: function onChange(e) {
         handleChange(e);
@@ -9845,9 +9942,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);
@@ -9857,7 +9954,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();
       }
@@ -9881,9 +9978,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;
@@ -9901,14 +9999,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);
@@ -9920,9 +10018,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";
@@ -10193,6 +10291,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,
@@ -10219,12 +10320,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
@@ -10236,9 +10337,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", {
@@ -10256,7 +10357,7 @@ var Destinations = function Destinations() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "Destinations"
+    label: t("destinations")
   })), React.createElement(Col, {
     md: 8,
     className: "text-right"
@@ -10349,11 +10450,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
   });
 };
@@ -10781,6 +10885,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 {
@@ -10798,7 +10905,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();
     },
@@ -10808,7 +10915,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, {
@@ -10831,7 +10938,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,
@@ -12478,7 +12585,8 @@ var initValue$g = {
   isSurvey: true,
   subQuestions: [],
   isMandatory: false,
-  isBeforeSession: false
+  isBeforeSession: false,
+  isDefaultQuestionSurvey: false
 };
 var TITLE$h = "Question detail";
 
@@ -12601,14 +12709,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,
@@ -12617,8 +12728,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,
@@ -12680,7 +12791,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,
@@ -12690,7 +12801,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);
@@ -12705,7 +12816,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,
@@ -12718,7 +12829,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, {
@@ -12726,7 +12849,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);
@@ -12741,7 +12864,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, {
@@ -12749,7 +12872,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);
@@ -12764,7 +12887,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
@@ -12773,7 +12896,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);
@@ -14417,6 +14540,7 @@ var QuestionCateModal = function QuestionCateModal(props, ref) {
 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
@@ -14434,6 +14558,23 @@ var update$h = function update(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: "",
@@ -14702,7 +14843,7 @@ var QuestionCateList = function QuestionCateList() {
 
   return React.createElement("div", null, React.createElement(QuestionCateModal$1, {
     ref: modal,
-    header: !!id ? "Edit category" : "Create category",
+    header: !!id ? "Edit category" : "create_category",
     confirmText: !!id ? "Update" : "Create",
     onConfirm: onConfirm,
     onCancel: onCancel,
@@ -14719,7 +14860,7 @@ var QuestionCateList = function QuestionCateList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create category",
+    text: "create_category",
     onClick: function onClick() {
       return openModal();
     }
@@ -14782,86 +14923,642 @@ var QuestionCateList = function QuestionCateList() {
   }))));
 };
 
-var tabs$3 = [{
-  path: "/admin/question/question-list",
-  title: "Question list",
-  component: QuestionBankList
-}, {
-  path: "/admin/question/default-question-list",
-  title: "Default question list",
-  component: function component() {
-    return React.createElement(QuestionBankList, {
-      isDefaultQuestion: true,
-      isDefaultQuestionGeneral: false
-    });
-  }
-}, {
-  path: "/admin/question/default-question-general-list",
-  title: "Default question general class list",
-  component: function component() {
-    return React.createElement(QuestionBankList, {
-      isDefaultQuestion: false,
-      isDefaultQuestionGeneral: true
-    });
-  }
-}, {
-  path: "/admin/question/question-category",
-  title: "Question category",
-  component: QuestionCateList
-}];
-var title$4 = "Question bank";
+var schema$f = object({
+  name: string().required("Name is required")
+});
 
-var QuestionBankContainer = function QuestionBankContainer() {
-  return React.createElement(CustomTab, {
-    title: title$4,
-    tabs: tabs$3
+var QuestionCateModal$2 = 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,
+      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$f,
+    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,
+      size: "lg"
+    }, React.createElement(Row, null, React.createElement(Col, {
+      md: 12,
+      className: "mb-3"
+    }, 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
+    })), 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 AssessmentSelector = function AssessmentSelector(props) {
-  var _useState = useState([]),
-      assessmentList = _useState[0],
-      setAssessmentList = _useState[1];
-
-  useEffect(function () {
-    fetchAssessment();
-  }, []);
-
-  var fetchAssessment = function fetchAssessment() {
-    try {
-      var _temp2 = _catch(function () {
-        return Promise.resolve(get$i()).then(function (res) {
-          setAssessmentList(res.data.items);
-        });
-      }, function (err) {
-        console.error(err.message);
-      });
-
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+var TemplateCateModal = forwardRef(QuestionCateModal$2);
 
-  var id = props.id,
-      isDisabled = props.isDisabled;
-  var arrAssessment = assessmentList.map(function (i) {
-    return {
-      id: i.id,
-      value: i.id,
-      label: i.name
-    };
-  });
-  return React.createElement(CustomSelector, Object.assign({
-    options: arrAssessment,
-    defaultValue: id
-  }, props, {
-    isDisabled: isDisabled
-  }));
+var initValue$l = {
+  name: "",
+  questionIds: []
 };
 
-var AcademicClassSelector = function AcademicClassSelector(props) {
-  var id = props.id;
+var useTemplateCateDetail = function useTemplateCateDetail() {
+  var dispatch = useDispatch();
+
+  var _useState = useState(0),
+      id = _useState[0],
+      setId = _useState[1];
+
+  var _useState2 = useState(initValue$l),
+      questionCateDetail = _useState2[0],
+      setQuestionCateDetail = _useState2[1];
+
+  var _useState3 = useState(false),
+      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");
+      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$l);
+  }, [id]);
+  useEffect(function () {
+    setEditedFalse();
+  }, []);
+
+  var reset = function reset() {
+    setQuestionCateDetail(initValue$l);
+    setId(0);
+  };
+
+  var getData = useCallback(function () {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        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;
+
+        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 ? updateSurvey : createSurvey;
+        values.questionIds = listQuestions.map(function (item) {
+          return item.id;
+        });
+        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, 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$l,
+    reset: reset,
+    edited: edited,
+    setEdited: setEdited,
+    setEditedTrue: setEditedTrue,
+    setEditedFalse: setEditedFalse,
+    categoryId: categoryId,
+    setCategoryId: setCategoryId,
+    questionSelectorValue: questionSelectorValue,
+    setTemporaryQuestion: setTemporaryQuestion,
+    addQuestion: addQuestion,
+    listQuestions: listQuestions,
+    setListQuestions: setListQuestions,
+    removeQuestion: removeQuestion
+  };
+};
+
+var TITLE$m = "Question category list";
+
+var useTemplateCateList = function useTemplateCateList() {
+  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(getSurvey(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 {
+            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: "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(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        }
+      }));
+    } catch (err) {
+      var _err$response3, _err$response3$data;
+
+      dispatch(setAlert({
+        type: "danger",
+        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$m;
+  }, []);
+  useEffect(function () {
+    getData();
+  }, [filters]);
+  return {
+    questionCateList: questionCateList,
+    totalItems: totalItems,
+    filters: filters,
+    changeFilters: changeFilters,
+    getData: getData,
+    removeData: removeData
+  };
+};
+
+var TemplateSurveyList = function TemplateSurveyList() {
+  var modal = useRef();
+
+  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);
+    modal && modal.current && modal.current.toggle();
+  };
+
+  var onConfirm = function onConfirm(values) {
+    confirmData(values, function () {
+      modal && modal.current && modal.current.toggle();
+      setListQuestions([]);
+      setCategoryId(0);
+      getData();
+    });
+    setEditedFalse();
+  };
+
+  var onRemove = function onRemove(id) {
+    removeData(id);
+  };
+
+  var onCancel = function onCancel() {
+    return reset();
+  };
+
+  return React.createElement("div", null, React.createElement(TemplateCateModal, {
+    ref: modal,
+    header: !!id ? "Edit template" : "Create template",
+    confirmText: !!id ? "Update" : "Create",
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    questionCateDetail: questionCateDetail,
+    questionCateList: questionCateList,
+    edited: edited,
+    setEdited: setEdited,
+    setEditedTrue: setEditedTrue,
+    setEditedFalse: setEditedFalse,
+    categoryId: categoryId,
+    setCategoryId: setCategoryId,
+    questionSelectorValue: questionSelectorValue,
+    setTemporaryQuestion: setTemporaryQuestion,
+    addQuestion: addQuestion,
+    listQuestions: listQuestions,
+    removeQuestion: removeQuestion
+  }), React.createElement(QuitPrompt, {
+    when: edited
+  }), React.createElement(Row, {
+    className: "my-2"
+  }, React.createElement(Col, {
+    md: 4
+  }, React.createElement(AddButton, {
+    text: "Create template",
+    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: "template survey"
+  })), 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 tabs$3 = [{
+  path: "/admin/question/question-list",
+  title: "Question list",
+  component: QuestionBankList
+}, {
+  path: "/admin/question/default-question-list",
+  title: "Default question list",
+  component: function component() {
+    return React.createElement(QuestionBankList, {
+      isDefaultQuestion: true,
+      isDefaultQuestionGeneral: false
+    });
+  }
+}, {
+  path: "/admin/question/default-question-general-list",
+  title: "Default question general class list",
+  component: function component() {
+    return React.createElement(QuestionBankList, {
+      isDefaultQuestion: false,
+      isDefaultQuestionGeneral: true
+    });
+  }
+}, {
+  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 QuestionBankContainer = function QuestionBankContainer() {
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return React.createElement(CustomTab, {
+    title: t(title$4),
+    tabs: tabs$3
+  });
+};
+
+var AssessmentSelector = function AssessmentSelector(props) {
+  var _useState = useState([]),
+      assessmentList = _useState[0],
+      setAssessmentList = _useState[1];
+
+  useEffect(function () {
+    fetchAssessment();
+  }, []);
+
+  var fetchAssessment = function fetchAssessment() {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(get$i()).then(function (res) {
+          setAssessmentList(res.data.items);
+        });
+      }, function (err) {
+        console.error(err.message);
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var id = props.id,
+      isDisabled = props.isDisabled;
+  var arrAssessment = assessmentList.map(function (i) {
+    return {
+      id: i.id,
+      value: i.id,
+      label: i.name
+    };
+  });
+  return React.createElement(CustomSelector, Object.assign({
+    options: arrAssessment,
+    defaultValue: id
+  }, props, {
+    isDisabled: isDisabled
+  }));
+};
+
+var AcademicClassSelector = function AcademicClassSelector(props) {
+  var id = props.id;
 
   var _useState = useState([]),
       academicClassList = _useState[0],
@@ -14979,7 +15676,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"),
@@ -15015,7 +15712,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();
@@ -15231,7 +15928,7 @@ var getAllSemesters = function getAllSemesters() {
   return api.get(BASE_URL + "/api/Semester/all");
 };
 
-var initValue$l = {
+var initValue$m = {
   assessmentId: 0,
   assessment: null,
   studentIds: [],
@@ -15251,7 +15948,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];
 
@@ -15280,14 +15977,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);
   };
 
@@ -15402,7 +16099,7 @@ var useAssignmentDetail = function useAssignmentDetail() {
     assignmentDetail: assignmentDetail,
     confirmData: confirmData,
     onRemoveStudent: onRemoveStudent,
-    initValue: initValue$l,
+    initValue: initValue$m,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -15411,7 +16108,7 @@ var useAssignmentDetail = function useAssignmentDetail() {
   };
 };
 
-var TITLE$m = "Assignment list";
+var TITLE$n = "Assignment list";
 
 var useAssignmentList = function useAssignmentList() {
   var assignmentList = useSelector(function (state) {
@@ -15508,7 +16205,7 @@ var useAssignmentList = function useAssignmentList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$m;
+    document.title = TITLE$n;
   }, []);
   useEffect(function () {
     getData();
@@ -15745,7 +16442,7 @@ var useAssignmentResultList = function useAssignmentResultList() {
   };
 };
 
-var initValue$m = {
+var initValue$n = {
   questionResponses: [],
   answerTexts: []
 };
@@ -15757,7 +16454,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];
 
@@ -15958,7 +16655,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";
 
@@ -16062,7 +16759,7 @@ var useSessionTemplateList = function useSessionTemplateList() {
     history.push(url);
   }, []);
   useEffect(function () {
-    document.title = TITLE$n;
+    document.title = TITLE$o;
   }, []);
   useEffect(function () {
     getData();
@@ -16209,7 +16906,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";
 
@@ -16299,7 +16996,7 @@ var useSessionTemplateGeneralClassList = function useSessionTemplateGeneralClass
     history.push(url);
   }, []);
   useEffect(function () {
-    document.title = TITLE$o;
+    document.title = TITLE$p;
   }, []);
   useEffect(function () {
     getData();
@@ -16703,7 +17400,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 () {
@@ -16732,7 +17429,7 @@ var useAddQuestion = function useAddQuestion() {
   };
 };
 
-var initValue$n = {
+var initValue$o = {
   name: "",
   isConference: false,
   conferenceRubricId: null,
@@ -16782,7 +17479,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];
 
@@ -17091,7 +17788,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);
@@ -17373,7 +18070,7 @@ var SubjectSelector = function SubjectSelector(_ref) {
   });
 };
 
-var initValue$o = {
+var initValue$p = {
   name: "",
   subjectId: 0,
   questionTeacherIds: [],
@@ -17424,7 +18121,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];
 
@@ -17644,7 +18341,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;
@@ -17728,7 +18425,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);
@@ -17935,7 +18632,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;
   }),
@@ -17962,10 +18659,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();
@@ -17978,7 +18679,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,
@@ -17996,7 +18697,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) {
@@ -18008,7 +18709,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,
@@ -18026,7 +18727,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",
@@ -18048,7 +18749,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,
@@ -18062,7 +18763,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;
@@ -18082,9 +18783,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, {
@@ -18120,7 +18821,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: "",
@@ -18135,7 +18836,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];
 
@@ -18164,14 +18865,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);
   };
 
@@ -18279,7 +18980,7 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
     customAlertDetail: customAlertDetail,
     confirmData: confirmData,
     onRemoveStudent: onRemoveStudent,
-    initValue: initValue$p,
+    initValue: initValue$q,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -18288,7 +18989,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) {
@@ -18376,7 +19077,7 @@ var useCustomAlertList = function useCustomAlertList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$p;
+    document.title = TITLE$q;
   }, []);
   useEffect(function () {
     getData();
@@ -18391,11 +19092,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,
@@ -18445,8 +19149,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,
@@ -18459,19 +19163,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
@@ -18483,17 +19187,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", {
@@ -18518,7 +19222,7 @@ var CustomAlertList = function CustomAlertList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "Custom alert"
+    label: t("custom_alert")
   })), React.createElement(Col, {
     md: 8
   }, React.createElement(CustomPagination, {
@@ -18539,7 +19243,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) {
@@ -18564,7 +19268,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;
 
@@ -18870,7 +19574,7 @@ var initItemValue = {
   text: "",
   breakPointCertification: []
 };
-var initValue$q = {
+var initValue$r = {
   name: "",
   description: "",
   imageUrl: "",
@@ -18892,7 +19596,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];
 
@@ -18921,7 +19625,7 @@ var useCertificateDetail = function useCertificateDetail() {
   };
 
   useEffect(function () {
-    !!id ? getData() : setCertificateDetail(initValue$q);
+    !!id ? getData() : setCertificateDetail(initValue$r);
   }, [id]);
   useEffect(function () {
     setEditedFalse();
@@ -19009,7 +19713,7 @@ var useCertificateDetail = function useCertificateDetail() {
     certificateDetail: certificateDetail,
     initItemValue: initItemValue,
     confirmData: confirmData,
-    initValue: initValue$q,
+    initValue: initValue$r,
     setFile: setFile,
     edited: edited,
     setEdited: setEdited,
@@ -19018,7 +19722,7 @@ var useCertificateDetail = function useCertificateDetail() {
   };
 };
 
-var TITLE$q = "Certificate list";
+var TITLE$r = "Certificate list";
 
 var useCertificateList = function useCertificateList() {
   var certificateList = useSelector(function (state) {
@@ -19101,7 +19805,7 @@ var useCertificateList = function useCertificateList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$q;
+    document.title = TITLE$r;
   }, []);
   useEffect(function () {
     getData();
@@ -19249,7 +19953,7 @@ var CertificateList = function CertificateList() {
   }))));
 };
 
-var TITLE$r = "Certificate list";
+var TITLE$s = "Certificate list";
 
 var useCertificateList$1 = function useCertificateList() {
   var dispatch = useDispatch();
@@ -19337,7 +20041,7 @@ var useCertificateList$1 = function useCertificateList() {
     }
   }, [listWaiting]);
   useEffect(function () {
-    document.title = TITLE$r;
+    document.title = TITLE$s;
     getListWaiting();
     getListApproved();
   }, []);
@@ -19717,7 +20421,7 @@ var TYPECHART;
   TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
 })(TYPECHART || (TYPECHART = {}));
 
-var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","label-chart":"_24PRg","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","headẻ-chart":"_g5-bn","btn-show-chart":"_2htKu","checkbox-chart":"_1qXAT","column-chart-percent":"_3NgrB","chart-background":"_32fu3","custom-marker":"_DmMzw","mark-custom":"_1eUXn","item-legend":"_3hrrC","label-legend-custom":"_Q-iiW","mark-legend":"_cD4ey","percent":"_2HWhv","listItem":"_2Hdbu","item":"_3RJ2T","student-by-age":"_38ikt","total-student":"_1TnWs","pie-chart":"_3BTJi","options-gender":"_1Ws0m","legend":"_2HnO_","text-lengend":"_2BFJw","student-by-grade":"_2az-l","bubble-chart-custom":"_2j8fp","x-axis-custom-wrap":"_1BN5z","axis-content":"_1rYav","legend-wrap":"_3-zAs","list-percent":"_1PPhv","percent-item":"_1rjWR","chart-custom":"_f-Ti4","chart-buddle":"_TPa6x","title-grade":"_1hZ_V","title-modal":"_3L9WC","header-desc-modal":"_1TFtP","form-checkbox":"_37aqf","checkbox-content":"_1iabV","btn-export":"_1eQAg","title-chart":"_pFFg9","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b"};
+var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","label-chart":"_24PRg","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","cursor-pointer":"_11Xjn","btn-show-chart":"_2htKu","checkbox-chart":"_1qXAT","column-chart-percent":"_3NgrB","chart-background":"_32fu3","custom-marker":"_DmMzw","mark-custom":"_1eUXn","item-legend":"_3hrrC","label-legend-custom":"_Q-iiW","mark-legend":"_cD4ey","percent":"_2HWhv","listItem":"_2Hdbu","item":"_3RJ2T","student-by-age":"_38ikt","total-student":"_1TnWs","pie-chart":"_3BTJi","options-gender":"_1Ws0m","legend":"_2HnO_","text-lengend":"_2BFJw","student-by-grade":"_2az-l","bubble-chart-custom":"_2j8fp","x-axis-custom-wrap":"_1BN5z","axis-content":"_1rYav","legend-wrap":"_3-zAs","list-percent":"_1PPhv","percent-item":"_1rjWR","chart-custom":"_f-Ti4","chart-buddle":"_TPa6x","title-grade":"_1hZ_V","title-modal":"_3L9WC","header-desc-modal":"_1TFtP","form-checkbox":"_37aqf","checkbox-content":"_1iabV","btn-export":"_1eQAg","title-chart":"_pFFg9","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b"};
 
 var CheckboxCustom = function CheckboxCustom(_ref) {
   var _ref$background = _ref.background,
@@ -19804,7 +20508,19 @@ var HeaderChart = function HeaderChart(_ref) {
       _ref$typeChart = _ref.typeChart,
       typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart,
       onChangeChart = _ref.onChangeChart,
-      options = _ref.options;
+      options = _ref.options,
+      contentTooltip = _ref.contentTooltip,
+      index = _ref.index,
+      onClickOptions = _ref.onClickOptions;
+
+  var _useState = useState(false),
+      openTooltip = _useState[0],
+      setOpenTooltip = _useState[1];
+
+  var handleOpenTooltip = function handleOpenTooltip() {
+    setOpenTooltip(!openTooltip);
+  };
+
   return React.createElement("div", {
     className: "d-flex justify-content-between align-items-center " + styles$1["header-chart"] + " "
   }, React.createElement("div", {
@@ -19812,8 +20528,15 @@ var HeaderChart = function HeaderChart(_ref) {
   }, React.createElement("span", {
     className: styles$1["header-title"] + " pr-2"
   }, title), React.createElement("i", {
-    className: styles$1["icon-chart"] + " fal fa-info-circle cursor-pointer"
-  })), React.createElement("div", {
+    className: styles$1["icon-chart"] + " fal fa-info-circle cursor-pointer",
+    id: "tooltip-" + index
+  }), React.createElement(Tooltip, {
+    placement: "right",
+    isOpen: openTooltip,
+    target: "tooltip-" + index,
+    toggle: handleOpenTooltip,
+    innerClassName: "" + styles$1["tooltip"]
+  }, contentTooltip)), React.createElement("div", {
     className: "" + styles$1["header-right"]
   }, isOpen && isShowChangeChart && (options === null || options === void 0 ? void 0 : options.length) && React.createElement("div", {
     className: "d-flex align-items-center d-inline-block pr-4"
@@ -19861,8 +20584,11 @@ var HeaderChart = function HeaderChart(_ref) {
       marginBottom: 0,
       cursor: "pointer"
     }
-  }, options[1].value === TYPECHART.BAR ? "Bar charts" : "Line charts")))), React.createElement("i", {
-    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"]
+  }, options[1].value === TYPECHART.BAR ? "Bar charts" : "Line charts")))), !!onClickOptions && React.createElement("i", {
+    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"] + " " + styles$1["cursor-pointer"],
+    onClick: function onClick() {
+      return onClickOptions === null || onClickOptions === void 0 ? void 0 : onClickOptions();
+    }
   }), React.createElement("div", {
     onClick: onToggle,
     className: styles$1["btn-show-chart"],
@@ -19895,7 +20621,7 @@ var useBehavior = function useBehavior(initialTypeChart) {
     setChartIsOpened(newStateChart);
   };
 
-  var onChangeChart = function onChangeChart(idx, type) {
+  var onChangeChart = function onChangeChart(idx, type, options) {
     switch (type) {
       case TYPECHART.AREA:
         if (typeChartList[idx] === TYPECHART.BAR || typeChartList[idx] === TYPECHART.LINE) {
@@ -19907,7 +20633,7 @@ var useBehavior = function useBehavior(initialTypeChart) {
 
         if (typeChartList[idx] === TYPECHART.BOTH) {
           setTypeChartList(typeChartList.map(function (cur, index) {
-            return index === idx ? initialTypeChart[idx] : cur;
+            return index === idx ? options[1].value : cur;
           }));
         }
 
@@ -20013,8 +20739,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,
@@ -25727,7 +26453,7 @@ var gradeOptions = function gradeOptions(grades, studentUserId) {
     };
   });
 };
-var learningStrategyChartOptions = function learningStrategyChartOptions(labelNames, usageCountList) {
+var learningStrategyChartOptions = function learningStrategyChartOptions(labelNames, usageCountList, screenWidth) {
   return {
     chart: {
       type: "bar",
@@ -25749,7 +26475,7 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
       width: 1,
       colors: ["#fff"]
     },
-    colors: ["#86BD74", "#9DD889"],
+    colors: ["#00B8B2", "#006E60"],
     xaxis: {
       categories: labelNames,
       labels: {
@@ -25784,7 +26510,7 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
         show: true,
         align: "left",
         minWidth: 0,
-        maxWidth: 120,
+        maxWidth: screenWidth,
         style: {
           colors: [],
           fontSize: "14px",
@@ -25826,7 +26552,7 @@ var optionsChartGrade = function optionsChartGrade(maxDatas) {
       enabled: false,
       style: {
         fontSize: "16px",
-        colors: ["#4B92CE"]
+        colors: ["#336DDA"]
       }
     },
     states: {
@@ -25862,7 +26588,7 @@ var optionsChartGrade = function optionsChartGrade(maxDatas) {
       },
       axisBorder: {
         show: true,
-        color: "#F6F6F6"
+        color: "#FFFFFF"
       },
       axisTicks: {
         show: false
@@ -25913,7 +26639,7 @@ var studentByAgeOptions = function studentByAgeOptions(series) {
     grid: {
       borderColor: "#F6F6F6"
     },
-    colors: ["#78B6E2", "#80E7E2"],
+    colors: ["#B3D4FF", "#00B8B2"],
     xaxis: {
       axisBorder: {
         show: true,
@@ -25986,7 +26712,7 @@ var average = function average(arr) {
 };
 var pieChartOptions = {
   labels: LABEL_NAME_PIE_CHART,
-  colors: ["#40D2CC", "#A4D1F0"],
+  colors: ["#387875", "#B3D4FF"],
   legend: {
     show: false
   },
@@ -26092,12 +26818,40 @@ var getConvertMinuteToHour = function getConvertMinuteToHour(timeSecond) {
 
   return hTime;
 };
-var readinesToLearnoptions = function readinesToLearnoptions(seriesName) {
+
+var handleViewSeriesActive = function handleViewSeriesActive(active) {
+  var _active$filter;
+
+  var item = ((_active$filter = active.filter(function (r) {
+    return r == true;
+  })) === null || _active$filter === void 0 ? void 0 : _active$filter.length) || 0;
+  return Array.from(Array(item).keys());
+};
+
+var readinesToLearnoptions = function readinesToLearnoptions(seriesName, data) {
+  var history = useHistory();
+  data === null || data === void 0 ? void 0 : data.forEach(function (element) {
+    var _element$studentPerce;
+
+    element === null || element === void 0 ? void 0 : (_element$studentPerce = element.studentPercentQuestion) === null || _element$studentPerce === void 0 ? void 0 : _element$studentPerce.forEach(function (item) {
+    });
+  });
   return {
+    colors: ["#336DDA", "#00B8B2", "#C6A762", "#C94645", "#BD7CFF"],
     chart: {
       height: 450,
       toolbar: {
         show: false
+      },
+      events: {
+        dataPointSelection: function dataPointSelection(_event, chartContext, config) {
+          var studentName = chartContext.data.threeDSeries[config.dataPointIndex];
+          var series = config.w.config.series[config.seriesIndex].data;
+          var student = series.find(function (r) {
+            return r.includes(studentName);
+          });
+          !!student && history.push("/student-detail/overview/" + student[student.length - 1]);
+        }
       }
     },
     dataLabels: {
@@ -26172,7 +26926,7 @@ var convertDataToSeriesBullderChart = function convertDataToSeriesBullderChart(d
     return {
       name: i.questionText.replace("<p>", "").replace("</p>", ""),
       data: ((_i$studentPercentQues = i.studentPercentQuestion) === null || _i$studentPercentQues === void 0 ? void 0 : _i$studentPercentQues.map(function (question) {
-        return [getRandomArbitrary((index + 1) * 1000 - 330, (index + 1) * 1000 + 330), question.percentQuestion, question.studentName];
+        return [getRandomArbitrary((index + 1) * 1000 - 330, (index + 1) * 1000 + 330), question.percentQuestion, question.studentName, question.studentId];
       })) || []
     };
   });
@@ -26367,7 +27121,7 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData, n
     },
     fill: {
       opacity: newseries === null || newseries === void 0 ? void 0 : newseries.map(function (item) {
-        if ((item === null || item === void 0 ? void 0 : item.type) == 'area') {
+        if ((item === null || item === void 0 ? void 0 : item.type) == "area") {
           return 0.2;
         }
 
@@ -26384,7 +27138,7 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData, n
         return activeData[index];
       }),
       width: newseries === null || newseries === void 0 ? void 0 : newseries.map(function (item) {
-        if ((item === null || item === void 0 ? void 0 : item.type) == 'area') {
+        if ((item === null || item === void 0 ? void 0 : item.type) == "area") {
           return 2;
         }
 
@@ -26431,6 +27185,7 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData, n
       decimalsInFloat: 0
     },
     tooltip: {
+      enabledOnSeries: handleViewSeriesActive(activeData),
       y: {
         formatter: function formatter(value) {
           return value.toFixed(2) + "%";
@@ -26557,7 +27312,7 @@ var BubbleChartCustom = function BubbleChartCustom(_ref) {
   })), React.createElement("div", {
     className: styles$1["chart-buddle"]
   }, React.createElement("div", null, React.createElement(Chart, {
-    options: readinesToLearnoptions(seriesName),
+    options: readinesToLearnoptions(seriesName, data),
     type: "scatter",
     series: convertDataToSeriesBullderChart(data),
     width: "100%",
@@ -26626,9 +27381,6 @@ var BarAndAreaChart = function BarAndAreaChart(_ref) {
       _ref$isHasLineChart = _ref.isHasLineChart,
       isHasLineChart = _ref$isHasLineChart === void 0 ? false : _ref$isHasLineChart;
   var newseries = mergeBarChartAndArea(series, isHasLineChart);
-  console.log({
-    newseries: newseries
-  });
   return React.createElement(Chart, {
     options: optionBarChartAndArea(months, activeColumn, newseries),
     series: newseries,
@@ -26721,23 +27473,27 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
   })), !isPDF && React.createElement("div", {
     className: "w-100 d-flex gap-2 flex-wrap  " + styles$1["listItem"]
   }, data.map(function (month, index) {
-    return React.createElement("div", {
-      className: "" + styles$1["item-legend"],
-      key: index
-    }, React.createElement("div", {
-      className: "" + styles$1["item"]
-    }, React.createElement("div", {
-      className: "" + styles$1["mark-custom"],
-      style: {
-        backgroundColor: COLOR_CHART_AND_PERCENTS[index]
-      }
-    }), React.createElement("label", {
-      className: "" + styles$1["label-legend-custom"]
-    }, month)), React.createElement("div", {
-      className: "" + styles$1["percent"]
-    }, React.createElement("label", {
-      className: "m-0"
-    }, avg[index] ? avg[index] + "%" : "0.00%")));
+    if (!!avg && avg[index] > 0) {
+      return React.createElement("div", {
+        className: "" + styles$1["item-legend"],
+        key: index
+      }, React.createElement("div", {
+        className: "" + styles$1["item"]
+      }, React.createElement("div", {
+        className: "" + styles$1["mark-custom"],
+        style: {
+          backgroundColor: COLOR_CHART_AND_PERCENTS[index]
+        }
+      }), React.createElement("label", {
+        className: "" + styles$1["label-legend-custom"]
+      }, month)), React.createElement("div", {
+        className: "" + styles$1["percent"]
+      }, React.createElement("label", {
+        className: "m-0"
+      }, avg[index] ? avg[index].toFixed(2) + "%" : "0.00%")));
+    }
+
+    return null;
   })));
 };
 
@@ -26927,7 +27683,7 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
   });
   var maxData = Math.max.apply(Math, usageCount);
   var serieslearningStrategy = [{
-    name: "Perceived Usage",
+    name: "Perceived Value",
     data: learningStrategies === null || learningStrategies === void 0 ? void 0 : learningStrategies.map(function (i) {
       return average(i.usagePoint);
     })
@@ -26937,6 +27693,7 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
       return i.usageCount / maxData * 100;
     })
   }];
+  var screenWidth = (window.innerWidth - 256) / 100 * 30;
   return React.createElement("div", {
     className: "h-100 w-100 " + styles$1["chart-background"]
   }, React.createElement("div", {
@@ -26944,7 +27701,7 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
   }, serieslearningStrategy.some(function (i) {
     return i.data;
   }) ? React.createElement(Chart, {
-    options: learningStrategyChartOptions(labelNames, usageCount),
+    options: learningStrategyChartOptions(labelNames, usageCount, screenWidth),
     series: serieslearningStrategy,
     type: "bar",
     width: "100%",
@@ -27023,9 +27780,14 @@ var getGrades = function getGrades(studentUserId) {
 var getBandScore = function getBandScore() {
   return api.get("" + BAND_SCORE);
 };
+var getLearningStrategiesTableApi = function getLearningStrategiesTableApi(filter) {
+  return api.get(REPORT_URL + "/list-learning-strategies", {
+    params: filter
+  });
+};
 
-var TITLE$s = "Dashboard";
-var DEFAULT_START_DATE = moment().startOf("year").valueOf();
+var TITLE$t = "Dashboard";
+var DEFAULT_START_DATE = moment().subtract(3, 'months').startOf("day").valueOf();
 var DEFAULT_END_DATE = moment().endOf("day").valueOf();
 
 var useDashboard = function useDashboard() {
@@ -27049,81 +27811,134 @@ var useDashboard = function useDashboard() {
       filter = _useState[0],
       setFilter = _useState[1];
 
-  var _useState2 = useState(INITIAl_STUDENT_DASHBOARD),
-      listTotalTime = _useState2[0],
-      setListTotalTime = _useState2[1];
+  var _useState2 = useState(),
+      learningStrategiesData = _useState2[0],
+      setLearningStrategiesData = _useState2[1];
+
+  var _useState3 = useState(false),
+      openLearningStrategiesTable = _useState3[0],
+      setOpenLearningStrategiesTable = _useState3[1];
 
-  var _useState3 = useState([]),
-      readinessToLearning = _useState3[0],
-      setReadinessToLearning = _useState3[1];
+  var handleOpenCloseLearningStrategiesTable = function handleOpenCloseLearningStrategiesTable() {
+    setOpenLearningStrategiesTable(!openLearningStrategiesTable);
+  };
+
+  var _useState4 = useState({
+    searchString: "",
+    currentPage: 1,
+    pageSize: 10,
+    sortBy: "Strategies",
+    sortOrder: "ASC"
+  }),
+      filterLearningStrategiesTable = _useState4[0],
+      setFilterLearningStrategiesTable = _useState4[1];
 
-  var _useState4 = useState(LEARNING_STRATEGY_INIT),
-      topLearningStrategies = _useState4[0],
-      setTopLearningStrategies = _useState4[1];
+  var changeFiltersLearningStrategiesTable = function changeFiltersLearningStrategiesTable(updatedFilter) {
+    setFilterLearningStrategiesTable(_extends({}, filterLearningStrategiesTable, updatedFilter));
+  };
 
-  var _useState5 = useState([]),
-      studentByGrade = _useState5[0],
-      setStudentByGrade = _useState5[1];
+  var getLearningStrategiesTableData = useCallback(function () {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
 
-  var _useState6 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      chartOneToOneData = _useState6[0],
-      setChartOneToOneData = _useState6[1];
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(getLearningStrategiesTableApi(_extends({}, filter, filterLearningStrategiesTable))).then(function (res) {
+          !!res.data && setLearningStrategiesData(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.meesage
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [filter, filterLearningStrategiesTable]);
 
-  var _useState7 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      chartClassReflection = _useState7[0],
-      setChartClassReflection = _useState7[1];
+  var _useState5 = useState(INITIAl_STUDENT_DASHBOARD),
+      listTotalTime = _useState5[0],
+      setListTotalTime = _useState5[1];
 
-  var _useState8 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      chartConference = _useState8[0],
-      setChartConference = _useState8[1];
+  var _useState6 = useState([]),
+      readinessToLearning = _useState6[0],
+      setReadinessToLearning = _useState6[1];
+
+  var _useState7 = useState(LEARNING_STRATEGY_INIT),
+      topLearningStrategies = _useState7[0],
+      setTopLearningStrategies = _useState7[1];
+
+  var _useState8 = useState([]),
+      studentByGrade = _useState8[0],
+      setStudentByGrade = _useState8[1];
 
   var _useState9 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      learningProgress = _useState9[0],
-      setLearningProgress = _useState9[1];
+      chartOneToOneData = _useState9[0],
+      setChartOneToOneData = _useState9[1];
 
   var _useState10 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      safety = _useState10[0],
-      setSafety = _useState10[1];
+      chartClassReflection = _useState10[0],
+      setChartClassReflection = _useState10[1];
 
-  var _useState11 = useState(),
-      friendCircles = _useState11[0],
-      setFriendCircles = _useState11[1];
+  var _useState11 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      chartConference = _useState11[0],
+      setChartConference = _useState11[1];
 
-  var _useState12 = useState(),
-      activityCircles = _useState12[0],
-      setActivityCircles = _useState12[1];
+  var _useState12 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      learningProgress = _useState12[0],
+      setLearningProgress = _useState12[1];
 
-  var _useState13 = useState([]),
-      studentBySpecialNeed = _useState13[0],
-      setStudentBySpecialNeed = _useState13[1];
+  var _useState13 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      safety = _useState13[0],
+      setSafety = _useState13[1];
 
-  var _useState14 = useState(INITIAL_AGE_OF_STUDENT),
-      studentByAge = _useState14[0],
-      setStudentByAge = _useState14[1];
+  var _useState14 = useState(),
+      friendCircles = _useState14[0],
+      setFriendCircles = _useState14[1];
 
-  var _useState15 = useState(INITIAL_STUDENT_BY_GENDER),
-      studentByGender = _useState15[0],
-      setStudentByGender = _useState15[1];
+  var _useState15 = useState(),
+      activityCircles = _useState15[0],
+      setActivityCircles = _useState15[1];
 
   var _useState16 = useState([]),
-      topSkill = _useState16[0],
-      setTopSkill = _useState16[1];
+      studentBySpecialNeed = _useState16[0],
+      setStudentBySpecialNeed = _useState16[1];
 
-  var _useState17 = useState([]),
-      bandScore = _useState17[0],
-      setBandScore = _useState17[1];
+  var _useState17 = useState(INITIAL_AGE_OF_STUDENT),
+      studentByAge = _useState17[0],
+      setStudentByAge = _useState17[1];
+
+  var _useState18 = useState(INITIAL_STUDENT_BY_GENDER),
+      studentByGender = _useState18[0],
+      setStudentByGender = _useState18[1];
+
+  var _useState19 = useState([]),
+      topSkill = _useState19[0],
+      setTopSkill = _useState19[1];
+
+  var _useState20 = useState([]),
+      bandScore = _useState20[0],
+      setBandScore = _useState20[1];
 
   var user = useSelector(function (state) {
     return state.common.user;
   });
 
-  var _useState18 = useState(undefined),
-      studentDefault = _useState18[0],
-      setStudentDefault = _useState18[1];
+  var _useState21 = useState(undefined),
+      studentDefault = _useState21[0],
+      setStudentDefault = _useState21[1];
 
-  var _useState19 = useState(""),
-      genderOfStudent = _useState19[0],
-      setGenderOfStudent = _useState19[1];
+  var _useState22 = useState(""),
+      genderOfStudent = _useState22[0],
+      setGenderOfStudent = _useState22[1];
 
   var handleChangeFilters = function handleChangeFilters(event) {
     var _extends2;
@@ -27131,17 +27946,17 @@ var useDashboard = function useDashboard() {
     setFilter(_extends({}, filter, (_extends2 = {}, _extends2[event.target.name] = event.target.value, _extends2)));
   };
 
-  var _useState20 = useState([]),
-      activeColumnOneToOne = _useState20[0],
-      setActiveColumnOneToOne = _useState20[1];
+  var _useState23 = useState([]),
+      activeColumnOneToOne = _useState23[0],
+      setActiveColumnOneToOne = _useState23[1];
 
-  var _useState21 = useState([]),
-      seriesOneToOne = _useState21[0],
-      setSeriesOneToOne = _useState21[1];
+  var _useState24 = useState([]),
+      seriesOneToOne = _useState24[0],
+      setSeriesOneToOne = _useState24[1];
 
-  var _useState22 = useState(INITIAL_AVG),
-      avgOneToOne = _useState22[0],
-      setAvgOneToOne = _useState22[1];
+  var _useState25 = useState(INITIAL_AVG),
+      avgOneToOne = _useState25[0],
+      setAvgOneToOne = _useState25[1];
 
   var monthsOneToOne = chartOneToOneData === null || chartOneToOneData === void 0 ? void 0 : chartOneToOneData.overviewQuestionChoice.map(function (i) {
     return (i === null || i === void 0 ? void 0 : i.month) || "";
@@ -27157,32 +27972,34 @@ var useDashboard = function useDashboard() {
     setSeriesOneToOne(newSeriesOneToOne === null || newSeriesOneToOne === void 0 ? void 0 : newSeriesOneToOne.filter(function (_, idx) {
       return newActiveColumn[idx];
     }));
-    setAvgOneToOne(newAvgOneToOne === null || newAvgOneToOne === void 0 ? void 0 : newAvgOneToOne.map(function (_, idx) {
-      return newActiveColumn[idx] ? newAvgOneToOne[idx] : 0;
-    }));
   };
 
   useEffect(function () {
-    setSeriesOneToOne(newSeriesOneToOne);
-    setActiveColumnOneToOne([true].concat(dataConvertedOneToOne.map(function (_i) {
-      return false;
-    }).splice(0, dataConvertedOneToOne.length - 2)));
-    setAvgOneToOne(newAvgOneToOne === null || newAvgOneToOne === void 0 ? void 0 : newAvgOneToOne.map(function (_, index) {
-      return activeColumnOneToOne[index] ? newAvgOneToOne[index] : 0;
+    if (activeColumnOneToOne.filter(function (r) {
+      return r === true;
+    }).length == 0) {
+      setActiveColumnOneToOne([true].concat(dataConvertedOneToOne.map(function (_i) {
+        return false;
+      }).splice(0, dataConvertedOneToOne.length - 2)));
+    }
+
+    setAvgOneToOne(newAvgOneToOne);
+    setSeriesOneToOne(newSeriesOneToOne === null || newSeriesOneToOne === void 0 ? void 0 : newSeriesOneToOne.filter(function (_, idx) {
+      return activeColumnOneToOne[idx];
     }));
   }, [chartOneToOneData.overviewQuestionChoice]);
 
-  var _useState23 = useState([]),
-      activeColumnClassReflection = _useState23[0],
-      setActiveColumnClassReflection = _useState23[1];
+  var _useState26 = useState([]),
+      activeColumnClassReflection = _useState26[0],
+      setActiveColumnClassReflection = _useState26[1];
 
-  var _useState24 = useState([]),
-      seriesClassRefection = _useState24[0],
-      setSeriesClassReflection = _useState24[1];
+  var _useState27 = useState([]),
+      seriesClassRefection = _useState27[0],
+      setSeriesClassReflection = _useState27[1];
 
-  var _useState25 = useState(INITIAL_AVG),
-      avgClassReflection = _useState25[0],
-      setAvgClassReflection = _useState25[1];
+  var _useState28 = useState(INITIAL_AVG),
+      avgClassReflection = _useState28[0],
+      setAvgClassReflection = _useState28[1];
 
   var monthsClassReflection = chartClassReflection === null || chartClassReflection === void 0 ? void 0 : chartClassReflection.overviewQuestionChoice.map(function (i) {
     return (i === null || i === void 0 ? void 0 : i.month) || "";
@@ -27198,32 +28015,34 @@ var useDashboard = function useDashboard() {
     setSeriesClassReflection(newSeriesClassReflection === null || newSeriesClassReflection === void 0 ? void 0 : newSeriesClassReflection.filter(function (_, idx) {
       return newActiveColumn[idx];
     }));
-    setAvgClassReflection(newAvgClassReflection === null || newAvgClassReflection === void 0 ? void 0 : newAvgClassReflection.map(function (_, idx) {
-      return newActiveColumn[idx] ? newAvgOneToOne[idx] : 0;
-    }));
   };
 
   useEffect(function () {
-    setSeriesClassReflection(newSeriesClassReflection);
-    setActiveColumnClassReflection([true].concat(dataConvertedClassReflection.map(function (_i) {
-      return false;
-    }).splice(0, dataConvertedClassReflection.length - 2)));
-    setAvgClassReflection(newAvgClassReflection === null || newAvgClassReflection === void 0 ? void 0 : newAvgClassReflection.map(function (_, index) {
-      return activeColumnClassReflection[index] ? newAvgClassReflection[index] : 0;
+    if (activeColumnClassReflection.filter(function (r) {
+      return r === true;
+    }).length == 0) {
+      setActiveColumnClassReflection([true].concat(dataConvertedClassReflection.map(function (_i) {
+        return false;
+      }).splice(0, dataConvertedClassReflection.length - 2)));
+    }
+
+    setSeriesClassReflection(newSeriesClassReflection === null || newSeriesClassReflection === void 0 ? void 0 : newSeriesClassReflection.filter(function (_, idx) {
+      return activeColumnClassReflection[idx];
     }));
+    setAvgClassReflection(newAvgClassReflection);
   }, [chartClassReflection.overviewQuestionChoice]);
 
-  var _useState26 = useState([]),
-      activeColumnConference = _useState26[0],
-      setActiveColumnConference = _useState26[1];
+  var _useState29 = useState([]),
+      activeColumnConference = _useState29[0],
+      setActiveColumnConference = _useState29[1];
 
-  var _useState27 = useState([]),
-      seriesConference = _useState27[0],
-      setSeriesConference = _useState27[1];
+  var _useState30 = useState([]),
+      seriesConference = _useState30[0],
+      setSeriesConference = _useState30[1];
 
-  var _useState28 = useState(INITIAL_AVG),
-      avgConference = _useState28[0],
-      setAvgConference = _useState28[1];
+  var _useState31 = useState(INITIAL_AVG),
+      avgConference = _useState31[0],
+      setAvgConference = _useState31[1];
 
   var monthsConference = chartConference === null || chartConference === void 0 ? void 0 : (_chartConference$over = chartConference.overviewQuestionChoice) === null || _chartConference$over === void 0 ? void 0 : _chartConference$over.map(function (i) {
     return (i === null || i === void 0 ? void 0 : i.month) || "";
@@ -27239,32 +28058,34 @@ var useDashboard = function useDashboard() {
     setSeriesConference(newSeriesConference === null || newSeriesConference === void 0 ? void 0 : newSeriesConference.filter(function (_, idx) {
       return newActiveColumn[idx];
     }));
-    setAvgConference(newAvgConference === null || newAvgConference === void 0 ? void 0 : newAvgConference.map(function (_, idx) {
-      return newActiveColumn[idx] ? newAvgConference[idx] : 0;
-    }));
   };
 
   useEffect(function () {
-    setSeriesConference(newSeriesConference);
-    setActiveColumnConference([true].concat(dataConvertedConference === null || dataConvertedConference === void 0 ? void 0 : dataConvertedConference.map(function (_i) {
-      return false;
-    }).splice(0, dataConvertedConference.length - 2)));
-    setAvgConference(newAvgConference === null || newAvgConference === void 0 ? void 0 : newAvgConference.map(function (_, idx) {
-      return newAvgConference[idx];
+    if (activeColumnConference.filter(function (r) {
+      return r === true;
+    }).length == 0) {
+      setActiveColumnConference([true].concat(dataConvertedConference === null || dataConvertedConference === void 0 ? void 0 : dataConvertedConference.map(function (_i) {
+        return false;
+      }).splice(0, dataConvertedConference.length - 2)));
+    }
+
+    setSeriesConference(newSeriesConference === null || newSeriesConference === void 0 ? void 0 : newSeriesConference.filter(function (_, idx) {
+      return activeColumnConference[idx];
     }));
+    setAvgConference(newAvgConference);
   }, [chartConference === null || chartConference === void 0 ? void 0 : chartConference.overviewQuestionChoice]);
 
-  var _useState29 = useState([]),
-      activeColumnSafety = _useState29[0],
-      setActiveColumnSafety = _useState29[1];
+  var _useState32 = useState([]),
+      activeColumnSafety = _useState32[0],
+      setActiveColumnSafety = _useState32[1];
 
-  var _useState30 = useState([]),
-      seriesSafety = _useState30[0],
-      setSeriesSafety = _useState30[1];
+  var _useState33 = useState([]),
+      seriesSafety = _useState33[0],
+      setSeriesSafety = _useState33[1];
 
-  var _useState31 = useState(INITIAL_AVG),
-      avgSafety = _useState31[0],
-      setAvgSafety = _useState31[1];
+  var _useState34 = useState(INITIAL_AVG),
+      avgSafety = _useState34[0],
+      setAvgSafety = _useState34[1];
 
   var monthsSafety = safety === null || safety === void 0 ? void 0 : (_safety$overviewQuest = safety.overviewQuestionChoice) === null || _safety$overviewQuest === void 0 ? void 0 : _safety$overviewQuest.map(function (i) {
     return (i === null || i === void 0 ? void 0 : i.month) || "";
@@ -27280,9 +28101,6 @@ var useDashboard = function useDashboard() {
     setSeriesSafety(newSeriesSafety === null || newSeriesSafety === void 0 ? void 0 : newSeriesSafety.filter(function (_, idx) {
       return newActiveColumn[idx];
     }));
-    setAvgSafety(newAvgSafety === null || newAvgSafety === void 0 ? void 0 : newAvgSafety.map(function (_, idx) {
-      return newActiveColumn[idx] ? newAvgSafety[idx] : 0;
-    }));
   };
 
   useEffect(function () {
@@ -27296,23 +28114,23 @@ var useDashboard = function useDashboard() {
   }, [safety === null || safety === void 0 ? void 0 : safety.overviewQuestionChoice]);
   var callApi = useCallback(function (apiCaller, setData, defaultData, type) {
     try {
-      var _temp2 = _catch(function () {
+      var _temp6 = _catch(function () {
         return Promise.resolve(type ? apiCaller(_extends({}, filter, {
           type: type
         })) : apiCaller(filter)).then(function (res) {
           !!(res !== null && res !== void 0 && res.data) && setData(res.data);
         });
       }, function (err) {
-        var _err$response, _err$response$data;
+        var _err$response2, _err$response2$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
+          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
         }));
         setData(defaultData);
       });
 
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -27338,7 +28156,6 @@ var useDashboard = function useDashboard() {
       setStudentDefault(option);
       setFilter(_extends({}, filter, {
         gender: [LegalGenderType.None, LegalGenderType.Male, LegalGenderType.Female],
-        teacherId: undefined,
         studentId: option ? option === null || option === void 0 ? void 0 : option.studentId : undefined,
         studentUserId: option === null || option === void 0 ? void 0 : option.id
       }));
@@ -27349,7 +28166,6 @@ var useDashboard = function useDashboard() {
     setStudentDefault(undefined);
     setFilter(_extends({}, filter, {
       gender: [LegalGenderType.None, LegalGenderType.Male, LegalGenderType.Female],
-      teacherId: undefined,
       grade: [],
       studentId: undefined,
       studentUserId: ""
@@ -27369,27 +28185,27 @@ var useDashboard = function useDashboard() {
 
   var callApiByStudentUserId = function callApiByStudentUserId(apiCaller, setData, studentUserId, defaultData) {
     try {
-      var _temp5 = function _temp5() {
+      var _temp9 = function _temp9() {
         dispatch(setLoading(false));
       };
 
       dispatch(setLoading(true));
 
-      var _temp6 = _catch(function () {
+      var _temp10 = _catch(function () {
         return Promise.resolve(apiCaller(studentUserId)).then(function (res) {
           res && setData(res.data);
         });
       }, function (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
         }));
         setData(defaultData);
       });
 
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
+      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -27397,7 +28213,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));
@@ -27464,7 +28280,13 @@ var useDashboard = function useDashboard() {
     avgSafety: avgSafety,
     dataConvertedSafety: dataConvertedSafety,
     monthsSafety: monthsSafety,
-    activeColumnSafety: activeColumnSafety
+    activeColumnSafety: activeColumnSafety,
+    learningStrategiesData: learningStrategiesData,
+    openLearningStrategiesTable: openLearningStrategiesTable,
+    handleOpenCloseLearningStrategiesTable: handleOpenCloseLearningStrategiesTable,
+    filterLearningStrategiesTable: filterLearningStrategiesTable,
+    changeFiltersLearningStrategiesTable: changeFiltersLearningStrategiesTable,
+    getLearningStrategiesTableData: getLearningStrategiesTableData
   };
 };
 
@@ -27511,7 +28333,13 @@ var useChartDatas = function useChartDatas() {
       chartOneToOneData = _useDashboard.chartOneToOneData,
       chartClassReflection = _useDashboard.chartClassReflection,
       chartConference = _useDashboard.chartConference,
-      safety = _useDashboard.safety;
+      safety = _useDashboard.safety,
+      learningStrategiesData = _useDashboard.learningStrategiesData,
+      openLearningStrategiesTable = _useDashboard.openLearningStrategiesTable,
+      handleOpenCloseLearningStrategiesTable = _useDashboard.handleOpenCloseLearningStrategiesTable,
+      filterLearningStrategiesTable = _useDashboard.filterLearningStrategiesTable,
+      changeFiltersLearningStrategiesTable = _useDashboard.changeFiltersLearningStrategiesTable,
+      getLearningStrategiesTableData = _useDashboard.getLearningStrategiesTableData;
 
   var _useState = useState([]),
       selectedToPrint = _useState[0],
@@ -27559,7 +28387,11 @@ var useChartDatas = function useChartDatas() {
   };
 
   var LIST_FILTERS_LEFT = [{
-    name: FILTER_NAME.Calendar,
+    name: FILTER_NAME.StartDate,
+    icon: "/images/calendar.svg",
+    handleChangeFilters: handleChangeFilters
+  }, {
+    name: FILTER_NAME.EndDate,
     icon: "/images/calendar.svg",
     handleChangeFilters: handleChangeFilters
   }, {
@@ -27598,27 +28430,30 @@ var useChartDatas = function useChartDatas() {
   }];
   var chartDashBoards = [{
     id: "readiness_to_learn",
-    label: "Readiness to Learn",
+    label: "readiness_to_learn",
     children: function children(_) {
       return React.createElement(BubbleChartCustom$1, {
         data: readinessToLearning
       });
     },
     isShowChangeChart: false,
-    options: []
+    options: [],
+    contentTooltip: "tooltip_content_readiness_to_learn_chart"
   }, {
     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
       });
     },
     isShowChangeChart: false,
-    options: []
+    options: [],
+    contentTooltip: "tooltip_content_high_impact_chart",
+    handleClickOpenTable: handleOpenCloseLearningStrategiesTable
   }, {
     id: "1_to_1",
-    label: "1 To 1",
+    label: "1_to_1",
     children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedOneToOne,
@@ -27639,10 +28474,11 @@ var useChartDatas = function useChartDatas() {
     }, {
       label: "Bar charts",
       value: TYPECHART.BAR
-    }]
+    }],
+    contentTooltip: "tooltip_content_1_to_1_chart"
   }, {
     id: "class_reflection",
-    label: "Class Reflection",
+    label: "reflection",
     children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedClassReflection,
@@ -27664,10 +28500,11 @@ var useChartDatas = function useChartDatas() {
     }, {
       label: "Line charts",
       value: TYPECHART.LINE
-    }]
+    }],
+    contentTooltip: "tooltip_content_class_reflection_chart"
   }, {
     id: "conference",
-    label: "Conference",
+    label: "conferences",
     children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedConference,
@@ -27688,10 +28525,11 @@ var useChartDatas = function useChartDatas() {
     }, {
       label: "Bar charts",
       value: TYPECHART.BAR
-    }]
+    }],
+    contentTooltip: "tooltip_content_conference_chart"
   }, {
     id: "safety",
-    label: "Safety",
+    label: "safety",
     children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedSafety,
@@ -27713,10 +28551,11 @@ var useChartDatas = function useChartDatas() {
     }, {
       label: "Line charts",
       value: TYPECHART.LINE
-    }]
+    }],
+    contentTooltip: "tooltip_content_safety_chart"
   }, {
     id: "Student_by_age",
-    label: "Student by Age",
+    label: "student_by_age",
     children: function children(_, columnFlex) {
       return React.createElement(StudentByAgeAndGender$1, {
         columnFlex: columnFlex,
@@ -27725,52 +28564,54 @@ var useChartDatas = function useChartDatas() {
       });
     },
     isShowChangeChart: false,
-    options: []
+    options: [],
+    contentTooltip: "tooltip_content_student_by_age_chart"
   }, {
     id: "student_by_grade",
-    label: "Students by Grade",
+    label: "students_by_designation",
     children: function children(_) {
       return React.createElement(StudentByGrade$1, {
         data: studentByGrade
       });
     },
     isShowChangeChart: false,
-    options: []
+    options: [],
+    contentTooltip: "tooltip_content_students_by_designation"
   }];
-  var initialTypeChart = chartDashBoards.map(function () {
-    return TYPECHART.AREA;
+  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 Class Reflection Check-ins:",
+    title: "total_class_reflection_check_ins",
     value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.avgClassReflection,
     isUp: false,
     deviant: "-15%",
@@ -27805,7 +28646,13 @@ var useChartDatas = function useChartDatas() {
     avgConference: avgConference,
     dataConvertedSafety: dataConvertedSafety,
     activeColumnSafety: activeColumnSafety,
-    avgSafety: avgSafety
+    avgSafety: avgSafety,
+    learningStrategiesData: learningStrategiesData,
+    openLearningStrategiesTable: openLearningStrategiesTable,
+    handleOpenCloseLearningStrategiesTable: handleOpenCloseLearningStrategiesTable,
+    filterLearningStrategiesTable: filterLearningStrategiesTable,
+    changeFiltersLearningStrategiesTable: changeFiltersLearningStrategiesTable,
+    getLearningStrategiesTableData: getLearningStrategiesTableData
   };
 };
 
@@ -27961,6 +28808,7 @@ var SelectFilter = function SelectFilter(_ref) {
       filter = _ref.filter,
       teacherUserId = _ref.teacherUserId,
       changeCurrentTeacherUserId = _ref.changeCurrentTeacherUserId;
+  var ref = useRef(null);
 
   var _useState = useState(false),
       isOpenCollapse = _useState[0],
@@ -27993,21 +28841,21 @@ var SelectFilter = function SelectFilter(_ref) {
     setIsOpenCollapse(!isOpenCollapse);
   };
 
-  var onChangeYear = function onChangeYear(item) {
+  var handleChangeStartDate = function handleChangeStartDate(date) {
     !!onChangeFilters && onChangeFilters({
-      startDate: item.startDate,
-      endDate: item.endDate
+      startDate: moment(date).startOf("day").valueOf()
     });
-    setLabelBox(_extends({}, labelBox, {
-      calendar: {
-        value: item.value,
-        label: item.label
-      }
-    }));
+    setIsOpenCollapse(false);
+  };
+
+  var handleChangeEndDate = function handleChangeEndDate(date) {
+    !!onChangeFilters && onChangeFilters({
+      endDate: moment(date).endOf("day").valueOf()
+    });
+    setIsOpenCollapse(false);
   };
 
   var onChangeGender = function onChangeGender(item) {
-    console.log("item", item);
     !!onChangeFilters && onChangeFilters({
       gender: item.value === -1 ? [LegalGenderType.None, LegalGenderType.Male, LegalGenderType.Female] : [item.value]
     });
@@ -28024,15 +28872,15 @@ var SelectFilter = function SelectFilter(_ref) {
       grade: grade.value
     }));
 
-    if (grade.value === -1) {
+    if (grade.value == -1) {
       !!onChangeFilters && onChangeFilters({
         grade: []
       });
+    } else {
+      !!onChangeFilters && onChangeFilters({
+        grade: [grade.label]
+      });
     }
-
-    !!onChangeFilters && onChangeFilters({
-      grade: [grade.label]
-    });
   };
 
   var onChangeBandScore = function onChangeBandScore(score) {
@@ -28044,18 +28892,29 @@ var SelectFilter = function SelectFilter(_ref) {
       !!onChangeFilters && onChangeFilters({
         bandScore: ""
       });
+    } else {
+      !!onChangeFilters && onChangeFilters({
+        bandScore: score.label
+      });
     }
+  };
 
-    !!onChangeFilters && onChangeFilters({
-      bandScore: score.label
-    });
+  var handleClickOutSide = function handleClickOutSide(event) {
+    var _ref$current;
+
+    if (ref.current && !(ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(event.target))) setIsOpenCollapse(false);
   };
 
+  useEffect(function () {
+    document.addEventListener("click", handleClickOutSide, true);
+  }, []);
+
   var renderSelectFilter = function renderSelectFilter() {
-    if (name === FILTER_NAME.Calendar) {
+    if (name === FILTER_NAME.StartDate) {
       return React.createElement("div", {
         key: "" + name,
-        className: styles["block-filter-component"] + " "
+        className: "" + styles["block-filter-component"],
+        ref: ref
       }, React.createElement("button", {
         onClick: handleToggleCollapse,
         className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
@@ -28064,36 +28923,50 @@ var SelectFilter = function SelectFilter(_ref) {
         alt: labelBox.calendar.label
       }), React.createElement("p", {
         className: styles["color-filter"] + " my-0 mx-2"
-      }, labelBox.calendar.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"]
-      }, filterYearData.map(function (item) {
-        return React.createElement(FormGroup, {
-          check: true,
-          className: "my-2 px-3"
-        }, React.createElement(Input, {
-          id: item.label + "filterYear",
-          name: "filterYear",
-          value: item.value,
-          type: "radio",
-          className: "" + styles["radio-btn"],
-          checked: labelBox.calendar.value === item.value,
-          onChange: function onChange() {
-            return onChangeYear(item);
-          }
-        }), React.createElement(Label, {
-          check: true,
-          "for": item.label + "filterYear",
-          className: "" + styles["box-select-label"]
-        }, React.createElement("p", null, item.label)));
-      }))));
+      }, "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", {
+        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()
+      })));
+    }
+
+    if (name === FILTER_NAME.EndDate) {
+      return React.createElement("div", {
+        key: "" + name,
+        className: "" + styles["block-filter-component"],
+        ref: ref
+      }, React.createElement("button", {
+        onClick: handleToggleCollapse,
+        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+      }, React.createElement("img", {
+        src: "" + icon,
+        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", {
+        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()
+      })));
     }
 
     if (name === FILTER_NAME.Gender) {
       return React.createElement("div", {
         key: "" + name,
-        className: styles["block-filter-component"] + " "
+        className: styles["block-filter-component"] + " ",
+        ref: ref
       }, React.createElement("button", {
         onClick: handleToggleCollapse,
         className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
@@ -28134,7 +29007,8 @@ var SelectFilter = function SelectFilter(_ref) {
 
       return React.createElement("div", {
         key: "" + name,
-        className: styles["block-filter-component"] + " "
+        className: styles["block-filter-component"] + " ",
+        ref: ref
       }, React.createElement("button", {
         onClick: handleToggleCollapse,
         className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
@@ -28177,7 +29051,8 @@ var SelectFilter = function SelectFilter(_ref) {
 
       return React.createElement("div", {
         key: "" + name,
-        className: styles["block-filter-component"] + " "
+        className: styles["block-filter-component"] + " ",
+        ref: ref
       }, React.createElement("button", {
         onClick: handleToggleCollapse,
         className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
@@ -28218,7 +29093,8 @@ var SelectFilter = function SelectFilter(_ref) {
     if (name === FILTER_NAME.TeacherName) {
       return React.createElement("div", {
         key: "" + name,
-        className: styles["block-filter-component"] + " "
+        className: styles["block-filter-component"] + " ",
+        ref: ref
       }, React.createElement("button", {
         onClick: handleToggleCollapse,
         className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
@@ -28232,7 +29108,7 @@ var SelectFilter = function SelectFilter(_ref) {
       }, React.createElement(TeacherItemSelector, {
         onChange: function onChange(e) {
           handleChangeFilters(e);
-          !!changeCurrentTeacherUserId && changeCurrentTeacherUserId(e.teacherUserId || "");
+          !!changeCurrentTeacherUserId && changeCurrentTeacherUserId((e === null || e === void 0 ? void 0 : e.teacherUserId) || "");
 
           if (!(e !== null && e !== void 0 && e.label)) {
             setTeacherName("");
@@ -28248,7 +29124,8 @@ var SelectFilter = function SelectFilter(_ref) {
     if (name === FILTER_NAME.StudentName) {
       return React.createElement("div", {
         key: "" + name,
-        className: styles["block-filter-component"] + " "
+        className: styles["block-filter-component"] + " ",
+        ref: ref
       }, React.createElement("button", {
         onClick: handleToggleCollapse,
         className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer",
@@ -28295,7 +29172,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"]
@@ -29241,6 +30118,88 @@ var DashboardToPDF = function DashboardToPDF(props) {
   }, "Export"));
 };
 
+var LearningStrategiesTable = function LearningStrategiesTable(_ref) {
+  var _data$items;
+
+  var isOpen = _ref.isOpen,
+      onClosed = _ref.onClosed,
+      filter = _ref.filter,
+      data = _ref.data,
+      getData = _ref.getData,
+      changeFilter = _ref.changeFilter,
+      filterDashboard = _ref.filterDashboard;
+  useEffect(function () {
+    getData === null || getData === void 0 ? void 0 : getData();
+  }, [filter, filterDashboard]);
+  return React.createElement(Modal, {
+    isOpen: isOpen,
+    toggle: onClosed,
+    size: "xl"
+  }, React.createElement(ModalHeader, null, "Learning Strategies ", React.createElement("i", {
+    className: "fal fa-times",
+    onClick: onClosed,
+    style: {
+      position: "absolute",
+      right: "15px",
+      fontSize: "15px",
+      top: "20px",
+      cursor: "pointer"
+    }
+  })), React.createElement(ModalBody, null, React.createElement("div", {
+    className: "" + styles["filter-box-learning"]
+  }, React.createElement("div", {
+    className: "" + styles["search-box-learning"]
+  }, React.createElement(SearchBox, {
+    initValue: filter.searchString,
+    onSearch: function onSearch(searchString) {
+      return changeFilter({
+        searchString: searchString
+      });
+    },
+    placeholder: "Type something to search reflection result"
+  }))), React.createElement("div", {
+    style: {
+      maxHeight: "550px",
+      overflowY: "auto",
+      marginBottom: "10px"
+    }
+  }, React.createElement(Table, {
+    bordered: true,
+    striped: true,
+    responsive: "sm",
+    hover: true
+  }, React.createElement("thead", null, React.createElement("tr", {
+    style: {
+      top: 0,
+      left: 0,
+      zIndex: 2,
+      position: "sticky",
+      backgroundColor: "#fff"
+    }
+  }, React.createElement("th", null, "Strategies"), React.createElement("th", null, "Number Of Used"))), React.createElement("tbody", null, data === null || data === void 0 ? void 0 : (_data$items = data.items) === null || _data$items === void 0 ? void 0 : _data$items.map(function (item, index) {
+    return React.createElement("tr", {
+      key: index
+    }, React.createElement("td", {
+      className: "align-middle"
+    }, item === null || item === void 0 ? void 0 : item.strategiesName), React.createElement("td", {
+      className: "align-middle"
+    }, item === null || item === void 0 ? void 0 : item.numberOfUsed));
+  })))), React.createElement(CustomPagination, {
+    filters: filter,
+    totalRecordCount: data === null || data === void 0 ? void 0 : data.totalItems,
+    changePageSize: function changePageSize(pageSize) {
+      return changeFilter({
+        pageSize: pageSize
+      });
+    },
+    changePage: function changePage(currentPage) {
+      return changeFilter({
+        currentPage: currentPage
+      });
+    }
+  })));
+};
+
 var Dashboard = function Dashboard() {
   var _useChartDatas = useChartDatas(),
       chartDashBoards = _useChartDatas.chartDashBoards,
@@ -29271,7 +30230,13 @@ var Dashboard = function Dashboard() {
       avgConference = _useChartDatas.avgConference,
       dataConvertedSafety = _useChartDatas.dataConvertedSafety,
       activeColumnSafety = _useChartDatas.activeColumnSafety,
-      avgSafety = _useChartDatas.avgSafety;
+      avgSafety = _useChartDatas.avgSafety,
+      openLearningStrategiesTable = _useChartDatas.openLearningStrategiesTable,
+      handleOpenCloseLearningStrategiesTable = _useChartDatas.handleOpenCloseLearningStrategiesTable,
+      filterLearningStrategiesTable = _useChartDatas.filterLearningStrategiesTable,
+      changeFiltersLearningStrategiesTable = _useChartDatas.changeFiltersLearningStrategiesTable,
+      getLearningStrategiesTableData = _useChartDatas.getLearningStrategiesTableData,
+      learningStrategiesData = _useChartDatas.learningStrategiesData;
 
   var _useBehavior = useBehavior(initialTypeChart),
       chartIsOpened = _useBehavior.chartIsOpened,
@@ -29281,6 +30246,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];
@@ -29301,11 +30269,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"]
@@ -29318,11 +30286,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, {
     selectedToPDF: selectedToPrint,
     initialData: chartDashBoards,
     typeChartList: typeChartList,
@@ -29349,7 +30317,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: ""
@@ -29363,13 +30331,13 @@ 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"
   }, LIST_FILTERS_LEFT.map(function (e) {
     return React.createElement(SelectFilter, {
-      name: e.name,
+      name: t("" + e.name),
       icon: e.icon,
       handleChangeFilters: e.handleChangeFilters,
       filter: filter,
@@ -29380,7 +30348,7 @@ var Dashboard = function Dashboard() {
     className: "d-flex"
   }, LIST_FILTERS_RIGHT.map(function (e) {
     return React.createElement(SelectFilter, {
-      name: e.name,
+      name: t("" + e.name),
       icon: e.icon,
       handleChangeFilters: e.handleChangeFilters,
       filter: filter,
@@ -29399,7 +30367,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,
@@ -29410,24 +30378,49 @@ 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);
       },
       isShowChangeChart: chartDashBoard.isShowChangeChart,
       typeChart: typeChartList[index],
       onChangeChart: function onChangeChart(type) {
-        return _onChangeChart(index, type);
+        return _onChangeChart(index, type, chartDashBoard === null || chartDashBoard === void 0 ? void 0 : chartDashBoard.options);
       },
       isOpen: chartIsOpened[index],
-      options: chartDashBoard.options
+      options: chartDashBoard.options,
+      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, {
       isOpen: chartIsOpened[index]
     }, chartDashBoard.children(typeChartList[index])));
+  }), React.createElement(LearningStrategiesTable, {
+    isOpen: openLearningStrategiesTable,
+    onClosed: handleOpenCloseLearningStrategiesTable,
+    filter: filterLearningStrategiesTable,
+    filterDashboard: filter,
+    data: learningStrategiesData,
+    getData: getLearningStrategiesTableData,
+    changeFilter: changeFiltersLearningStrategiesTable
   }));
 };
 
+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;
+};
+
 LicenseManager.setLicenseKey(LICENSE_AGGRID);
 
-export { 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 { 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