mario-education 2.2.9 → 2.3.3

package/dist/index.modern.js

@@ -150,9 +150,6 @@ var StudentSelector = function StudentSelector(_ref) {
       id: student.id
     };
   });
-  console.log("teacher assignment");
-  console.log(options);
-  console.log(value);
   return React.createElement(CustomSelector, {
     options: options,
     inputValue: searchString,
@@ -5175,7 +5172,6 @@ var LearningSupportCategoryList = function LearningSupportCategoryList() {
 
 var style = {
   padding: "4px 8px",
-  marginRight: 16,
   marginBottom: 0,
   borderRadius: "2px",
   color: "#fff",
@@ -5189,12 +5185,13 @@ var UploadCSVButton = function UploadCSVButton(_ref) {
       isDisabled = _ref.isDisabled,
       text = _ref.text,
       backgroundColor = _ref.backgroundColor,
-      _onClick = _ref.onClick;
+      _onClick = _ref.onClick,
+      isClassReflection = _ref.isClassReflection;
   return React.createElement(Label, {
     htmlFor: htmlFor,
     role: "button",
     tabIndex: 0,
-    className: "d-flex align-items-center justfy-content-center " + (!isDisabled ? "cursor-pointer hover-opacity" : ""),
+    className: "d-flex align-items-center justfy-content-center \n            " + (isClassReflection ? "w-25" : "") + "\n            " + (!isDisabled ? "cursor-pointer hover-opacity" : ""),
     style: _extends({}, style, {
       backgroundColor: backgroundColor,
       opacity: !isDisabled ? 1 : 0.5
@@ -5209,8 +5206,12 @@ var UploadCSVButton = function UploadCSVButton(_ref) {
 };
 
 var CSV_FILE_URL = BASE_URL + "/api/ImportCsv/csv";
-var importCSV = function importCSV(formData, subFolder) {
-  return apiUpload.post(CSV_FILE_URL + "/" + subFolder, formData);
+var CSV_FILE_TEACHER = BASE_URL + "/api/Teacher";
+var importStudentCSV = function importStudentCSV(formData) {
+  return apiUpload.post(CSV_FILE_TEACHER + "/adminImportStudent", formData);
+};
+var importClassReflectionCSV = function importClassReflectionCSV(formData) {
+  return apiUpload.post(CSV_FILE_URL + "/importClassReflection", formData);
 };
 
 var CSVType;
@@ -5225,28 +5226,18 @@ var CSVType;
 })(CSVType || (CSVType = {}));
 
 var buttons = [{
-  text: "Import subjects",
-  backgroundColor: "#1dd1a1",
-  type: CSVType.Subjects
-}, {
-  text: "Import grades",
-  backgroundColor: "#54a0ff",
-  type: CSVType.Grades
-}, {
-  text: "Import attendances",
-  backgroundColor: "#feca57",
-  type: CSVType.Attendances
-}, {
-  text: "Import class reflections",
-  backgroundColor: "#e74c3c",
-  type: CSVType.ClassReflection
-}, {
-  text: "Import others",
-  backgroundColor: "#8395a7",
-  type: CSVType.Others
+  text: "Import students",
+  backgroundColor: "#0abde3",
+  type: CSVType.Students
 }];
 var title = "CSV Import";
 var id = "csvupload";
+var initClassReflect = {
+  teacherName: '',
+  teacherEmail: '',
+  studentIds: [],
+  file: ''
+};
 
 var useCSVImport = function useCSVImport() {
   var dispatch = useDispatch();
@@ -5258,6 +5249,18 @@ var useCSVImport = function useCSVImport() {
       type = _useState[0],
       setType = _useState[1];
 
+  var _useState2 = useState(),
+      dataFile = _useState2[0],
+      setDataFile = _useState2[1];
+
+  var _useState3 = useState([]),
+      arrStudent = _useState3[0],
+      setArrStudent = _useState3[1];
+
+  var _useState4 = useState(initClassReflect),
+      initImportReflection = _useState4[0],
+      setInitImportReflection = _useState4[1];
+
   useEffect(function () {
     document.title = title;
   }, []);
@@ -5265,7 +5268,7 @@ var useCSVImport = function useCSVImport() {
     try {
       var _temp3 = function _temp3() {
         dispatch(setLoading(false));
-        var input = document.getElementById(id);
+        var input = document.getElementById('import-student');
         input && (input.value = "");
       };
 
@@ -5275,7 +5278,7 @@ var useCSVImport = function useCSVImport() {
       var _temp4 = _catch(function () {
         var formData = new FormData();
         formData.append("file", file, file.name);
-        return Promise.resolve(importCSV(formData, type.toString())).then(function () {
+        return Promise.resolve(importStudentCSV(formData)).then(function () {
           dispatch(setAlert({
             type: "success",
             message: "Import CSV successfully"
@@ -5295,21 +5298,87 @@ var useCSVImport = function useCSVImport() {
       return Promise.reject(e);
     }
   }, [type]);
+
+  var onConfirm = function onConfirm(values) {
+    try {
+      var _temp7 = function _temp7() {
+        dispatch(setLoading(false));
+        var input = document.getElementById(id);
+        input && (input.value = "");
+      };
+
+      if (!dataFile || !dataFile) return Promise.resolve();
+      dispatch(setLoading(true));
+
+      var _temp8 = _catch(function () {
+        var formData = new FormData();
+        formData.append("file", dataFile, dataFile.name);
+        formData.append("teacherName", values.teacherName);
+        formData.append("teacherEmail", values.teacherEmail);
+        values.studentIds.forEach(function (item) {
+          formData.append("studentIds", item);
+        });
+        return Promise.resolve(importClassReflectionCSV(formData)).then(function () {
+          dispatch(setAlert({
+            type: "success",
+            message: "Import CSV successfully"
+          }));
+          setInitImportReflection(initClassReflect);
+        });
+      }, 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);
+    }
+  };
+
   return {
     isLoading: isLoading,
     buttons: buttons,
     id: id,
     setType: setType,
-    upload: upload
+    upload: upload,
+    initImportReflection: initImportReflection,
+    setInitImportReflection: setInitImportReflection,
+    onConfirm: onConfirm,
+    CSVType: CSVType,
+    dataFile: dataFile,
+    setDataFile: setDataFile,
+    setArrStudent: setArrStudent,
+    arrStudent: arrStudent
   };
 };
 
+var schema$4 = object({
+  teacherName: string().required(),
+  teacherEmail: string().email('Invalid email').required(),
+  studentIds: array().required().test("test students", "Please choose student", function () {
+    return !!this.parent.studentIds && !!this.parent.studentIds.length;
+  }),
+  file: string().required()
+});
+
 var CSVImport = function CSVImport() {
   var _useCSVImport = useCSVImport(),
+      initImportReflection = _useCSVImport.initImportReflection,
+      onConfirm = _useCSVImport.onConfirm,
       isLoading = _useCSVImport.isLoading,
-      buttons = _useCSVImport.buttons,
-      id = _useCSVImport.id,
       setType = _useCSVImport.setType,
+      id = _useCSVImport.id,
+      CSVType = _useCSVImport.CSVType,
+      dataFile = _useCSVImport.dataFile,
+      setDataFile = _useCSVImport.setDataFile,
+      setArrStudent = _useCSVImport.setArrStudent,
+      arrStudent = _useCSVImport.arrStudent,
+      buttons = _useCSVImport.buttons,
       upload = _useCSVImport.upload;
 
   return React.createElement("div", {
@@ -5317,28 +5386,147 @@ var CSVImport = function CSVImport() {
   }, React.createElement(Input, {
     className: "d-none",
     type: "file",
-    id: id,
+    id: "import-student",
     onChange: function onChange(e) {
       return upload(e.target.files[0]);
     },
     accept: "text/csv"
   }), React.createElement("div", {
-    className: "d-flex align-items-center"
-  }, buttons.map(function (button) {
-    return React.createElement(UploadCSVButton, {
-      key: button.text,
+    className: "class-reflection"
+  }, React.createElement(Formik, {
+    initialValues: initImportReflection,
+    enableReinitialize: true,
+    validationSchema: schema$4,
+    onSubmit: function onSubmit(values, actions) {
+      onConfirm(values);
+      setDataFile('');
+      setArrStudent([]);
+      actions.resetForm();
+    }
+  }, function (formProps) {
+    var values = formProps.values,
+        touched = formProps.touched,
+        errors = formProps.errors,
+        handleSubmit = formProps.handleSubmit,
+        handleChange = formProps.handleChange;
+    return React.createElement(Row, {
+      className: "mb-2"
+    }, React.createElement(Input, {
+      className: "d-none",
+      type: "file",
+      id: id,
+      onChange: function onChange(e) {
+        setDataFile(e.target.files[0]);
+        formProps.setFieldValue('file', 'imported');
+        var input = document.getElementById(id);
+        input && (input.value = "");
+      },
+      accept: "text/csv"
+    }), React.createElement(Col, {
+      md: 6,
+      className: "mb-2"
+    }, React.createElement(Row, null, React.createElement(Col, {
+      md: 12,
+      className: "mb-2"
+    }, React.createElement(RequiredLabel, {
+      text: "Class Teacher Name"
+    }), React.createElement(Input, {
+      name: "teacherName",
+      value: values.teacherName,
+      type: "text",
+      onChange: function onChange(e) {
+        handleChange(e);
+      }
+    }), touched.teacherName && errors.teacherName && React.createElement(ErrorHandler, {
+      text: errors.teacherName
+    })), React.createElement(Col, {
+      md: 12,
+      className: "mb-2"
+    }, React.createElement(RequiredLabel, {
+      text: "Class Teacher Email"
+    }), React.createElement(Input, {
+      name: "teacherEmail",
+      value: values.teacherEmail,
+      type: "text",
+      onChange: function onChange(e) {
+        handleChange(e);
+      }
+    }), touched.teacherEmail && errors.teacherEmail && React.createElement(ErrorHandler, {
+      text: errors.teacherEmail
+    })), React.createElement(Col, {
+      md: 12,
+      className: "mb-2"
+    }, React.createElement(Label, null, "Students"), React.createElement(StudentSelector, {
+      onChange: function onChange(e) {
+        setArrStudent(e);
+        formProps.setFieldValue("studentIds", e.map(function (i) {
+          return i.value;
+        }) || []);
+      },
+      value: arrStudent
+    })), React.createElement(Col, {
+      md: 12,
+      className: "mb-2"
+    }, touched.studentIds && errors.studentIds && React.createElement(ErrorHandler, {
+      text: errors.studentIds
+    })), React.createElement(Col, {
+      md: 12,
+      className: "mb-2"
+    }, React.createElement(RequiredLabel, {
+      text: "Upload File Class Reflection"
+    }), React.createElement(UploadCSVButton, {
+      key: "Import class reflections",
+      isClassReflection: true,
       htmlFor: id,
-      text: button.text,
+      text: "Upload File",
       isDisabled: isLoading,
-      backgroundColor: button.backgroundColor,
+      backgroundColor: "#e74c3c",
       onClick: function onClick() {
-        return setType(button.type);
+        setType(CSVType.ClassReflection);
       }
-    });
+    }), !!dataFile && React.createElement("p", {
+      style: {
+        color: '#007bff',
+        fontStyle: 'italic',
+        marginTop: '5px'
+      }
+    }, dataFile.name)), !dataFile && React.createElement(Col, {
+      md: 12,
+      className: "mb-2"
+    }, touched.file && errors.file && React.createElement(ErrorHandler, {
+      text: errors.file
+    })), React.createElement(Col, {
+      md: 12
+    }, React.createElement(Button, {
+      color: "primary",
+      className: "float-right",
+      onClick: function onClick() {
+        return handleSubmit();
+      }
+    }, "Import"), ' '))), React.createElement(Col, {
+      md: 6,
+      className: "mb-2"
+    }, React.createElement(Row, null, React.createElement(Col, {
+      md: 12,
+      className: "mb-2"
+    }, React.createElement(RequiredLabel, {
+      text: "Import student"
+    }), buttons.map(function (button) {
+      return React.createElement(UploadCSVButton, {
+        key: button.text,
+        htmlFor: 'import-student',
+        text: button.text,
+        isDisabled: isLoading,
+        backgroundColor: button.backgroundColor,
+        onClick: function onClick() {
+          return setType(button.type);
+        }
+      });
+    })))));
   })));
 };
 
-var schema$4 = object({
+var schema$5 = object({
   name: string().required("Name is required"),
   startTime: string().required("Start time is required"),
   endTime: string().required("End time is required")
@@ -5357,7 +5545,7 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: semesterDetail,
     enableReinitialize: true,
-    validationSchema: schema$4,
+    validationSchema: schema$5,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -5410,7 +5598,7 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
     })), React.createElement(Col, {
       md: 6
     }, React.createElement(DatePicker, {
-      value: utcToLocalTime(values.startTime, "Do MMMM YYYY"),
+      value: !!values.startTime ? utcToLocalTime(values.startTime, "Do MMMM YYYY") : "",
       todayButton: "Today",
       peekNextMonth: true,
       showMonthDropdown: true,
@@ -5441,7 +5629,7 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
     })), React.createElement(Col, {
       md: 6
     }, React.createElement(DatePicker, {
-      value: utcToLocalTime(values.endTime, "Do MMMM YYYY"),
+      value: !!values.endTime ? utcToLocalTime(values.endTime, "Do MMMM YYYY") : "",
       todayButton: "Today",
       peekNextMonth: true,
       showMonthDropdown: true,
@@ -5468,7 +5656,7 @@ var SemesterDetailModal = function SemesterDetailModal(props, ref) {
 
 var SemesterDetailModal$1 = forwardRef(SemesterDetailModal);
 
-var schema$5 = object({
+var schema$6 = object({
   value: number().required("Breaking month is required")
 });
 var options = [{
@@ -5521,7 +5709,7 @@ var BreakingMonthModal = function BreakingMonthModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: breakingMonthDetail,
     enableReinitialize: true,
-    validationSchema: schema$5,
+    validationSchema: schema$6,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -6099,7 +6287,7 @@ var SemesterList = function SemesterList() {
   }, "Change breaking month"))))));
 };
 
-var schema$6 = object({
+var schema$7 = object({
   label: string().required("Label is required"),
   value: number().required("Value is required")
 });
@@ -6117,7 +6305,7 @@ var BandScoreDetailModal = function BandScoreDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: bandScoreDetail,
     enableReinitialize: true,
-    validationSchema: schema$6,
+    validationSchema: schema$7,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -6786,7 +6974,7 @@ var CurrentLicense = function CurrentLicense() {
   }))));
 };
 
-var schema$7 = object({
+var schema$8 = object({
   name: string().required("Name is required"),
   startTime: string().required("Start time is required"),
   endTime: string().required("End time is required")
@@ -6805,7 +6993,7 @@ var SchoolBlankDayDetailModal = function SchoolBlankDayDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: schoolBlankDayDetail,
     enableReinitialize: true,
-    validationSchema: schema$7,
+    validationSchema: schema$8,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -8335,7 +8523,7 @@ var QuestionSplitPaneSelector = function QuestionSplitPaneSelector(props) {
   }, " ", "v", " ")) : "");
 };
 
-var schema$8 = object({
+var schema$9 = object({
   name: string().required("Name is required")
 });
 
@@ -8361,7 +8549,7 @@ var ReflectionDetailModal = function ReflectionDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: reflectionformDetail,
     enableReinitialize: true,
-    validationSchema: schema$8,
+    validationSchema: schema$9,
     onSubmit: function onSubmit(values, actions) {
       values.questionIds = arrId;
       onConfirm(values);
@@ -9742,7 +9930,7 @@ var AdditionalComponent = function AdditionalComponent(_ref) {
   return null;
 };
 
-var schema$9 = object({
+var schema$a = object({
   text: string().required("Question text is required"),
   type: string().required("Question type is required"),
   categoryId: number().test("test category id", "Category is required", function (value) {
@@ -9995,7 +10183,7 @@ var QuestionDetail = function QuestionDetail() {
   return React.createElement(Formik, {
     initialValues: questionDetail,
     enableReinitialize: true,
-    validationSchema: schema$9,
+    validationSchema: schema$a,
     onSubmit: function onSubmit(values) {
       if (values.type == QUESTION_TYPES.EMOTIONAL && !!values.answers) {
         for (var index in values.answers) {
@@ -10261,7 +10449,7 @@ var QuestionSplitPaneSelector$1 = function QuestionSplitPaneSelector(props) {
   }, " ", "v", " ")) : "");
 };
 
-var schema$a = object({
+var schema$b = object({
   name: string().required("Name is required")
 });
 
@@ -10287,7 +10475,7 @@ var AssessmentDetailModal = function AssessmentDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: assessmentDetail,
     enableReinitialize: true,
-    validationSchema: schema$a,
+    validationSchema: schema$b,
     onSubmit: function onSubmit(values, actions) {
       values.questionIds = arrId;
       onConfirm(values);
@@ -11229,7 +11417,7 @@ var FeedbackList = function FeedbackList() {
   }))));
 };
 
-var schema$b = object({
+var schema$c = object({
   name: string().required("Name is required")
 });
 
@@ -11249,7 +11437,7 @@ var TutorialScreenDetailModal = function TutorialScreenDetailModal(props, ref) {
       typeRole: typeRole
     }),
     enableReinitialize: true,
-    validationSchema: schema$b,
+    validationSchema: schema$c,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -11729,110 +11917,7 @@ var TutorialScreenContainer = function TutorialScreenContainer() {
   });
 };
 
-var QuestionBankList$1 = function QuestionBankList(_ref) {
-  var isDefaultQuestion = _ref.isDefaultQuestion,
-      isDefaultQuestionGeneral = _ref.isDefaultQuestionGeneral;
-
-  var _useQuestionList = useQuestionList(isDefaultQuestion, isDefaultQuestionGeneral),
-      totalItems = _useQuestionList.totalItems,
-      gridOptions = _useQuestionList.gridOptions,
-      setRef = _useQuestionList.setRef,
-      goToDetail = _useQuestionList.goToDetail,
-      filters = _useQuestionList.filters,
-      changeFilters = _useQuestionList.changeFilters,
-      updateOrderQuestions = _useQuestionList.updateOrderQuestions;
-
-  var onRowDragEnd = function onRowDragEnd(e) {
-    var dataAfterDrag = e.node.parent.childrenAfterFilter.map(function (item, index) {
-      return {
-        id: item.data.id,
-        orderDrag: ++index
-      };
-    });
-    updateOrderQuestions(dataAfterDrag, isDefaultQuestionGeneral);
-  };
-
-  return React.createElement("div", {
-    className: "animated fadeIn"
-  }, React.createElement(Row, {
-    className: "my-2"
-  }, React.createElement(Col, {
-    md: 8
-  }, React.createElement(SearchBoxContainer, {
-    text: "Create question",
-    onClick: function onClick() {
-      return goToDetail();
-    },
-    initValue: filters.searchString,
-    onSearch: function onSearch(searchString) {
-      return changeFilters({
-        searchString: searchString
-      });
-    },
-    placeholder: "Type something to Search question"
-  })), isDefaultQuestion && React.createElement(Col, {
-    md: 2
-  }, React.createElement(DefaultQuestionStudentTeacherFilter, {
-    isDefaultQuestionTeacher: filters.isDefaultQuestionTeacher,
-    onChange: function onChange(e) {
-      return changeFilters({
-        isDefaultQuestionTeacher: e ? e.value : null
-      });
-    }
-  })), isDefaultQuestionGeneral && React.createElement(Col, {
-    md: 2
-  }, React.createElement(DefaultQuestionStudentTeacherFilter, {
-    isDefaultQuestionTeacher: filters.isDefaultQuestionGeneralClassTeacher,
-    onChange: function onChange(e) {
-      return changeFilters({
-        isDefaultQuestionGeneralClassTeacher: e ? e.value : null
-      });
-    },
-    isDefaultGeneralClass: true
-  })), React.createElement(Col, {
-    md: isDefaultQuestion || isDefaultQuestionGeneral ? 2 : 4,
-    className: "d-flex align-items-center justify-content-end"
-  }, "Total of questions: ", totalItems)), React.createElement(Row, {
-    className: "mb-2"
-  }, React.createElement(Col, {
-    md: 12,
-    className: "mb-2"
-  }, React.createElement("div", {
-    className: "ag-theme-balham w-100"
-  }, React.createElement(AgGridReact, {
-    domLayout: "autoHeight",
-    gridOptions: gridOptions,
-    masterDetail: true,
-    onGridReady: function onGridReady(params) {
-      setRef(params.api);
-    },
-    rowDragManaged: true,
-    animateRows: true,
-    modules: [MasterDetailModule, ClientSideRowModelModule],
-    onRowDragEnd: onRowDragEnd
-  }))), React.createElement(Col, {
-    md: 12
-  }, React.createElement(CustomPagination, {
-    filters: filters,
-    totalRecordCount: totalItems,
-    changePageSize: function changePageSize(pageSize) {
-      return changeFilters({
-        pageSize: pageSize
-      });
-    },
-    changePage: function changePage(currentPage) {
-      return changeFilters({
-        currentPage: currentPage
-      });
-    }
-  }))));
-};
-
-QuestionBankList$1.defaultProps = {
-  isDefaultQuestion: false
-};
-
-var schema$c = object({
+var schema$d = object({
   name: string().required("Name is required")
 });
 
@@ -11849,7 +11934,7 @@ var QuestionCateModal = function QuestionCateModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: questionCateDetail,
     enableReinitialize: true,
-    validationSchema: schema$c,
+    validationSchema: schema$d,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -12260,25 +12345,7 @@ var QuestionCateList = function QuestionCateList() {
 var tabs$3 = [{
   path: "/admin/question/question-list",
   title: "Question list",
-  component: QuestionBankList$1
-}, {
-  path: "/admin/question/default-question-list",
-  title: "Default question list",
-  component: function component() {
-    return React.createElement(QuestionBankList$1, {
-      isDefaultQuestion: true,
-      isDefaultQuestionGeneral: false
-    });
-  }
-}, {
-  path: "/admin/question/default-question-general-list",
-  title: "Default question general class list",
-  component: function component() {
-    return React.createElement(QuestionBankList$1, {
-      isDefaultQuestion: false,
-      isDefaultQuestionGeneral: true
-    });
-  }
+  component: QuestionBankList
 }, {
   path: "/admin/question/question-category",
   title: "Question category",
@@ -12454,7 +12521,7 @@ var SemesterSelector = function SemesterSelector(_ref) {
   }));
 };
 
-var schema$d = object({
+var schema$e = object({
   beginDate: string().required("Begin date is required"),
   endDate: string().required("End date is required"),
   timeSemester: string().required("Time Semester is required"),
@@ -12490,7 +12557,7 @@ var AssignmentDetailModal = function AssignmentDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: assignmentDetail,
     enableReinitialize: true,
-    validationSchema: schema$d,
+    validationSchema: schema$e,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -14178,7 +14245,7 @@ var SkillSelector$1 = function SkillSelector(_ref) {
   });
 };
 
-var schema$e = object({
+var schema$f = 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 () {
@@ -14566,7 +14633,7 @@ var SessionTemplateDetail = function SessionTemplateDetail() {
   return React.createElement(Formik, {
     initialValues: sessionTemplateDetail,
     enableReinitialize: true,
-    validationSchema: schema$e,
+    validationSchema: schema$f,
     onSubmit: function onSubmit(values) {
       confirmData(values);
       setEdited(false);
@@ -15119,7 +15186,7 @@ var useSessionTemplateGeneralClassDetail = function useSessionTemplateGeneralCla
 };
 
 var LINK_TO_DEFAULT_QUESTION_GENERAL_CLASS = "/admin/question/default-question-general-list";
-var schema$f = object({
+var schema$g = 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;
@@ -15203,7 +15270,7 @@ var SessionTemplateGeneralClassDetail = function SessionTemplateGeneralClassDeta
   return React.createElement(Formik, {
     initialValues: sessionTemplateGeneralClassDetail,
     enableReinitialize: true,
-    validationSchema: schema$f,
+    validationSchema: schema$g,
     onSubmit: function onSubmit(values) {
       confirmData(values);
       setEdited(false);
@@ -15410,7 +15477,7 @@ var SessionTemplateGeneralClassDetail = function SessionTemplateGeneralClassDeta
   });
 };
 
-var schema$g = object({
+var schema$h = object({
   learningSupportCategoryId: number().test("testLearningSupportCategoryId", "Invalid category", function (number) {
     return !!number && number >= 1;
   }),
@@ -15440,7 +15507,7 @@ var CustomAlertDetailModal = function CustomAlertDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: customAlertDetail,
     enableReinitialize: true,
-    validationSchema: schema$g,
+    validationSchema: schema$h,
     onSubmit: function onSubmit(values, actions) {
       onConfirm(values);
       actions.resetForm();
@@ -16014,7 +16081,7 @@ var CustomAlertList = function CustomAlertList() {
 
 var certificate = {"certificate-item":"_3DVMZ","add-breakpoint":"_3zOGW","box-item":"_3DQwX"};
 
-var schema$h = object({
+var schema$i = 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) {
@@ -16039,7 +16106,7 @@ var CertificateDetailModal = function CertificateDetailModal(props, ref) {
   return React.createElement(Formik, {
     initialValues: certificateDetail,
     enableReinitialize: true,
-    validationSchema: schema$h,
+    validationSchema: schema$i,
     onSubmit: function onSubmit(values, actions) {
       var _values$certificateIt;
 
@@ -17328,6 +17395,7 @@ var HighImpact = function HighImpact(_ref) {
   }, [data]);
   if (!data) return React.createElement(Loading, null);
   var series = [{
+    name: "",
     data: ratings
   }];
   var options = {
@@ -17521,7 +17589,10 @@ var Quantity = function Quantity(_ref) {
   if (!data) return React.createElement(Loading, null);
   var teacherPercentage = data.teacherPercentage,
       studentPercentage = data.studentPercentage,
-      assistantPercentage = data.assistantPercentage;
+      assistantPercentage = data.assistantPercentage,
+      numberOfTeachers = data.numberOfTeachers,
+      numberOfStudents = data.numberOfStudents,
+      numberOfAssistants = data.numberOfAssistants;
   var series = [teacherPercentage, studentPercentage, assistantPercentage].map(function (number) {
     return Number(number.toFixed(2));
   });
@@ -17547,15 +17618,15 @@ var Quantity = function Quantity(_ref) {
   var details = [{
     label: "Teachers",
     color: colors$3[0],
-    value: teacherPercentage
+    value: numberOfTeachers
   }, {
     label: "Students",
     color: colors$3[1],
-    value: studentPercentage
+    value: numberOfStudents
   }, {
     label: "Assistants",
     color: colors$3[2],
-    value: assistantPercentage
+    value: numberOfAssistants
   }];
   return React.createElement("div", {
     className: "d-flex h-100"
@@ -17569,8 +17640,6 @@ var Quantity = function Quantity(_ref) {
     bordered: true,
     size: "sm"
   }, React.createElement("tbody", null, details.map(function (item) {
-    var _item$value;
-
     return React.createElement("tr", {
       key: item.label
     }, React.createElement("td", null, item.label), React.createElement("td", {
@@ -17580,8 +17649,8 @@ var Quantity = function Quantity(_ref) {
       style: {
         backgroundColor: item.color
       }
-    })), React.createElement("td", null, Number(((_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.toFixed(2)) || "0"), "%"));
-  }))))), React.createElement("div", {
+    })), React.createElement("td", null, item.value));
+  }))), React.createElement("p", null, "The number of user for each role"))), React.createElement("div", {
     className: "d-flex align-items-end"
   }, React.createElement(ReactApexChart, {
     options: options,