mario-education 2.4.31-admin → 2.4.32-beta

package/dist/index.modern.js

@@ -2,7 +2,7 @@ import { api, BASE_URL, setAlert, CustomSelector, LinkEditButton, DeleteButtonIc
 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';
@@ -18,6 +18,8 @@ import { FaCheck, FaTimes, FaRegEdit } from 'react-icons/fa';
 import { Editor } from '@tinymce/tinymce-react';
 import Chart from 'react-apexcharts';
 import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';
+import MomentUtils from '@date-io/moment';
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';
 
@@ -1051,6 +1053,8 @@ var FILTER_NAME;
   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 +1152,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"};
 
 var ToggleInput = function ToggleInput(_ref) {
   var value = _ref.value,
@@ -1297,7 +1301,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 +1314,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 +1322,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 +1420,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 +1431,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;
 
@@ -12478,7 +12485,8 @@ var initValue$g = {
   isSurvey: true,
   subQuestions: [],
   isMandatory: false,
-  isBeforeSession: false
+  isBeforeSession: false,
+  isDefaultQuestionSurvey: false
 };
 var TITLE$h = "Question detail";
 
@@ -12718,7 +12726,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, {
@@ -14417,6 +14437,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 +14455,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: "",
@@ -14668,16 +14706,556 @@ var QuestionCateList = function QuestionCateList() {
       filters = _useQuestionCateList.filters,
       changeFilters = _useQuestionCateList.changeFilters;
 
-  var _useQuestionCateDetai = useQuestionCateDetail(),
-      id = _useQuestionCateDetai.id,
-      setId = _useQuestionCateDetai.setId,
-      questionCateDetail = _useQuestionCateDetai.questionCateDetail,
-      confirmData = _useQuestionCateDetai.confirmData,
-      reset = _useQuestionCateDetai.reset,
-      edited = _useQuestionCateDetai.edited,
-      setEdited = _useQuestionCateDetai.setEdited,
-      setEditedTrue = _useQuestionCateDetai.setEditedTrue,
-      setEditedFalse = _useQuestionCateDetai.setEditedFalse;
+  var _useQuestionCateDetai = useQuestionCateDetail(),
+      id = _useQuestionCateDetai.id,
+      setId = _useQuestionCateDetai.setId,
+      questionCateDetail = _useQuestionCateDetai.questionCateDetail,
+      confirmData = _useQuestionCateDetai.confirmData,
+      reset = _useQuestionCateDetai.reset,
+      edited = _useQuestionCateDetai.edited,
+      setEdited = _useQuestionCateDetai.setEdited,
+      setEditedTrue = _useQuestionCateDetai.setEditedTrue,
+      setEditedFalse = _useQuestionCateDetai.setEditedFalse;
+
+  var openModal = function openModal(questionCateId) {
+    questionCateId ? setId(questionCateId) : setId(0);
+    modal && modal.current && modal.current.toggle();
+  };
+
+  var onConfirm = function onConfirm(values) {
+    confirmData(values, function () {
+      modal && modal.current && modal.current.toggle();
+      getData();
+    });
+    setEditedFalse();
+  };
+
+  var onRemove = function onRemove(id) {
+    removeData(id);
+  };
+
+  var onCancel = function onCancel() {
+    return reset();
+  };
+
+  return React.createElement("div", null, React.createElement(QuestionCateModal$1, {
+    ref: modal,
+    header: !!id ? "Edit category" : "Create category",
+    confirmText: !!id ? "Update" : "Create",
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    questionCateDetail: questionCateDetail,
+    questionCateList: questionCateList,
+    edited: edited,
+    setEdited: setEdited,
+    setEditedTrue: setEditedTrue,
+    setEditedFalse: setEditedFalse
+  }), React.createElement(QuitPrompt, {
+    when: edited
+  }), React.createElement(Row, {
+    className: "my-2"
+  }, React.createElement(Col, {
+    md: 4
+  }, React.createElement(AddButton, {
+    text: "Create category",
+    onClick: function onClick() {
+      return openModal();
+    }
+  })), React.createElement(Col, {
+    md: 4,
+    className: "d-flex align-items-center justify-content-end"
+  }, "Total of category: ", totalItems)), React.createElement(Row, {
+    className: "mb-2"
+  }, React.createElement(Col, {
+    md: 8
+  }, questionCateList && questionCateList.length > 0 ? React.createElement(Table, {
+    bordered: true,
+    hover: true,
+    striped: true,
+    responsive: true,
+    size: "sm"
+  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+    className: "align-top"
+  }, "Name"), React.createElement("th", {
+    className: "align-top"
+  }, "Number of question"), React.createElement("th", {
+    className: "text-center"
+  }, "Action"))), React.createElement("tbody", null, questionCateList.map(function (record) {
+    return React.createElement("tr", {
+      key: record.id
+    }, React.createElement("td", {
+      className: "align-middle"
+    }, React.createElement(LinkEditButton, {
+      label: record.name,
+      onClick: function onClick() {
+        return openModal(record.id);
+      }
+    })), React.createElement("td", {
+      className: "align-middle"
+    }, record.numberOfQuestions), React.createElement("td", {
+      className: "text-center align-middle"
+    }, React.createElement(DeleteButtonIcon, {
+      onClick: function onClick() {
+        return onRemove(record.id);
+      }
+    })));
+  }))) : React.createElement(EmptyDataAlert, {
+    label: "question category"
+  })), React.createElement(Col, {
+    md: 8,
+    className: "text-right"
+  }, React.createElement(CustomPagination, {
+    totalRecordCount: totalItems,
+    filters: filters,
+    changePageSize: function changePageSize(pageSize) {
+      return changeFilters({
+        pageSize: pageSize
+      });
+    },
+    changePage: function changePage(currentPage) {
+      return changeFilters({
+        currentPage: currentPage
+      });
+    }
+  }))));
+};
+
+var schema$f = object({
+  name: string().required("Name is required")
+});
+
+var QuestionCateModal$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 TemplateCateModal = forwardRef(QuestionCateModal$2);
+
+var initValue$l = {
+  name: "",
+  questionIds: []
+};
+
+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);
@@ -14687,6 +15265,8 @@ var QuestionCateList = function QuestionCateList() {
   var onConfirm = function onConfirm(values) {
     confirmData(values, function () {
       modal && modal.current && modal.current.toggle();
+      setListQuestions([]);
+      setCategoryId(0);
       getData();
     });
     setEditedFalse();
@@ -14700,9 +15280,9 @@ var QuestionCateList = function QuestionCateList() {
     return reset();
   };
 
-  return React.createElement("div", null, React.createElement(QuestionCateModal$1, {
+  return React.createElement("div", null, React.createElement(TemplateCateModal, {
     ref: modal,
-    header: !!id ? "Edit category" : "Create category",
+    header: !!id ? "Edit template" : "Create template",
     confirmText: !!id ? "Update" : "Create",
     onConfirm: onConfirm,
     onCancel: onCancel,
@@ -14711,7 +15291,14 @@ var QuestionCateList = function QuestionCateList() {
     edited: edited,
     setEdited: setEdited,
     setEditedTrue: setEditedTrue,
-    setEditedFalse: setEditedFalse
+    setEditedFalse: setEditedFalse,
+    categoryId: categoryId,
+    setCategoryId: setCategoryId,
+    questionSelectorValue: questionSelectorValue,
+    setTemporaryQuestion: setTemporaryQuestion,
+    addQuestion: addQuestion,
+    listQuestions: listQuestions,
+    removeQuestion: removeQuestion
   }), React.createElement(QuitPrompt, {
     when: edited
   }), React.createElement(Row, {
@@ -14719,7 +15306,7 @@ var QuestionCateList = function QuestionCateList() {
   }, React.createElement(Col, {
     md: 4
   }, React.createElement(AddButton, {
-    text: "Create category",
+    text: "Create template",
     onClick: function onClick() {
       return openModal();
     }
@@ -14762,7 +15349,7 @@ var QuestionCateList = function QuestionCateList() {
       }
     })));
   }))) : React.createElement(EmptyDataAlert, {
-    label: "question category"
+    label: "template survey"
   })), React.createElement(Col, {
     md: 8,
     className: "text-right"
@@ -14808,6 +15395,10 @@ var tabs$3 = [{
   path: "/admin/question/question-category",
   title: "Question category",
   component: QuestionCateList
+}, {
+  path: "/admin/question/template-survey",
+  title: "Template Survey",
+  component: TemplateSurveyList
 }];
 var title$4 = "Question bank";
 
@@ -14979,7 +15570,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 +15606,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 +15822,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 +15842,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 +15871,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 +15993,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 +16002,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 +16099,7 @@ var useAssignmentList = function useAssignmentList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$m;
+    document.title = TITLE$n;
   }, []);
   useEffect(function () {
     getData();
@@ -15745,7 +16336,7 @@ var useAssignmentResultList = function useAssignmentResultList() {
   };
 };
 
-var initValue$m = {
+var initValue$n = {
   questionResponses: [],
   answerTexts: []
 };
@@ -15757,7 +16348,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 +16549,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 +16653,7 @@ var useSessionTemplateList = function useSessionTemplateList() {
     history.push(url);
   }, []);
   useEffect(function () {
-    document.title = TITLE$n;
+    document.title = TITLE$o;
   }, []);
   useEffect(function () {
     getData();
@@ -16209,7 +16800,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 +16890,7 @@ var useSessionTemplateGeneralClassList = function useSessionTemplateGeneralClass
     history.push(url);
   }, []);
   useEffect(function () {
-    document.title = TITLE$o;
+    document.title = TITLE$p;
   }, []);
   useEffect(function () {
     getData();
@@ -16703,7 +17294,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 +17323,7 @@ var useAddQuestion = function useAddQuestion() {
   };
 };
 
-var initValue$n = {
+var initValue$o = {
   name: "",
   isConference: false,
   conferenceRubricId: null,
@@ -16782,7 +17373,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 +17682,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 +17964,7 @@ var SubjectSelector = function SubjectSelector(_ref) {
   });
 };
 
-var initValue$o = {
+var initValue$p = {
   name: "",
   subjectId: 0,
   questionTeacherIds: [],
@@ -17424,7 +18015,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 +18235,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 +18319,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 +18526,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;
   }),
@@ -17965,7 +18556,7 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: customAlertDetail,
     enableReinitialize: true,
-    validationSchema: schema$i,
+    validationSchema: schema$j,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -18120,7 +18711,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 +18726,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 +18755,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 +18870,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 +18879,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 +18967,7 @@ var useCustomAlertList = function useCustomAlertList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$p;
+    document.title = TITLE$q;
   }, []);
   useEffect(function () {
     getData();
@@ -18539,7 +19130,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 +19155,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 +19461,7 @@ var initItemValue = {
   text: "",
   breakPointCertification: []
 };
-var initValue$q = {
+var initValue$r = {
   name: "",
   description: "",
   imageUrl: "",
@@ -18892,7 +19483,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 +19512,7 @@ var useCertificateDetail = function useCertificateDetail() {
   };
 
   useEffect(function () {
-    !!id ? getData() : setCertificateDetail(initValue$q);
+    !!id ? getData() : setCertificateDetail(initValue$r);
   }, [id]);
   useEffect(function () {
     setEditedFalse();
@@ -19009,7 +19600,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 +19609,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 +19692,7 @@ var useCertificateList = function useCertificateList() {
     dispatch(setLoading(false));
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$q;
+    document.title = TITLE$r;
   }, []);
   useEffect(function () {
     getData();
@@ -19249,7 +19840,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 +19928,7 @@ var useCertificateList$1 = function useCertificateList() {
     }
   }, [listWaiting]);
   useEffect(function () {
-    document.title = TITLE$r;
+    document.title = TITLE$s;
     getListWaiting();
     getListApproved();
   }, []);
@@ -19804,16 +20395,35 @@ 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;
+
+  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"] + " "
+    className: "d-flex justify-content-between align-items-center " + styles$1["header-chart"] + " ",
+    onClick: onToggle
   }, React.createElement("div", {
     className: "" + styles$1["header-left"]
   }, 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"
@@ -19879,9 +20489,9 @@ var useBehavior = function useBehavior(initialTypeChart) {
       teacherUserId = _useState[0],
       setTeacherUserId = _useState[1];
 
-  var _useState2 = useState(initialTypeChart.map(function () {
+  var _useState2 = useState([true].concat(initialTypeChart.map(function () {
     return false;
-  })),
+  }).splice(0, initialTypeChart.length - 2))),
       chartIsOpened = _useState2[0],
       setChartIsOpened = _useState2[1];
 
@@ -19895,7 +20505,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 +20517,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;
           }));
         }
 
@@ -25727,7 +26337,7 @@ var gradeOptions = function gradeOptions(grades, studentUserId) {
     };
   });
 };
-var learningStrategyChartOptions = function learningStrategyChartOptions(labelNames, usageCountList) {
+var learningStrategyChartOptions = function learningStrategyChartOptions(labelNames, usageCountList, screenWidth) {
   return {
     chart: {
       type: "bar",
@@ -25784,7 +26394,7 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
         show: true,
         align: "left",
         minWidth: 0,
-        maxWidth: 120,
+        maxWidth: screenWidth,
         style: {
           colors: [],
           fontSize: "14px",
@@ -26626,9 +27236,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,
@@ -26660,7 +27267,8 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
       activeColumn = _ref.activeColumn,
       series = _ref.series,
       avg = _ref.avg,
-      months = _ref.months;
+      months = _ref.months,
+      isPDF = _ref.isPDF;
   if (!data) return React.createElement("div", {
     className: "flex justify-content-center align-items-center",
     style: {
@@ -26669,7 +27277,7 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
   }, React.createElement("div", null, "No Data"));
   return React.createElement("div", {
     className: "w-100 h-100 " + styles$1["column-chart-percent"]
-  }, React.createElement("div", {
+  }, !isPDF && React.createElement("div", {
     className: "w-full d-flex gap-2 flex-wrap " + styles$1["listItem"]
   }, data.map(function (month, index) {
     return React.createElement("div", {
@@ -26717,7 +27325,7 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
     months: months,
     activeColumn: activeColumn,
     series: series
-  })), React.createElement("div", {
+  })), !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", {
@@ -26926,16 +27534,17 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
   });
   var maxData = Math.max.apply(Math, usageCount);
   var serieslearningStrategy = [{
-    name: "Usage Point",
+    name: "Perceived Usage",
     data: learningStrategies === null || learningStrategies === void 0 ? void 0 : learningStrategies.map(function (i) {
       return average(i.usagePoint);
     })
   }, {
-    name: "Usage Count",
+    name: "Total Number of Times Selected",
     data: learningStrategies === null || learningStrategies === void 0 ? void 0 : learningStrategies.map(function (i) {
       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", {
@@ -26943,7 +27552,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,7 +27632,7 @@ var getBandScore = function getBandScore() {
   return api.get("" + BAND_SCORE);
 };
 
-var TITLE$s = "Dashboard";
+var TITLE$t = "Dashboard";
 var DEFAULT_START_DATE = moment().startOf("year").valueOf();
 var DEFAULT_END_DATE = moment().endOf("day").valueOf();
 
@@ -27162,12 +27771,14 @@ var useDashboard = function useDashboard() {
   };
 
   useEffect(function () {
-    setSeriesOneToOne(newSeriesOneToOne);
-    setActiveColumnOneToOne(dataConvertedOneToOne.map(function (_i) {
-      return true;
-    }));
+    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 newAvgOneToOne[index];
+      return activeColumnOneToOne[index] ? newAvgOneToOne[index] : 0;
+    }));
+    setSeriesOneToOne(newSeriesOneToOne === null || newSeriesOneToOne === void 0 ? void 0 : newSeriesOneToOne.filter(function (_, idx) {
+      return activeColumnOneToOne[idx];
     }));
   }, [chartOneToOneData.overviewQuestionChoice]);
 
@@ -27203,12 +27814,14 @@ var useDashboard = function useDashboard() {
   };
 
   useEffect(function () {
-    setSeriesClassReflection(newSeriesClassReflection);
-    setActiveColumnClassReflection(dataConvertedClassReflection.map(function (_i) {
-      return true;
+    setSeriesClassReflection(newSeriesClassReflection === null || newSeriesClassReflection === void 0 ? void 0 : newSeriesClassReflection.filter(function (_, idx) {
+      return activeColumnClassReflection[idx];
     }));
+    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 newAvgClassReflection[index];
+      return activeColumnClassReflection[index] ? newAvgClassReflection[index] : 0;
     }));
   }, [chartClassReflection.overviewQuestionChoice]);
 
@@ -27244,12 +27857,14 @@ var useDashboard = function useDashboard() {
   };
 
   useEffect(function () {
-    setSeriesConference(newSeriesConference);
-    setActiveColumnConference(dataConvertedConference === null || dataConvertedConference === void 0 ? void 0 : dataConvertedConference.map(function (_i) {
-      return true;
+    setSeriesConference(newSeriesConference === null || newSeriesConference === void 0 ? void 0 : newSeriesConference.filter(function (_, idx) {
+      return activeColumnConference[idx];
     }));
+    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];
+      return activeColumnConference[idx] ? newAvgConference[idx] : 0;
     }));
   }, [chartConference === null || chartConference === void 0 ? void 0 : chartConference.overviewQuestionChoice]);
 
@@ -27396,7 +28011,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));
@@ -27561,6 +28176,14 @@ var useChartDatas = function useChartDatas() {
     name: FILTER_NAME.Calendar,
     icon: "/images/calendar.svg",
     handleChangeFilters: handleChangeFilters
+  }, {
+    name: FILTER_NAME.StartDate,
+    icon: "/images/calendar.svg",
+    handleChangeFilters: handleChangeFilters
+  }, {
+    name: FILTER_NAME.EndDate,
+    icon: "/images/calendar.svg",
+    handleChangeFilters: handleChangeFilters
   }, {
     name: FILTER_NAME.Gender,
     icon: "/images/gender-icon.svg",
@@ -27596,29 +28219,31 @@ var useChartDatas = function useChartDatas() {
     studentId: filter.studentId
   }];
   var chartDashBoards = [{
-    id: "high_impact_learning_strategie",
-    label: "High Impact Learning Strategie",
+    id: "readiness_to_learn",
+    label: "Readiness to Learn",
     children: function children(_) {
-      return React.createElement(TopLearningStrategy$1, {
-        data: topLearningStrategies
+      return React.createElement(BubbleChartCustom$1, {
+        data: readinessToLearning
       });
     },
     isShowChangeChart: false,
-    options: []
+    options: [],
+    contentTooltip: "The represenation of individual student responses to their own feelings of Energy, Focus, Happiness, Safety, and Stress at the time administered. Note that scores are set on a 1-100 scale with the exception of Stress which optimum stress is set at '0' to get a sense of High Stress vs Low Stress."
   }, {
-    id: "readiness_to_learn",
-    label: "Readiness to learn",
+    id: "high_impact_learning_strategie",
+    label: "High Impact Learning Strategies",
     children: function children(_) {
-      return React.createElement(BubbleChartCustom$1, {
-        data: readinessToLearning
+      return React.createElement(TopLearningStrategy$1, {
+        data: topLearningStrategies
       });
     },
     isShowChangeChart: false,
-    options: []
+    options: [],
+    contentTooltip: "Both the composite of individual students reporting their percieved use of John Hattie's High Impact Learning Strategies measured against the actual application with a teacher in total."
   }, {
     id: "1_to_1",
     label: "1 To 1",
-    children: function children(typeChart) {
+    children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedOneToOne,
         id: "1_to_1",
@@ -27627,7 +28252,8 @@ var useChartDatas = function useChartDatas() {
         activeColumn: activeColumnOneToOne,
         series: seriesOneToOne,
         avg: avgOneToOne,
-        months: monthsOneToOne
+        months: monthsOneToOne,
+        isPDF: isPDF
       });
     },
     isShowChangeChart: true,
@@ -27637,11 +28263,12 @@ var useChartDatas = function useChartDatas() {
     }, {
       label: "Bar charts",
       value: TYPECHART.BAR
-    }]
+    }],
+    contentTooltip: "The composite results of the survey completed by individual students seeking their own perception of performance in the 6 key areas followed by 3 specific areas of well being over time."
   }, {
     id: "class_reflection",
-    label: "Class Reflection",
-    children: function children(typeChart) {
+    label: "Reflection",
+    children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedClassReflection,
         typeChart: typeChart,
@@ -27651,7 +28278,8 @@ var useChartDatas = function useChartDatas() {
         activeColumn: activeColumnClassReflection,
         series: seriesClassRefection,
         avg: avgClassReflection,
-        months: monthsClassReflection
+        months: monthsClassReflection,
+        isPDF: isPDF
       });
     },
     isShowChangeChart: true,
@@ -27661,11 +28289,12 @@ var useChartDatas = function useChartDatas() {
     }, {
       label: "Line charts",
       value: TYPECHART.LINE
-    }]
+    }],
+    contentTooltip: "The result of surveys sent to any individual (external or internal) that connects with the student to assist in measuring the individual student's: Productivity, Happiness, Energy, Focus, and Stress over time."
   }, {
     id: "conference",
-    label: "Conference",
-    children: function children(typeChart) {
+    label: "Conferences",
+    children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedConference,
         typeChart: typeChart,
@@ -27674,7 +28303,8 @@ var useChartDatas = function useChartDatas() {
         activeColumn: activeColumnConference,
         series: seriesConference,
         avg: avgConference,
-        months: monthsConference
+        months: monthsConference,
+        isPDF: isPDF
       });
     },
     isShowChangeChart: true,
@@ -27684,11 +28314,12 @@ var useChartDatas = function useChartDatas() {
     }, {
       label: "Bar charts",
       value: TYPECHART.BAR
-    }]
+    }],
+    contentTooltip: "The composite representation of individual aggregate scores located at the bottom of individual Conferences conducted between Teachers and Students over time. Note that scores of 'Not Applicable' do not get measured."
   }, {
     id: "safety",
     label: "Safety",
-    children: function children(typeChart) {
+    children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedSafety,
         typeChart: typeChart,
@@ -27698,7 +28329,8 @@ var useChartDatas = function useChartDatas() {
         activeColumn: activeColumnSafety,
         series: seriesSafety,
         avg: avgSafety,
-        months: monthsSafety
+        months: monthsSafety,
+        isPDF: isPDF
       });
     },
     isShowChangeChart: true,
@@ -27708,10 +28340,11 @@ var useChartDatas = function useChartDatas() {
     }, {
       label: "Line charts",
       value: TYPECHART.LINE
-    }]
+    }],
+    contentTooltip: "The visual represenation of all the responses from the question asking students to rate their perceived level of safety for themselves at your school over time."
   }, {
     id: "Student_by_age",
-    label: "Student by age",
+    label: "Student by Age",
     children: function children(_, columnFlex) {
       return React.createElement(StudentByAgeAndGender$1, {
         columnFlex: columnFlex,
@@ -27720,20 +28353,22 @@ var useChartDatas = function useChartDatas() {
       });
     },
     isShowChangeChart: false,
-    options: []
+    options: [],
+    contentTooltip: "The specific represenation of students by gender and grade level at your school."
   }, {
     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: "The composite representation of students by individual grades in your school with specific designations."
   }];
   var initialTypeChart = chartDashBoards.map(function (i) {
-    return i.options.length > 0 ? i.options[1].value : TYPECHART.BAR;
+    return i.options.length > 0 ? i.options[0].value : TYPECHART.AREA;
   });
   var totalCardData = [{
     icon: "images/icon_chart.png",
@@ -27788,7 +28423,19 @@ var useChartDatas = function useChartDatas() {
     topLearningStrategies: topLearningStrategies,
     chartClassReflection: chartClassReflection,
     chartConference: chartConference,
-    safety: safety
+    safety: safety,
+    dataConvertedOneToOne: dataConvertedOneToOne,
+    activeColumnOneToOne: activeColumnOneToOne,
+    avgOneToOne: avgOneToOne,
+    dataConvertedClassReflection: dataConvertedClassReflection,
+    activeColumnClassReflection: activeColumnClassReflection,
+    avgClassReflection: avgClassReflection,
+    dataConvertedConference: dataConvertedConference,
+    activeColumnConference: activeColumnConference,
+    avgConference: avgConference,
+    dataConvertedSafety: dataConvertedSafety,
+    activeColumnSafety: activeColumnSafety,
+    avgSafety: avgSafety
   };
 };
 
@@ -27989,8 +28636,19 @@ var SelectFilter = function SelectFilter(_ref) {
     }));
   };
 
+  var handleChangeStartDate = function handleChangeStartDate(date) {
+    !!onChangeFilters && onChangeFilters({
+      startDate: moment(date).startOf("day").valueOf()
+    });
+  };
+
+  var handleChangeEndDate = function handleChangeEndDate(date) {
+    !!onChangeFilters && onChangeFilters({
+      endDate: moment(date).endOf("day").valueOf()
+    });
+  };
+
   var onChangeGender = function onChangeGender(item) {
-    console.log("item", item);
     !!onChangeFilters && onChangeFilters({
       gender: item.value === -1 ? [LegalGenderType.None, LegalGenderType.Male, LegalGenderType.Female] : [item.value]
     });
@@ -28073,6 +28731,62 @@ var SelectFilter = function SelectFilter(_ref) {
       }))));
     }
 
+    if (name === FILTER_NAME.StartDate) {
+      return React.createElement("div", {
+        key: "" + name,
+        className: "" + styles["block-filter-component"]
+      }, React.createElement("button", {
+        onClick: handleToggleCollapse,
+        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+      }, React.createElement("p", {
+        className: styles["color-filter"] + " my-0 mx-2"
+      }, "Start Date", !!(filter !== null && filter !== void 0 && filter.startDate) && ": " + moment(filter === null || filter === void 0 ? void 0 : filter.startDate).format("DD/MM/YYYY"))), React.createElement("div", {
+        className: "" + styles["date-picker"]
+      }, React.createElement(MuiPickersUtilsProvider, {
+        utils: MomentUtils
+      }, React.createElement(KeyboardDatePicker, {
+        open: isOpenCollapse,
+        onClose: handleToggleCollapse,
+        variant: "dialog",
+        disableToolbar: true,
+        id: "date-picker-dialog",
+        format: "MM/dd/yyyy",
+        onChange: handleChangeStartDate,
+        value: filter === null || filter === void 0 ? void 0 : filter.startDate,
+        KeyboardButtonProps: {
+          "aria-label": "change date"
+        }
+      }))));
+    }
+
+    if (name === FILTER_NAME.EndDate) {
+      return React.createElement("div", {
+        key: "" + name,
+        className: "" + styles["block-filter-component"]
+      }, React.createElement("button", {
+        onClick: handleToggleCollapse,
+        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+      }, 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"))), React.createElement("div", {
+        className: "" + styles["date-picker"]
+      }, React.createElement(MuiPickersUtilsProvider, {
+        utils: MomentUtils
+      }, React.createElement(KeyboardDatePicker, {
+        open: isOpenCollapse,
+        onClose: handleToggleCollapse,
+        variant: "dialog",
+        disableToolbar: true,
+        id: "date-picker-dialog",
+        format: "MM/dd/yyyy",
+        onChange: handleChangeEndDate,
+        value: filter === null || filter === void 0 ? void 0 : filter.endDate,
+        KeyboardButtonProps: {
+          "aria-label": "change date"
+        }
+      }))));
+    }
+
     if (name === FILTER_NAME.Gender) {
       return React.createElement("div", {
         key: "" + name,
@@ -28295,7 +29009,19 @@ var DashboardToPDF = function DashboardToPDF(props) {
       topLearningStrategies = props.topLearningStrategies,
       chartClassReflection = props.chartClassReflection,
       chartConference = props.chartConference,
-      safety = props.safety;
+      safety = props.safety,
+      dataConvertedOneToOne = props.dataConvertedOneToOne,
+      activeColumnOneToOne = props.activeColumnOneToOne,
+      avgOneToOne = props.avgOneToOne,
+      dataConvertedClassReflection = props.dataConvertedClassReflection,
+      activeColumnClassReflection = props.activeColumnClassReflection,
+      avgClassReflection = props.avgClassReflection,
+      dataConvertedConference = props.dataConvertedConference,
+      activeColumnConference = props.activeColumnConference,
+      avgConference = props.avgConference,
+      dataConvertedSafety = props.dataConvertedSafety,
+      activeColumnSafety = props.activeColumnSafety,
+      avgSafety = props.avgSafety;
   var dispatch = useDispatch();
   var chartHightImpactLearningStrategie = selectedToPDF.find(function (i) {
     return i.id === "high_impact_learning_strategie";
@@ -28405,71 +29131,87 @@ var DashboardToPDF = function DashboardToPDF(props) {
                             var _safety$overviewQuest;
 
                             if (safety.overviewQuestionChoice[i].resultQuestion[0].questionId != 0) {
-                              var _sortedResultQuestion, _sortedResultQuestion2, _sortedResultQuestion3, _sortedResultQuestion4, _sortedResultQuestion5, _sortedResultQuestion6;
+                              var _sortedResultQuestion, _sortedResultQuestion2, _safety$overviewQuest2;
 
                               var sortedResultQuestions = safety.overviewQuestionChoice[i].resultQuestion.sort(function (a, b) {
                                 return a.avgOfStudentChoice < b.avgOfStudentChoice ? 1 : -1;
                               });
                               var bestResultQuestion1 = ((_sortedResultQuestion = sortedResultQuestions[0]) === null || _sortedResultQuestion === void 0 ? void 0 : _sortedResultQuestion.questionText.slice(3, (_sortedResultQuestion2 = sortedResultQuestions[0]) === null || _sortedResultQuestion2 === void 0 ? void 0 : _sortedResultQuestion2.questionText.indexOf("</p>"))) || "";
-                              var bestResultQuestion2 = ((_sortedResultQuestion3 = sortedResultQuestions[1]) === null || _sortedResultQuestion3 === void 0 ? void 0 : _sortedResultQuestion3.questionText.slice(3, (_sortedResultQuestion4 = sortedResultQuestions[1]) === null || _sortedResultQuestion4 === void 0 ? void 0 : _sortedResultQuestion4.questionText.indexOf("</p>"))) || "";
-                              var bestResultQuestion3 = ((_sortedResultQuestion5 = sortedResultQuestions[2]) === null || _sortedResultQuestion5 === void 0 ? void 0 : _sortedResultQuestion5.questionText.slice(3, (_sortedResultQuestion6 = sortedResultQuestions[2]) === null || _sortedResultQuestion6 === void 0 ? void 0 : _sortedResultQuestion6.questionText.indexOf("</p>"))) || "";
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(safety.overviewQuestionChoice[i].month, left, line + 20);
 
                               if (bestResultQuestion1 != "") {
-                                var _sortedResultQuestion7;
+                                var _sortedResultQuestion3;
 
                                 doc.setFont("Helvetica", "normal", "bold");
                                 doc.text(bestResultQuestion1, left + 10, line + 30);
                                 doc.setFont("Helvetica", "normal", "normal");
-                                doc.text(((_sortedResultQuestion7 = sortedResultQuestions[0]) === null || _sortedResultQuestion7 === void 0 ? void 0 : _sortedResultQuestion7.avgOfStudentChoice.toFixed(1)) + "%", left + (bestResultQuestion1 === null || bestResultQuestion1 === void 0 ? void 0 : bestResultQuestion1.length) * 4 + 15, line + 30);
+                                doc.text(((_sortedResultQuestion3 = sortedResultQuestions[0]) === null || _sortedResultQuestion3 === void 0 ? void 0 : _sortedResultQuestion3.avgOfStudentChoice.toFixed(1)) + "%", left + (bestResultQuestion1 === null || bestResultQuestion1 === void 0 ? void 0 : bestResultQuestion1.length) * 4 + 15, line + 30);
                                 doc.setDrawColor(0);
                                 doc.setFillColor(64, 210, 204);
                                 doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
                               }
 
-                              if (bestResultQuestion2 != "") {
-                                var _sortedResultQuestion8;
-
-                                doc.setFont("Helvetica", "normal", "bold");
-                                doc.text(bestResultQuestion2, left + 10, line + 40);
-                                doc.setFont("Helvetica", "normal", "normal");
-                                doc.text(((_sortedResultQuestion8 = sortedResultQuestions[1]) === null || _sortedResultQuestion8 === void 0 ? void 0 : _sortedResultQuestion8.avgOfStudentChoice.toFixed(1)) + "%", left + (bestResultQuestion2 === null || bestResultQuestion2 === void 0 ? void 0 : bestResultQuestion2.length) * 4 + 15, line + 40);
-                                doc.setDrawColor(0);
-                                doc.setFillColor(120, 182, 226);
-                                doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
-                              }
-
-                              if (bestResultQuestion3 != "") {
-                                var _sortedResultQuestion9;
-
-                                doc.setFont("Helvetica", "normal", "bold");
-                                doc.text(bestResultQuestion3, left + 10, line + 50);
-                                doc.setFont("Helvetica", "normal", "normal");
-                                doc.text(((_sortedResultQuestion9 = sortedResultQuestions[2]) === null || _sortedResultQuestion9 === void 0 ? void 0 : _sortedResultQuestion9.avgOfStudentChoice.toFixed(1)) + "%", left + (bestResultQuestion3 === null || bestResultQuestion3 === void 0 ? void 0 : bestResultQuestion3.length) * 4 + 15, line + 50);
-                                doc.setDrawColor(0);
-                                doc.setFillColor(255, 176, 79);
-                                doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
-                              }
-
                               if ((bestResultQuestion1 === null || bestResultQuestion1 === void 0 ? void 0 : bestResultQuestion1.length) * 5 + 5 + 10 > 100) {
                                 left = left + (bestResultQuestion1 === null || bestResultQuestion1 === void 0 ? void 0 : bestResultQuestion1.length) * 5 + 20;
-                              } else if ((bestResultQuestion2 === null || bestResultQuestion2 === void 0 ? void 0 : bestResultQuestion2.length) * 5 + 5 + 10 > 100) {
-                                left = left + (bestResultQuestion2 === null || bestResultQuestion2 === void 0 ? void 0 : bestResultQuestion2.length) * 5 + 20;
-                              } else if ((bestResultQuestion3 === null || bestResultQuestion3 === void 0 ? void 0 : bestResultQuestion3.length) * 5 + 5 + 10 > 100) {
-                                left = left + (bestResultQuestion3 === null || bestResultQuestion3 === void 0 ? void 0 : bestResultQuestion3.length) * 5 + 20;
                               } else {
                                 left = left + 100;
                               }
 
-                              if (left + 80 > WIDTH_PAPER) {
+                              if (left + (safety === null || safety === void 0 ? void 0 : (_safety$overviewQuest2 = safety.overviewQuestionChoice[i + 1]) === null || _safety$overviewQuest2 === void 0 ? void 0 : _safety$overviewQuest2.month.length) * 20 > WIDTH_PAPER) {
                                 left = 20;
-                                line += 60;
+                                line += 30;
                               }
                             }
                           }
 
-                          doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                          doc.setFont("Helvetica", "normal", "normal");
+                          left = 20;
+
+                          for (var i = 0; i < dataConvertedSafety.length; i++) {
+                            if (activeColumnSafety[i]) {
+                              doc.setDrawColor(0);
+                              doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                              doc.roundedRect(left, line + 60, 5, 5, 1, 1, "F");
+                              doc.setTextColor("#252733");
+                              doc.text(dataConvertedSafety[i], left + 7, line + 65);
+                            } else {
+                              doc.setDrawColor(0);
+                              doc.setFillColor("#CCCCCC");
+                              doc.roundedRect(left, line + 60, 5, 5, 1, 1, "F");
+                              doc.setTextColor("#CCCCCC");
+                              doc.text(dataConvertedSafety[i], left + 7, line + 65);
+                            }
+
+                            left = left + dataConvertedSafety[i].length * 3 + 15;
+                          }
+
+                          left = 20;
+                          doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 70, 420, 140);
+
+                          for (var i = 0; i < dataConvertedSafety.length; i++) {
+                            if (activeColumnSafety[i]) {
+                              doc.setDrawColor(0);
+                              doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                              doc.roundedRect(left, line + 215, 5, 5, 1, 1, "F");
+                              doc.setTextColor("#252733");
+                              doc.setFont("Helvetica", "normal", "normal");
+                              doc.text(dataConvertedSafety[i], left + 7, line + 220);
+                              doc.setFont("Helvetica", "normal", "bold");
+                              doc.text(avgSafety[i] + "%", left, line + 227);
+                            } else {
+                              doc.setDrawColor(0);
+                              doc.setFillColor("#CCCCCC");
+                              doc.roundedRect(left, line + 215, 5, 5, 1, 1, "F");
+                              doc.setTextColor("#CCCCCC");
+                              doc.setFont("Helvetica", "normal", "normal");
+                              doc.text(dataConvertedSafety[i], left + 7, line + 220);
+                              doc.setFont("Helvetica", "normal", "bold");
+                              doc.text("0.00%", left, line + 227);
+                            }
+
+                            left = left + dataConvertedSafety[i].length * 3 + 15;
+                          }
                         });
                       });
                     }
@@ -28482,7 +29224,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                   if (!!chartConferecePDF) {
                     var _selectedToPDF4;
 
-                    var line = 80;
+                    var line = 70;
                     var left = 20;
                     if (selectedToPDF.indexOf(chartConferecePDF) != 0 && ((_selectedToPDF4 = selectedToPDF[selectedToPDF.indexOf(chartConferecePDF) - 1]) === null || _selectedToPDF4 === void 0 ? void 0 : _selectedToPDF4.id) != null) doc.addPage();
                     return Promise.resolve(createImageHeader()).then(function () {
@@ -28497,87 +29239,87 @@ var DashboardToPDF = function DashboardToPDF(props) {
                           var _chartConference$over;
 
                           if (chartConference.overviewQuestionChoice[i].resultQuestion[0].questionId != 0 || chartConference.overviewQuestionChoice[i].resultQuestion[0].questionText != "") {
-                            var _sortedResultQuestion10, _sortedResultQuestion11, _sortedResultQuestion12, _sortedResultQuestion13, _sortedResultQuestion14, _sortedResultQuestion15;
+                            var _sortedResultQuestion4, _sortedResultQuestion5, _sortedResultQuestion6, _sortedResultQuestion7, _sortedResultQuestion8, _sortedResultQuestion9, _chartConference$over2;
 
                             var sortedResultQuestions = chartConference.overviewQuestionChoice[i].resultQuestion.sort(function (a, b) {
                               return a.avgOfStudentChoice < b.avgOfStudentChoice ? 1 : -1;
                             });
-                            var resultQuestion1 = ((_sortedResultQuestion10 = sortedResultQuestions[0]) === null || _sortedResultQuestion10 === void 0 ? void 0 : _sortedResultQuestion10.questionText) || "";
-                            var resultQuestion2 = ((_sortedResultQuestion11 = sortedResultQuestions[1]) === null || _sortedResultQuestion11 === void 0 ? void 0 : _sortedResultQuestion11.questionText) || "";
-                            var resultQuestion3 = ((_sortedResultQuestion12 = sortedResultQuestions[2]) === null || _sortedResultQuestion12 === void 0 ? void 0 : _sortedResultQuestion12.questionText) || "";
-                            var resultQuestion4 = ((_sortedResultQuestion13 = sortedResultQuestions[3]) === null || _sortedResultQuestion13 === void 0 ? void 0 : _sortedResultQuestion13.questionText) || "";
-                            var resultQuestion5 = ((_sortedResultQuestion14 = sortedResultQuestions[4]) === null || _sortedResultQuestion14 === void 0 ? void 0 : _sortedResultQuestion14.questionText) || "";
-                            var resultQuestion6 = ((_sortedResultQuestion15 = sortedResultQuestions[5]) === null || _sortedResultQuestion15 === void 0 ? void 0 : _sortedResultQuestion15.questionText) || "";
+                            var resultQuestion1 = ((_sortedResultQuestion4 = sortedResultQuestions[0]) === null || _sortedResultQuestion4 === void 0 ? void 0 : _sortedResultQuestion4.questionText) || "";
+                            var resultQuestion2 = ((_sortedResultQuestion5 = sortedResultQuestions[1]) === null || _sortedResultQuestion5 === void 0 ? void 0 : _sortedResultQuestion5.questionText) || "";
+                            var resultQuestion3 = ((_sortedResultQuestion6 = sortedResultQuestions[2]) === null || _sortedResultQuestion6 === void 0 ? void 0 : _sortedResultQuestion6.questionText) || "";
+                            var resultQuestion4 = ((_sortedResultQuestion7 = sortedResultQuestions[3]) === null || _sortedResultQuestion7 === void 0 ? void 0 : _sortedResultQuestion7.questionText) || "";
+                            var resultQuestion5 = ((_sortedResultQuestion8 = sortedResultQuestions[4]) === null || _sortedResultQuestion8 === void 0 ? void 0 : _sortedResultQuestion8.questionText) || "";
+                            var resultQuestion6 = ((_sortedResultQuestion9 = sortedResultQuestions[5]) === null || _sortedResultQuestion9 === void 0 ? void 0 : _sortedResultQuestion9.questionText) || "";
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(chartConference.overviewQuestionChoice[i].month, left, line + 20);
 
                             if (resultQuestion1 != "") {
-                              var _sortedResultQuestion16;
+                              var _sortedResultQuestion10;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion1, left + 10, line + 30);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion16 = sortedResultQuestions[0]) === null || _sortedResultQuestion16 === void 0 ? void 0 : _sortedResultQuestion16.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 17, line + 30);
+                              doc.text(((_sortedResultQuestion10 = sortedResultQuestions[0]) === null || _sortedResultQuestion10 === void 0 ? void 0 : _sortedResultQuestion10.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 17, line + 30);
                               doc.setDrawColor(0);
                               doc.setFillColor(64, 210, 204);
                               doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion2 != "") {
-                              var _sortedResultQuestion17;
+                              var _sortedResultQuestion11;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion2, left + 10, line + 40);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion17 = sortedResultQuestions[1]) === null || _sortedResultQuestion17 === void 0 ? void 0 : _sortedResultQuestion17.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 17, line + 40);
+                              doc.text(((_sortedResultQuestion11 = sortedResultQuestions[1]) === null || _sortedResultQuestion11 === void 0 ? void 0 : _sortedResultQuestion11.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 17, line + 40);
                               doc.setDrawColor(0);
                               doc.setFillColor(120, 182, 226);
                               doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion3 != "") {
-                              var _sortedResultQuestion18;
+                              var _sortedResultQuestion12;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion3, left + 10, line + 50);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion18 = sortedResultQuestions[2]) === null || _sortedResultQuestion18 === void 0 ? void 0 : _sortedResultQuestion18.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 17, line + 50);
+                              doc.text(((_sortedResultQuestion12 = sortedResultQuestions[2]) === null || _sortedResultQuestion12 === void 0 ? void 0 : _sortedResultQuestion12.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 17, line + 50);
                               doc.setDrawColor(0);
                               doc.setFillColor(255, 176, 79);
                               doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion4 != "") {
-                              var _sortedResultQuestion19;
+                              var _sortedResultQuestion13;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion4, left + 10, line + 60);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion19 = sortedResultQuestions[2]) === null || _sortedResultQuestion19 === void 0 ? void 0 : _sortedResultQuestion19.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 17, line + 60);
+                              doc.text(((_sortedResultQuestion13 = sortedResultQuestions[2]) === null || _sortedResultQuestion13 === void 0 ? void 0 : _sortedResultQuestion13.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 17, line + 60);
                               doc.setDrawColor(0);
                               doc.setFillColor(206, 74, 73);
                               doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion5 != "") {
-                              var _sortedResultQuestion20;
+                              var _sortedResultQuestion14;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion5, left + 10, line + 70);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion20 = sortedResultQuestions[2]) === null || _sortedResultQuestion20 === void 0 ? void 0 : _sortedResultQuestion20.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 17, line + 70);
+                              doc.text(((_sortedResultQuestion14 = sortedResultQuestions[2]) === null || _sortedResultQuestion14 === void 0 ? void 0 : _sortedResultQuestion14.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 17, line + 70);
                               doc.setDrawColor(0);
                               doc.setFillColor(27, 183, 177);
                               doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion6 != "") {
-                              var _sortedResultQuestion21;
+                              var _sortedResultQuestion15;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion6, left + 10, line + 80);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion21 = sortedResultQuestions[2]) === null || _sortedResultQuestion21 === void 0 ? void 0 : _sortedResultQuestion21.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 3 + 17, line + 80);
+                              doc.text(((_sortedResultQuestion15 = sortedResultQuestions[2]) === null || _sortedResultQuestion15 === void 0 ? void 0 : _sortedResultQuestion15.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 3 + 17, line + 80);
                               doc.setDrawColor(0);
                               doc.setFillColor(75, 146, 206);
                               doc.roundedRect(left, line + 75, 5, 5, 1, 1, "F");
@@ -28599,14 +29341,60 @@ var DashboardToPDF = function DashboardToPDF(props) {
                               left = left + 100;
                             }
 
-                            if (left + 80 > WIDTH_PAPER) {
+                            if (left + (chartConference === null || chartConference === void 0 ? void 0 : (_chartConference$over2 = chartConference.overviewQuestionChoice[i + 1]) === null || _chartConference$over2 === void 0 ? void 0 : _chartConference$over2.month.length) * 20 > WIDTH_PAPER) {
                               left = 20;
-                              line += 90;
+                              line += 80;
                             }
                           }
                         }
 
-                        doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                        doc.setFont("Helvetica", "normal", "normal");
+                        left = 20;
+
+                        for (var i = 0; i < dataConvertedConference.length; i++) {
+                          if (activeColumnConference[i]) {
+                            doc.setDrawColor(0);
+                            doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                            doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                            doc.setTextColor("#252733");
+                            doc.text(dataConvertedConference[i], left + 7, line + 100);
+                          } else {
+                            doc.setDrawColor(0);
+                            doc.setFillColor("#CCCCCC");
+                            doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                            doc.setTextColor("#CCCCCC");
+                            doc.text(dataConvertedConference[i], left + 7, line + 100);
+                          }
+
+                          left = left + dataConvertedConference[i].length * 3 + 15;
+                        }
+
+                        left = 20;
+                        doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 105, 420, 140);
+
+                        for (var i = 0; i < dataConvertedConference.length; i++) {
+                          if (activeColumnConference[i]) {
+                            doc.setDrawColor(0);
+                            doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                            doc.roundedRect(left, line + 250, 5, 5, 1, 1, "F");
+                            doc.setTextColor("#252733");
+                            doc.setFont("Helvetica", "normal", "normal");
+                            doc.text(dataConvertedConference[i], left + 7, line + 255);
+                            doc.setFont("Helvetica", "normal", "bold");
+                            doc.text(avgConference[i] + "%", left, line + 262);
+                          } else {
+                            doc.setDrawColor(0);
+                            doc.setFillColor("#CCCCCC");
+                            doc.roundedRect(left, line + 250, 5, 5, 1, 1, "F");
+                            doc.setTextColor("#CCCCCC");
+                            doc.setFont("Helvetica", "normal", "normal");
+                            doc.text(dataConvertedConference[i], left + 7, line + 255);
+                            doc.setFont("Helvetica", "normal", "bold");
+                            doc.text("0.00%", left, line + 262);
+                          }
+
+                          left = left + dataConvertedConference[i].length * 3 + 15;
+                        }
                       });
                     });
                   }
@@ -28619,7 +29407,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                 if (!!chartClassReflectionPDF) {
                   var _selectedToPDF5;
 
-                  var line = 80;
+                  var line = 70;
                   var left = 20;
                   if (selectedToPDF.indexOf(chartClassReflectionPDF) != 0 && ((_selectedToPDF5 = selectedToPDF[selectedToPDF.indexOf(chartClassReflectionPDF) - 1]) === null || _selectedToPDF5 === void 0 ? void 0 : _selectedToPDF5.id) != null) doc.addPage();
                   return Promise.resolve(createImageHeader()).then(function () {
@@ -28634,74 +29422,74 @@ var DashboardToPDF = function DashboardToPDF(props) {
                         var _chartClassReflection;
 
                         if (chartClassReflection.overviewQuestionChoice[i].resultQuestion[0].questionId != 0) {
-                          var _sortedResultQuestion22, _sortedResultQuestion23, _sortedResultQuestion24, _sortedResultQuestion25, _sortedResultQuestion26, _sortedResultQuestion27, _sortedResultQuestion28, _sortedResultQuestion29, _sortedResultQuestion30, _sortedResultQuestion31;
+                          var _sortedResultQuestion16, _sortedResultQuestion17, _sortedResultQuestion18, _sortedResultQuestion19, _sortedResultQuestion20, _sortedResultQuestion21, _sortedResultQuestion22, _sortedResultQuestion23, _sortedResultQuestion24, _sortedResultQuestion25, _chartClassReflection2;
 
                           var sortedResultQuestions = chartClassReflection.overviewQuestionChoice[i].resultQuestion.sort(function (a, b) {
                             return a.avgOfStudentChoice < b.avgOfStudentChoice ? 1 : -1;
                           });
-                          var resultQuestion1 = ((_sortedResultQuestion22 = sortedResultQuestions[0]) === null || _sortedResultQuestion22 === void 0 ? void 0 : _sortedResultQuestion22.questionText.slice(3, (_sortedResultQuestion23 = sortedResultQuestions[0]) === null || _sortedResultQuestion23 === void 0 ? void 0 : _sortedResultQuestion23.questionText.indexOf("</p>"))) || "";
-                          var resultQuestion2 = ((_sortedResultQuestion24 = sortedResultQuestions[1]) === null || _sortedResultQuestion24 === void 0 ? void 0 : _sortedResultQuestion24.questionText.slice(3, (_sortedResultQuestion25 = sortedResultQuestions[1]) === null || _sortedResultQuestion25 === void 0 ? void 0 : _sortedResultQuestion25.questionText.indexOf("</p>"))) || "";
-                          var resultQuestion3 = ((_sortedResultQuestion26 = sortedResultQuestions[2]) === null || _sortedResultQuestion26 === void 0 ? void 0 : _sortedResultQuestion26.questionText.slice(3, (_sortedResultQuestion27 = sortedResultQuestions[2]) === null || _sortedResultQuestion27 === void 0 ? void 0 : _sortedResultQuestion27.questionText.indexOf("</p>"))) || "";
-                          var resultQuestion4 = ((_sortedResultQuestion28 = sortedResultQuestions[3]) === null || _sortedResultQuestion28 === void 0 ? void 0 : _sortedResultQuestion28.questionText.slice(3, (_sortedResultQuestion29 = sortedResultQuestions[3]) === null || _sortedResultQuestion29 === void 0 ? void 0 : _sortedResultQuestion29.questionText.indexOf("</p>"))) || "";
-                          var resultQuestion5 = ((_sortedResultQuestion30 = sortedResultQuestions[4]) === null || _sortedResultQuestion30 === void 0 ? void 0 : _sortedResultQuestion30.questionText.slice(3, (_sortedResultQuestion31 = sortedResultQuestions[4]) === null || _sortedResultQuestion31 === void 0 ? void 0 : _sortedResultQuestion31.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion1 = ((_sortedResultQuestion16 = sortedResultQuestions[0]) === null || _sortedResultQuestion16 === void 0 ? void 0 : _sortedResultQuestion16.questionText.slice(3, (_sortedResultQuestion17 = sortedResultQuestions[0]) === null || _sortedResultQuestion17 === void 0 ? void 0 : _sortedResultQuestion17.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion2 = ((_sortedResultQuestion18 = sortedResultQuestions[1]) === null || _sortedResultQuestion18 === void 0 ? void 0 : _sortedResultQuestion18.questionText.slice(3, (_sortedResultQuestion19 = sortedResultQuestions[1]) === null || _sortedResultQuestion19 === void 0 ? void 0 : _sortedResultQuestion19.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion3 = ((_sortedResultQuestion20 = sortedResultQuestions[2]) === null || _sortedResultQuestion20 === void 0 ? void 0 : _sortedResultQuestion20.questionText.slice(3, (_sortedResultQuestion21 = sortedResultQuestions[2]) === null || _sortedResultQuestion21 === void 0 ? void 0 : _sortedResultQuestion21.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion4 = ((_sortedResultQuestion22 = sortedResultQuestions[3]) === null || _sortedResultQuestion22 === void 0 ? void 0 : _sortedResultQuestion22.questionText.slice(3, (_sortedResultQuestion23 = sortedResultQuestions[3]) === null || _sortedResultQuestion23 === void 0 ? void 0 : _sortedResultQuestion23.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion5 = ((_sortedResultQuestion24 = sortedResultQuestions[4]) === null || _sortedResultQuestion24 === void 0 ? void 0 : _sortedResultQuestion24.questionText.slice(3, (_sortedResultQuestion25 = sortedResultQuestions[4]) === null || _sortedResultQuestion25 === void 0 ? void 0 : _sortedResultQuestion25.questionText.indexOf("</p>"))) || "";
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(chartClassReflection.overviewQuestionChoice[i].month, left, line + 20);
 
                           if (resultQuestion1 != "") {
-                            var _sortedResultQuestion32;
+                            var _sortedResultQuestion26;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion1, left + 10, line + 30);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion32 = sortedResultQuestions[0]) === null || _sortedResultQuestion32 === void 0 ? void 0 : _sortedResultQuestion32.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 15, line + 30);
+                            doc.text(((_sortedResultQuestion26 = sortedResultQuestions[0]) === null || _sortedResultQuestion26 === void 0 ? void 0 : _sortedResultQuestion26.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 15, line + 30);
                             doc.setDrawColor(0);
                             doc.setFillColor(64, 210, 204);
                             doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
                           }
 
                           if (resultQuestion2 != "") {
-                            var _sortedResultQuestion33;
+                            var _sortedResultQuestion27;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion2, left + 10, line + 40);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion33 = sortedResultQuestions[1]) === null || _sortedResultQuestion33 === void 0 ? void 0 : _sortedResultQuestion33.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 15, line + 40);
+                            doc.text(((_sortedResultQuestion27 = sortedResultQuestions[1]) === null || _sortedResultQuestion27 === void 0 ? void 0 : _sortedResultQuestion27.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 15, line + 40);
                             doc.setDrawColor(0);
                             doc.setFillColor(120, 182, 226);
                             doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
                           }
 
                           if (resultQuestion3 != "") {
-                            var _sortedResultQuestion34;
+                            var _sortedResultQuestion28;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion3, left + 10, line + 50);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion34 = sortedResultQuestions[2]) === null || _sortedResultQuestion34 === void 0 ? void 0 : _sortedResultQuestion34.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 15, line + 50);
+                            doc.text(((_sortedResultQuestion28 = sortedResultQuestions[2]) === null || _sortedResultQuestion28 === void 0 ? void 0 : _sortedResultQuestion28.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 15, line + 50);
                             doc.setDrawColor(0);
                             doc.setFillColor(255, 176, 79);
                             doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
                           }
 
                           if (resultQuestion4 != "") {
-                            var _sortedResultQuestion35;
+                            var _sortedResultQuestion29;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion4, left + 10, line + 60);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion35 = sortedResultQuestions[3]) === null || _sortedResultQuestion35 === void 0 ? void 0 : _sortedResultQuestion35.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 15, line + 60);
+                            doc.text(((_sortedResultQuestion29 = sortedResultQuestions[3]) === null || _sortedResultQuestion29 === void 0 ? void 0 : _sortedResultQuestion29.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 15, line + 60);
                             doc.setDrawColor(0);
                             doc.setFillColor(206, 74, 73);
                             doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
                           }
 
                           if (resultQuestion5 != "") {
-                            var _sortedResultQuestion36;
+                            var _sortedResultQuestion30;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion5, left + 10, line + 70);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion36 = sortedResultQuestions[4]) === null || _sortedResultQuestion36 === void 0 ? void 0 : _sortedResultQuestion36.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 15, line + 70);
+                            doc.text(((_sortedResultQuestion30 = sortedResultQuestions[4]) === null || _sortedResultQuestion30 === void 0 ? void 0 : _sortedResultQuestion30.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 15, line + 70);
                             doc.setDrawColor(0);
                             doc.setFillColor(27, 183, 177);
                             doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
@@ -28721,14 +29509,64 @@ var DashboardToPDF = function DashboardToPDF(props) {
                             left = left + 80;
                           }
 
-                          if (left + 80 > WIDTH_PAPER) {
+                          console.log({
+                            left: left
+                          });
+
+                          if (left + (chartClassReflection === null || chartClassReflection === void 0 ? void 0 : (_chartClassReflection2 = chartClassReflection.overviewQuestionChoice[i + 1]) === null || _chartClassReflection2 === void 0 ? void 0 : _chartClassReflection2.month.length) * 20 > WIDTH_PAPER) {
                             left = 20;
-                            line += 75;
+                            line += 55;
                           }
                         }
                       }
 
-                      doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                      doc.setFont("Helvetica", "normal", "normal");
+                      left = 20;
+
+                      for (var i = 0; i < dataConvertedClassReflection.length; i++) {
+                        if (activeColumnClassReflection[i]) {
+                          doc.setDrawColor(0);
+                          doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                          doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                          doc.setTextColor("#252733");
+                          doc.text(dataConvertedClassReflection[i], left + 7, line + 100);
+                        } else {
+                          doc.setDrawColor(0);
+                          doc.setFillColor("#CCCCCC");
+                          doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                          doc.setTextColor("#CCCCCC");
+                          doc.text(dataConvertedClassReflection[i], left + 7, line + 100);
+                        }
+
+                        left = left + dataConvertedClassReflection[i].length * 3 + 15;
+                      }
+
+                      left = 20;
+                      doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 105, 420, 140);
+
+                      for (var i = 0; i < dataConvertedClassReflection.length; i++) {
+                        if (activeColumnClassReflection[i]) {
+                          doc.setDrawColor(0);
+                          doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                          doc.roundedRect(left, line + 250, 5, 5, 1, 1, "F");
+                          doc.setTextColor("#252733");
+                          doc.setFont("Helvetica", "normal", "normal");
+                          doc.text(dataConvertedClassReflection[i], left + 7, line + 255);
+                          doc.setFont("Helvetica", "normal", "bold");
+                          doc.text(avgClassReflection[i] + "%", left, line + 262);
+                        } else {
+                          doc.setDrawColor(0);
+                          doc.setFillColor("#CCCCCC");
+                          doc.roundedRect(left, line + 250, 5, 5, 1, 1, "F");
+                          doc.setTextColor("#CCCCCC");
+                          doc.setFont("Helvetica", "normal", "normal");
+                          doc.text(dataConvertedClassReflection[i], left + 7, line + 255);
+                          doc.setFont("Helvetica", "normal", "bold");
+                          doc.text("0.00%", left, line + 262);
+                        }
+
+                        left = left + dataConvertedClassReflection[i].length * 3 + 15;
+                      }
                     });
                   });
                 }
@@ -28741,7 +29579,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
               if (!!chartOneToOne) {
                 var _selectedToPDF6;
 
-                var line = 80;
+                var line = 70;
                 var left = 20;
                 if (selectedToPDF.indexOf(chartOneToOne) != 0 && ((_selectedToPDF6 = selectedToPDF[selectedToPDF.indexOf(chartOneToOne) - 1]) === null || _selectedToPDF6 === void 0 ? void 0 : _selectedToPDF6.id) != null) doc.addPage();
                 return Promise.resolve(createImageHeader()).then(function () {
@@ -28756,126 +29594,126 @@ var DashboardToPDF = function DashboardToPDF(props) {
                       var _chartOneToOneData$ov;
 
                       if (chartOneToOneData.overviewQuestionChoice[i].resultQuestion[0].questionId != 0) {
-                        var _sortedResultQuestion37, _sortedResultQuestion38, _sortedResultQuestion39, _sortedResultQuestion40, _sortedResultQuestion41, _sortedResultQuestion42, _sortedResultQuestion43, _sortedResultQuestion44, _sortedResultQuestion45, _sortedResultQuestion46, _sortedResultQuestion47, _sortedResultQuestion48, _sortedResultQuestion49, _sortedResultQuestion50, _sortedResultQuestion51, _sortedResultQuestion52, _sortedResultQuestion53, _sortedResultQuestion54;
+                        var _sortedResultQuestion31, _sortedResultQuestion32, _sortedResultQuestion33, _sortedResultQuestion34, _sortedResultQuestion35, _sortedResultQuestion36, _sortedResultQuestion37, _sortedResultQuestion38, _sortedResultQuestion39, _sortedResultQuestion40, _sortedResultQuestion41, _sortedResultQuestion42, _sortedResultQuestion43, _sortedResultQuestion44, _sortedResultQuestion45, _sortedResultQuestion46, _sortedResultQuestion47, _sortedResultQuestion48, _chartOneToOneData$ov2;
 
                         var sortedResultQuestions = chartOneToOneData.overviewQuestionChoice[i].resultQuestion.sort(function (a, b) {
                           return a.avgOfStudentChoice < b.avgOfStudentChoice ? 1 : -1;
                         });
-                        var resultQuestion1 = ((_sortedResultQuestion37 = sortedResultQuestions[0]) === null || _sortedResultQuestion37 === void 0 ? void 0 : _sortedResultQuestion37.questionText.slice(3, (_sortedResultQuestion38 = sortedResultQuestions[0]) === null || _sortedResultQuestion38 === void 0 ? void 0 : _sortedResultQuestion38.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion2 = ((_sortedResultQuestion39 = sortedResultQuestions[1]) === null || _sortedResultQuestion39 === void 0 ? void 0 : _sortedResultQuestion39.questionText.slice(3, (_sortedResultQuestion40 = sortedResultQuestions[1]) === null || _sortedResultQuestion40 === void 0 ? void 0 : _sortedResultQuestion40.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion3 = ((_sortedResultQuestion41 = sortedResultQuestions[2]) === null || _sortedResultQuestion41 === void 0 ? void 0 : _sortedResultQuestion41.questionText.slice(3, (_sortedResultQuestion42 = sortedResultQuestions[2]) === null || _sortedResultQuestion42 === void 0 ? void 0 : _sortedResultQuestion42.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion4 = ((_sortedResultQuestion43 = sortedResultQuestions[3]) === null || _sortedResultQuestion43 === void 0 ? void 0 : _sortedResultQuestion43.questionText.slice(3, (_sortedResultQuestion44 = sortedResultQuestions[3]) === null || _sortedResultQuestion44 === void 0 ? void 0 : _sortedResultQuestion44.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion5 = ((_sortedResultQuestion45 = sortedResultQuestions[4]) === null || _sortedResultQuestion45 === void 0 ? void 0 : _sortedResultQuestion45.questionText.slice(3, (_sortedResultQuestion46 = sortedResultQuestions[4]) === null || _sortedResultQuestion46 === void 0 ? void 0 : _sortedResultQuestion46.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion6 = ((_sortedResultQuestion47 = sortedResultQuestions[5]) === null || _sortedResultQuestion47 === void 0 ? void 0 : _sortedResultQuestion47.questionText.slice(3, (_sortedResultQuestion48 = sortedResultQuestions[5]) === null || _sortedResultQuestion48 === void 0 ? void 0 : _sortedResultQuestion48.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion7 = ((_sortedResultQuestion49 = sortedResultQuestions[6]) === null || _sortedResultQuestion49 === void 0 ? void 0 : _sortedResultQuestion49.questionText.slice(3, (_sortedResultQuestion50 = sortedResultQuestions[6]) === null || _sortedResultQuestion50 === void 0 ? void 0 : _sortedResultQuestion50.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion8 = ((_sortedResultQuestion51 = sortedResultQuestions[7]) === null || _sortedResultQuestion51 === void 0 ? void 0 : _sortedResultQuestion51.questionText.slice(3, (_sortedResultQuestion52 = sortedResultQuestions[7]) === null || _sortedResultQuestion52 === void 0 ? void 0 : _sortedResultQuestion52.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion9 = ((_sortedResultQuestion53 = sortedResultQuestions[8]) === null || _sortedResultQuestion53 === void 0 ? void 0 : _sortedResultQuestion53.questionText.slice(3, (_sortedResultQuestion54 = sortedResultQuestions[8]) === null || _sortedResultQuestion54 === void 0 ? void 0 : _sortedResultQuestion54.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion1 = ((_sortedResultQuestion31 = sortedResultQuestions[0]) === null || _sortedResultQuestion31 === void 0 ? void 0 : _sortedResultQuestion31.questionText.slice(3, (_sortedResultQuestion32 = sortedResultQuestions[0]) === null || _sortedResultQuestion32 === void 0 ? void 0 : _sortedResultQuestion32.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion2 = ((_sortedResultQuestion33 = sortedResultQuestions[1]) === null || _sortedResultQuestion33 === void 0 ? void 0 : _sortedResultQuestion33.questionText.slice(3, (_sortedResultQuestion34 = sortedResultQuestions[1]) === null || _sortedResultQuestion34 === void 0 ? void 0 : _sortedResultQuestion34.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion3 = ((_sortedResultQuestion35 = sortedResultQuestions[2]) === null || _sortedResultQuestion35 === void 0 ? void 0 : _sortedResultQuestion35.questionText.slice(3, (_sortedResultQuestion36 = sortedResultQuestions[2]) === null || _sortedResultQuestion36 === void 0 ? void 0 : _sortedResultQuestion36.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion4 = ((_sortedResultQuestion37 = sortedResultQuestions[3]) === null || _sortedResultQuestion37 === void 0 ? void 0 : _sortedResultQuestion37.questionText.slice(3, (_sortedResultQuestion38 = sortedResultQuestions[3]) === null || _sortedResultQuestion38 === void 0 ? void 0 : _sortedResultQuestion38.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion5 = ((_sortedResultQuestion39 = sortedResultQuestions[4]) === null || _sortedResultQuestion39 === void 0 ? void 0 : _sortedResultQuestion39.questionText.slice(3, (_sortedResultQuestion40 = sortedResultQuestions[4]) === null || _sortedResultQuestion40 === void 0 ? void 0 : _sortedResultQuestion40.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion6 = ((_sortedResultQuestion41 = sortedResultQuestions[5]) === null || _sortedResultQuestion41 === void 0 ? void 0 : _sortedResultQuestion41.questionText.slice(3, (_sortedResultQuestion42 = sortedResultQuestions[5]) === null || _sortedResultQuestion42 === void 0 ? void 0 : _sortedResultQuestion42.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion7 = ((_sortedResultQuestion43 = sortedResultQuestions[6]) === null || _sortedResultQuestion43 === void 0 ? void 0 : _sortedResultQuestion43.questionText.slice(3, (_sortedResultQuestion44 = sortedResultQuestions[6]) === null || _sortedResultQuestion44 === void 0 ? void 0 : _sortedResultQuestion44.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion8 = ((_sortedResultQuestion45 = sortedResultQuestions[7]) === null || _sortedResultQuestion45 === void 0 ? void 0 : _sortedResultQuestion45.questionText.slice(3, (_sortedResultQuestion46 = sortedResultQuestions[7]) === null || _sortedResultQuestion46 === void 0 ? void 0 : _sortedResultQuestion46.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion9 = ((_sortedResultQuestion47 = sortedResultQuestions[8]) === null || _sortedResultQuestion47 === void 0 ? void 0 : _sortedResultQuestion47.questionText.slice(3, (_sortedResultQuestion48 = sortedResultQuestions[8]) === null || _sortedResultQuestion48 === void 0 ? void 0 : _sortedResultQuestion48.questionText.indexOf("</p>"))) || "";
                         doc.setFont("Helvetica", "normal", "bold");
                         doc.text(chartOneToOneData.overviewQuestionChoice[i].month, left, line + 20);
 
                         if (resultQuestion1 != "") {
-                          var _sortedResultQuestion55;
+                          var _sortedResultQuestion49;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion1, left + 10, line + 30);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion55 = sortedResultQuestions[0]) === null || _sortedResultQuestion55 === void 0 ? void 0 : _sortedResultQuestion55.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 17, line + 30);
+                          doc.text(((_sortedResultQuestion49 = sortedResultQuestions[0]) === null || _sortedResultQuestion49 === void 0 ? void 0 : _sortedResultQuestion49.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 17, line + 30);
                           doc.setDrawColor(0);
                           doc.setFillColor(64, 210, 204);
                           doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion2 != "") {
-                          var _sortedResultQuestion56;
+                          var _sortedResultQuestion50;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion2, left + 10, line + 40);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion56 = sortedResultQuestions[1]) === null || _sortedResultQuestion56 === void 0 ? void 0 : _sortedResultQuestion56.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 17, line + 40);
+                          doc.text(((_sortedResultQuestion50 = sortedResultQuestions[1]) === null || _sortedResultQuestion50 === void 0 ? void 0 : _sortedResultQuestion50.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 17, line + 40);
                           doc.setDrawColor(0);
                           doc.setFillColor(120, 182, 226);
                           doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion3 != "") {
-                          var _sortedResultQuestion57;
+                          var _sortedResultQuestion51;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion3, left + 10, line + 50);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion57 = sortedResultQuestions[2]) === null || _sortedResultQuestion57 === void 0 ? void 0 : _sortedResultQuestion57.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 17, line + 50);
+                          doc.text(((_sortedResultQuestion51 = sortedResultQuestions[2]) === null || _sortedResultQuestion51 === void 0 ? void 0 : _sortedResultQuestion51.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 17, line + 50);
                           doc.setDrawColor(0);
                           doc.setFillColor(255, 176, 79);
                           doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion4 != "") {
-                          var _sortedResultQuestion58;
+                          var _sortedResultQuestion52;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion4, left + 10, line + 60);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion58 = sortedResultQuestions[3]) === null || _sortedResultQuestion58 === void 0 ? void 0 : _sortedResultQuestion58.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 17, line + 60);
+                          doc.text(((_sortedResultQuestion52 = sortedResultQuestions[3]) === null || _sortedResultQuestion52 === void 0 ? void 0 : _sortedResultQuestion52.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 17, line + 60);
                           doc.setDrawColor(0);
                           doc.setFillColor(206, 74, 73);
                           doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion5 != "") {
-                          var _sortedResultQuestion59;
+                          var _sortedResultQuestion53;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion5, left + 10, line + 70);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion59 = sortedResultQuestions[4]) === null || _sortedResultQuestion59 === void 0 ? void 0 : _sortedResultQuestion59.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 17, line + 70);
+                          doc.text(((_sortedResultQuestion53 = sortedResultQuestions[4]) === null || _sortedResultQuestion53 === void 0 ? void 0 : _sortedResultQuestion53.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 17, line + 70);
                           doc.setDrawColor(0);
                           doc.setFillColor(27, 183, 177);
                           doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion6 != "") {
-                          var _sortedResultQuestion60;
+                          var _sortedResultQuestion54;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion6, left + 10, line + 80);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion60 = sortedResultQuestions[5]) === null || _sortedResultQuestion60 === void 0 ? void 0 : _sortedResultQuestion60.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 3 + 17, line + 80);
+                          doc.text(((_sortedResultQuestion54 = sortedResultQuestions[5]) === null || _sortedResultQuestion54 === void 0 ? void 0 : _sortedResultQuestion54.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 3 + 17, line + 80);
                           doc.setDrawColor(0);
                           doc.setFillColor(75, 146, 206);
                           doc.roundedRect(left, line + 75, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion7 != "") {
-                          var _sortedResultQuestion61;
+                          var _sortedResultQuestion55;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion7, left + 10, line + 90);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion61 = sortedResultQuestions[6]) === null || _sortedResultQuestion61 === void 0 ? void 0 : _sortedResultQuestion61.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion7 === null || resultQuestion7 === void 0 ? void 0 : resultQuestion7.length) * 3 + 17, line + 90);
+                          doc.text(((_sortedResultQuestion55 = sortedResultQuestions[6]) === null || _sortedResultQuestion55 === void 0 ? void 0 : _sortedResultQuestion55.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion7 === null || resultQuestion7 === void 0 ? void 0 : resultQuestion7.length) * 3 + 17, line + 90);
                           doc.setDrawColor(0);
                           doc.setFillColor(240, 148, 34);
                           doc.roundedRect(left, line + 85, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion8 != "") {
-                          var _sortedResultQuestion62;
+                          var _sortedResultQuestion56;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion8, left + 10, line + 100);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion62 = sortedResultQuestions[7]) === null || _sortedResultQuestion62 === void 0 ? void 0 : _sortedResultQuestion62.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion8 === null || resultQuestion8 === void 0 ? void 0 : resultQuestion8.length) * 3 + 17, line + 100);
+                          doc.text(((_sortedResultQuestion56 = sortedResultQuestions[7]) === null || _sortedResultQuestion56 === void 0 ? void 0 : _sortedResultQuestion56.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion8 === null || resultQuestion8 === void 0 ? void 0 : resultQuestion8.length) * 3 + 17, line + 100);
                           doc.setDrawColor(0);
                           doc.setFillColor(162, 51, 51);
                           doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion9 != "") {
-                          var _sortedResultQuestion63;
+                          var _sortedResultQuestion57;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion9, left + 10, line + 110);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion63 = sortedResultQuestions[8]) === null || _sortedResultQuestion63 === void 0 ? void 0 : _sortedResultQuestion63.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion9 === null || resultQuestion9 === void 0 ? void 0 : resultQuestion9.length) * 3 + 17, line + 110);
+                          doc.text(((_sortedResultQuestion57 = sortedResultQuestions[8]) === null || _sortedResultQuestion57 === void 0 ? void 0 : _sortedResultQuestion57.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion9 === null || resultQuestion9 === void 0 ? void 0 : resultQuestion9.length) * 3 + 17, line + 110);
                           doc.setDrawColor(0);
                           doc.setFillColor(11, 153, 148);
                           doc.roundedRect(left, line + 105, 5, 5, 1, 1, "F");
@@ -28883,14 +29721,60 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                         left = left + 100;
 
-                        if (left + 80 > WIDTH_PAPER) {
+                        if (left + (chartOneToOneData === null || chartOneToOneData === void 0 ? void 0 : (_chartOneToOneData$ov2 = chartOneToOneData.overviewQuestionChoice[i + 1]) === null || _chartOneToOneData$ov2 === void 0 ? void 0 : _chartOneToOneData$ov2.month.length) * 10 > WIDTH_PAPER) {
                           left = 20;
                           line += 110;
                         }
                       }
                     }
 
-                    doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 120, 420, 170);
+                    doc.setFont("Helvetica", "normal", "normal");
+                    left = 20;
+
+                    for (var i = 0; i < dataConvertedOneToOne.length; i++) {
+                      if (activeColumnOneToOne[i]) {
+                        doc.setDrawColor(0);
+                        doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                        doc.roundedRect(left, line + 130, 5, 5, 1, 1, "F");
+                        doc.setTextColor("#252733");
+                        doc.text(dataConvertedOneToOne[i], left + 7, line + 135);
+                      } else {
+                        doc.setDrawColor(0);
+                        doc.setFillColor("#CCCCCC");
+                        doc.roundedRect(left, line + 130, 5, 5, 1, 1, "F");
+                        doc.setTextColor("#CCCCCC");
+                        doc.text(dataConvertedOneToOne[i], left + 7, line + 135);
+                      }
+
+                      left = left + dataConvertedOneToOne[i].length * 3 + 15;
+                    }
+
+                    left = 20;
+                    doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 140, 420, 170);
+
+                    for (var i = 0; i < dataConvertedOneToOne.length; i++) {
+                      if (activeColumnOneToOne[i]) {
+                        doc.setDrawColor(0);
+                        doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                        doc.roundedRect(left, line + 315, 5, 5, 1, 1, "F");
+                        doc.setTextColor("#252733");
+                        doc.setFont("Helvetica", "normal", "normal");
+                        doc.text(dataConvertedOneToOne[i], left + 7, line + 320);
+                        doc.setFont("Helvetica", "normal", "bold");
+                        doc.text(avgOneToOne[i] + "%", left, line + 327);
+                      } else {
+                        doc.setDrawColor(0);
+                        doc.setFillColor("#CCCCCC");
+                        doc.roundedRect(left, line + 315, 5, 5, 1, 1, "F");
+                        doc.setTextColor("#CCCCCC");
+                        doc.setFont("Helvetica", "normal", "normal");
+                        doc.text(dataConvertedOneToOne[i], left + 7, line + 320);
+                        doc.setFont("Helvetica", "normal", "bold");
+                        doc.text("0.00%", left, line + 327);
+                      }
+
+                      left = left + dataConvertedOneToOne[i].length * 3 + 15;
+                    }
                   });
                 });
               }
@@ -28903,7 +29787,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
             if (!!chartReadinessToLearn) {
               var _selectedToPDF7;
 
-              var line = 80;
+              var line = 70;
               var left = 20;
               if (selectedToPDF.indexOf(chartReadinessToLearn) != 0 && ((_selectedToPDF7 = selectedToPDF[selectedToPDF.indexOf(chartReadinessToLearn) - 1]) === null || _selectedToPDF7 === void 0 ? void 0 : _selectedToPDF7.id) != null) doc.addPage();
               return Promise.resolve(createImageHeader()).then(function () {
@@ -28932,7 +29816,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
           try {
             var imageLogo = document.getElementById("header-logo");
             return Promise.resolve(html2canvas(imageLogo)).then(function (imageLogoCanvas) {
-              doc.addImage(imageLogoCanvas.toDataURL("image/png", 1.0), "png", 20, 20, 100, 30);
+              doc.addImage(imageLogoCanvas.toDataURL("image/png", 1.0), "png", 20, 20, 90, 25);
             });
           } catch (e) {
             return Promise.reject(e);
@@ -28944,7 +29828,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
         var _temp15 = function () {
           if (!!chartHightImpactLearningStrategie) {
-            var line = 80;
+            var line = 70;
             var left = 20;
             if (selectedToPDF.indexOf(chartHightImpactLearningStrategie) != 0 && selectedToPDF[selectedToPDF.indexOf(chartHightImpactLearningStrategie) - 1].id != null) doc.addPage();
             return Promise.resolve(createImageHeader()).then(function () {
@@ -28970,7 +29854,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                     doc.text(topLearningStrategies.learningStrategies[j].learningStrategyName, left, line + 20);
                     doc.setFont("Helvetica", "normal", "normal");
                     doc.text("Usage count: " + topLearningStrategies.learningStrategies[j].usageCount || "0", left, line + 30);
-                    doc.text("Usage point: " + avgSumUsagePoint, left, line + 40);
+                    doc.text("Usage point: " + avgSumUsagePoint.toFixed(2), left, line + 40);
                     left = left + (((_topLearningStrategie4 = topLearningStrategies.learningStrategies[j].learningStrategyName) === null || _topLearningStrategie4 === void 0 ? void 0 : _topLearningStrategie4.length) * 4 > 45 ? ((_topLearningStrategie5 = topLearningStrategies.learningStrategies[j].learningStrategyName) === null || _topLearningStrategie5 === void 0 ? void 0 : _topLearningStrategie5.length) * 4 : 60) + 15;
 
                     if (left + ((_topLearningStrategie6 = topLearningStrategies.learningStrategies[j + 1]) === null || _topLearningStrategie6 === void 0 ? void 0 : (_topLearningStrategie7 = _topLearningStrategie6.learningStrategyName) === null || _topLearningStrategie7 === void 0 ? void 0 : _topLearningStrategie7.length) * 5 + 15 > WIDTH_PAPER) {
@@ -29014,25 +29898,25 @@ var DashboardToPDF = function DashboardToPDF(props) {
     id: chartOneToOne.id
   }, chartOneToOne.children(typeChartList[initialData.map(function (i) {
     return i.id;
-  }).indexOf(chartOneToOne === null || chartOneToOne === void 0 ? void 0 : chartOneToOne.id)]))), !!chartClassReflectionPDF && React.createElement("div", {
+  }).indexOf(chartOneToOne === null || chartOneToOne === void 0 ? void 0 : chartOneToOne.id)], true))), !!chartClassReflectionPDF && React.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React.createElement("div", {
     id: chartClassReflectionPDF.id
   }, chartClassReflectionPDF.children(typeChartList[initialData.map(function (i) {
     return i.id;
-  }).indexOf(chartClassReflectionPDF === null || chartClassReflectionPDF === void 0 ? void 0 : chartClassReflectionPDF.id)]))), !!chartConferecePDF && React.createElement("div", {
+  }).indexOf(chartClassReflectionPDF === null || chartClassReflectionPDF === void 0 ? void 0 : chartClassReflectionPDF.id)], true))), !!chartConferecePDF && React.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React.createElement("div", {
     id: chartConferecePDF.id
   }, chartConferecePDF.children(typeChartList[initialData.map(function (i) {
     return i.id;
-  }).indexOf(chartConferecePDF === null || chartConferecePDF === void 0 ? void 0 : chartConferecePDF.id)]))), !!chartSafety && React.createElement("div", {
+  }).indexOf(chartConferecePDF === null || chartConferecePDF === void 0 ? void 0 : chartConferecePDF.id)], true))), !!chartSafety && React.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React.createElement("div", {
     id: chartSafety.id
   }, chartSafety.children(typeChartList[initialData.map(function (i) {
     return i.id;
-  }).indexOf(chartSafety === null || chartSafety === void 0 ? void 0 : chartSafety.id)]))), !!chartStudentByAge && React.createElement("div", {
+  }).indexOf(chartSafety === null || chartSafety === void 0 ? void 0 : chartSafety.id)], true))), !!chartStudentByAge && React.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React.createElement("div", {
     id: chartStudentByAge.id
@@ -29072,7 +29956,19 @@ var Dashboard = function Dashboard() {
       topLearningStrategies = _useChartDatas.topLearningStrategies,
       chartClassReflection = _useChartDatas.chartClassReflection,
       chartConference = _useChartDatas.chartConference,
-      safety = _useChartDatas.safety;
+      safety = _useChartDatas.safety,
+      dataConvertedOneToOne = _useChartDatas.dataConvertedOneToOne,
+      activeColumnOneToOne = _useChartDatas.activeColumnOneToOne,
+      avgOneToOne = _useChartDatas.avgOneToOne,
+      dataConvertedClassReflection = _useChartDatas.dataConvertedClassReflection,
+      activeColumnClassReflection = _useChartDatas.activeColumnClassReflection,
+      avgClassReflection = _useChartDatas.avgClassReflection,
+      dataConvertedConference = _useChartDatas.dataConvertedConference,
+      activeColumnConference = _useChartDatas.activeColumnConference,
+      avgConference = _useChartDatas.avgConference,
+      dataConvertedSafety = _useChartDatas.dataConvertedSafety,
+      activeColumnSafety = _useChartDatas.activeColumnSafety,
+      avgSafety = _useChartDatas.avgSafety;
 
   var _useBehavior = useBehavior(initialTypeChart),
       chartIsOpened = _useBehavior.chartIsOpened,
@@ -29131,7 +30027,19 @@ var Dashboard = function Dashboard() {
     topLearningStrategies: topLearningStrategies,
     chartClassReflection: chartClassReflection,
     chartConference: chartConference,
-    safety: safety
+    safety: safety,
+    dataConvertedOneToOne: dataConvertedOneToOne,
+    activeColumnOneToOne: activeColumnOneToOne,
+    avgOneToOne: avgOneToOne,
+    dataConvertedClassReflection: dataConvertedClassReflection,
+    activeColumnClassReflection: activeColumnClassReflection,
+    avgClassReflection: avgClassReflection,
+    dataConvertedConference: dataConvertedConference,
+    activeColumnConference: activeColumnConference,
+    avgConference: avgConference,
+    dataConvertedSafety: dataConvertedSafety,
+    activeColumnSafety: activeColumnSafety,
+    avgSafety: avgSafety
   }))), React.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
   }, React.createElement("div", {
@@ -29206,10 +30114,12 @@ var Dashboard = function Dashboard() {
       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: chartDashBoard === null || chartDashBoard === void 0 ? void 0 : chartDashBoard.contentTooltip,
+      index: index
     }), React.createElement(Collapse, {
       isOpen: chartIsOpened[index]
     }, chartDashBoard.children(typeChartList[index])));