mario-education 2.4.57-admin → 2.4.58-admin

package/dist/index.modern.js

@@ -17,8 +17,8 @@ import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-mod
 import { FaCheck, FaTimes, FaRegEdit } from 'react-icons/fa';
 import { Editor } from '@tinymce/tinymce-react';
 import Chart from 'react-apexcharts';
-import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
 import 'react-datepicker/dist/react-datepicker.css';
+import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';
 
@@ -1151,7 +1151,7 @@ var ConferenceRubricList = function ConferenceRubricList() {
   }))));
 };
 
-var styles = {"test":"_3ybTi","body-question-right":"_1H0W8","body-question":"_b-AXV","badge-icon":"_1fgfO","input-color-picker":"_2YR4l","question-list-session-template":"_114IY","delete-column-question-list-sesstion-template":"_qE7J0","conference-rubric-skill-column":"_2BV3o","conference-rubric-additional-row":"_1P4F2","conference-rubric-row-test":"_1SRmg","emotional-response":"_ZDINp","star-rating":"_Kzkzd","list-teacher-compare":"_Q0sF1","teacher-item":"_gu_yD","teacher-item-selected":"_33tYy","btn-filter":"_2VZin","color-filter":"_2M0vR","block-filter-component":"_1d6uY","select-filter-component":"_1XSIo","hidden":"_3o8gR","box-select":"_3ru37","radio-btn":"_1tQvL","box-select-label":"_3VNX5","date-picker":"_I8kqz"};
+var styles = {"test":"_3ybTi","body-question-right":"_1H0W8","body-question":"_b-AXV","badge-icon":"_1fgfO","input-color-picker":"_2YR4l","question-list-session-template":"_114IY","delete-column-question-list-sesstion-template":"_qE7J0","conference-rubric-skill-column":"_2BV3o","conference-rubric-additional-row":"_1P4F2","conference-rubric-row-test":"_1SRmg","emotional-response":"_ZDINp","star-rating":"_Kzkzd","list-teacher-compare":"_Q0sF1","teacher-item":"_gu_yD","teacher-item-selected":"_33tYy","btn-filter":"_2VZin","color-filter":"_2M0vR","block-filter-component":"_1d6uY","select-filter-component":"_1XSIo","hidden":"_3o8gR","box-select":"_3ru37","radio-btn":"_1tQvL","box-select-label":"_3VNX5","date-picker":"_I8kqz","filter-box-learning":"_3xuSa","search-box-learning":"_15ep6"};
 
 var ToggleInput = function ToggleInput(_ref) {
   var value = _ref.value,
@@ -19720,7 +19720,7 @@ var TYPECHART;
   TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
 })(TYPECHART || (TYPECHART = {}));
 
-var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","label-chart":"_24PRg","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","headẻ-chart":"_g5-bn","btn-show-chart":"_2htKu","checkbox-chart":"_1qXAT","column-chart-percent":"_3NgrB","chart-background":"_32fu3","custom-marker":"_DmMzw","mark-custom":"_1eUXn","item-legend":"_3hrrC","label-legend-custom":"_Q-iiW","mark-legend":"_cD4ey","percent":"_2HWhv","listItem":"_2Hdbu","item":"_3RJ2T","student-by-age":"_38ikt","total-student":"_1TnWs","pie-chart":"_3BTJi","options-gender":"_1Ws0m","legend":"_2HnO_","text-lengend":"_2BFJw","student-by-grade":"_2az-l","bubble-chart-custom":"_2j8fp","x-axis-custom-wrap":"_1BN5z","axis-content":"_1rYav","legend-wrap":"_3-zAs","list-percent":"_1PPhv","percent-item":"_1rjWR","chart-custom":"_f-Ti4","chart-buddle":"_TPa6x","title-grade":"_1hZ_V","title-modal":"_3L9WC","header-desc-modal":"_1TFtP","form-checkbox":"_37aqf","checkbox-content":"_1iabV","btn-export":"_1eQAg","title-chart":"_pFFg9","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b"};
+var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","label-chart":"_24PRg","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","cursor-pointer":"_11Xjn","btn-show-chart":"_2htKu","checkbox-chart":"_1qXAT","column-chart-percent":"_3NgrB","chart-background":"_32fu3","custom-marker":"_DmMzw","mark-custom":"_1eUXn","item-legend":"_3hrrC","label-legend-custom":"_Q-iiW","mark-legend":"_cD4ey","percent":"_2HWhv","listItem":"_2Hdbu","item":"_3RJ2T","student-by-age":"_38ikt","total-student":"_1TnWs","pie-chart":"_3BTJi","options-gender":"_1Ws0m","legend":"_2HnO_","text-lengend":"_2BFJw","student-by-grade":"_2az-l","bubble-chart-custom":"_2j8fp","x-axis-custom-wrap":"_1BN5z","axis-content":"_1rYav","legend-wrap":"_3-zAs","list-percent":"_1PPhv","percent-item":"_1rjWR","chart-custom":"_f-Ti4","chart-buddle":"_TPa6x","title-grade":"_1hZ_V","title-modal":"_3L9WC","header-desc-modal":"_1TFtP","form-checkbox":"_37aqf","checkbox-content":"_1iabV","btn-export":"_1eQAg","title-chart":"_pFFg9","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b"};
 
 var CheckboxCustom = function CheckboxCustom(_ref) {
   var _ref$background = _ref.background,
@@ -19809,7 +19809,8 @@ var HeaderChart = function HeaderChart(_ref) {
       onChangeChart = _ref.onChangeChart,
       options = _ref.options,
       contentTooltip = _ref.contentTooltip,
-      index = _ref.index;
+      index = _ref.index,
+      onClickOptions = _ref.onClickOptions;
 
   var _useState = useState(false),
       openTooltip = _useState[0],
@@ -19882,9 +19883,11 @@ var HeaderChart = function HeaderChart(_ref) {
       marginBottom: 0,
       cursor: "pointer"
     }
-  }, options[1].value === TYPECHART.BAR ? "Bar charts" : "Line charts")))), React.createElement("i", {
-    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"],
-    onClick: onToggle
+  }, options[1].value === TYPECHART.BAR ? "Bar charts" : "Line charts")))), !!onClickOptions && React.createElement("i", {
+    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"] + " " + styles$1["cursor-pointer"],
+    onClick: function onClick() {
+      return onClickOptions === null || onClickOptions === void 0 ? void 0 : onClickOptions();
+    }
   }), React.createElement("div", {
     onClick: onToggle,
     className: styles$1["btn-show-chart"],
@@ -27071,6 +27074,11 @@ var getGrades = function getGrades(studentUserId) {
 var getBandScore = function getBandScore() {
   return api.get("" + BAND_SCORE);
 };
+var getLearningStrategiesTableApi = function getLearningStrategiesTableApi(filter) {
+  return api.get(REPORT_URL + "/list-learning-strategies", {
+    params: filter
+  });
+};
 
 var TITLE$s = "Dashboard";
 var DEFAULT_START_DATE = moment().subtract(3, 'months').startOf("day").valueOf();
@@ -27097,81 +27105,136 @@ var useDashboard = function useDashboard() {
       filter = _useState[0],
       setFilter = _useState[1];
 
-  var _useState2 = useState(INITIAl_STUDENT_DASHBOARD),
-      listTotalTime = _useState2[0],
-      setListTotalTime = _useState2[1];
+  var _useState2 = useState(),
+      learningStrategiesData = _useState2[0],
+      setLearningStrategiesData = _useState2[1];
 
-  var _useState3 = useState([]),
-      readinessToLearning = _useState3[0],
-      setReadinessToLearning = _useState3[1];
+  var _useState3 = useState(false),
+      openLearningStrategiesTable = _useState3[0],
+      setOpenLearningStrategiesTable = _useState3[1];
+
+  var handleOpenCloseLearningStrategiesTable = function handleOpenCloseLearningStrategiesTable() {
+    setOpenLearningStrategiesTable(!openLearningStrategiesTable);
+  };
 
-  var _useState4 = useState(LEARNING_STRATEGY_INIT),
-      topLearningStrategies = _useState4[0],
-      setTopLearningStrategies = _useState4[1];
+  var _useState4 = useState({
+    searchString: "",
+    currentPage: 1,
+    pageSize: 10,
+    sortBy: "Strategies",
+    sortOrder: "ASC",
+    startDate: DEFAULT_START_DATE,
+    endDate: DEFAULT_END_DATE
+  }),
+      filterLearningStrategiesTable = _useState4[0],
+      setFilterLearningStrategiesTable = _useState4[1];
 
-  var _useState5 = useState([]),
-      studentByGrade = _useState5[0],
-      setStudentByGrade = _useState5[1];
+  var changeFiltersLearningStrategiesTable = function changeFiltersLearningStrategiesTable(updatedFilter) {
+    setFilterLearningStrategiesTable(_extends({}, filterLearningStrategiesTable, updatedFilter));
+  };
+
+  var getLearningStrategiesTableData = function getLearningStrategiesTableData() {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(getLearningStrategiesTableApi(filterLearningStrategiesTable)).then(function (res) {
+          !!res.data && setLearningStrategiesData(res.data);
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.meesage
+        }));
+      });
 
-  var _useState6 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      chartOneToOneData = _useState6[0],
-      setChartOneToOneData = _useState6[1];
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-  var _useState7 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      chartClassReflection = _useState7[0],
-      setChartClassReflection = _useState7[1];
+  var _useState5 = useState(INITIAl_STUDENT_DASHBOARD),
+      listTotalTime = _useState5[0],
+      setListTotalTime = _useState5[1];
+
+  var _useState6 = useState([]),
+      readinessToLearning = _useState6[0],
+      setReadinessToLearning = _useState6[1];
 
-  var _useState8 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      chartConference = _useState8[0],
-      setChartConference = _useState8[1];
+  var _useState7 = useState(LEARNING_STRATEGY_INIT),
+      topLearningStrategies = _useState7[0],
+      setTopLearningStrategies = _useState7[1];
+
+  var _useState8 = useState([]),
+      studentByGrade = _useState8[0],
+      setStudentByGrade = _useState8[1];
 
   var _useState9 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      learningProgress = _useState9[0],
-      setLearningProgress = _useState9[1];
+      chartOneToOneData = _useState9[0],
+      setChartOneToOneData = _useState9[1];
 
   var _useState10 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      safety = _useState10[0],
-      setSafety = _useState10[1];
+      chartClassReflection = _useState10[0],
+      setChartClassReflection = _useState10[1];
 
-  var _useState11 = useState(),
-      friendCircles = _useState11[0],
-      setFriendCircles = _useState11[1];
+  var _useState11 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      chartConference = _useState11[0],
+      setChartConference = _useState11[1];
 
-  var _useState12 = useState(),
-      activityCircles = _useState12[0],
-      setActivityCircles = _useState12[1];
+  var _useState12 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      learningProgress = _useState12[0],
+      setLearningProgress = _useState12[1];
 
-  var _useState13 = useState([]),
-      studentBySpecialNeed = _useState13[0],
-      setStudentBySpecialNeed = _useState13[1];
+  var _useState13 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      safety = _useState13[0],
+      setSafety = _useState13[1];
 
-  var _useState14 = useState(INITIAL_AGE_OF_STUDENT),
-      studentByAge = _useState14[0],
-      setStudentByAge = _useState14[1];
+  var _useState14 = useState(),
+      friendCircles = _useState14[0],
+      setFriendCircles = _useState14[1];
 
-  var _useState15 = useState(INITIAL_STUDENT_BY_GENDER),
-      studentByGender = _useState15[0],
-      setStudentByGender = _useState15[1];
+  var _useState15 = useState(),
+      activityCircles = _useState15[0],
+      setActivityCircles = _useState15[1];
 
   var _useState16 = useState([]),
-      topSkill = _useState16[0],
-      setTopSkill = _useState16[1];
+      studentBySpecialNeed = _useState16[0],
+      setStudentBySpecialNeed = _useState16[1];
+
+  var _useState17 = useState(INITIAL_AGE_OF_STUDENT),
+      studentByAge = _useState17[0],
+      setStudentByAge = _useState17[1];
 
-  var _useState17 = useState([]),
-      bandScore = _useState17[0],
-      setBandScore = _useState17[1];
+  var _useState18 = useState(INITIAL_STUDENT_BY_GENDER),
+      studentByGender = _useState18[0],
+      setStudentByGender = _useState18[1];
+
+  var _useState19 = useState([]),
+      topSkill = _useState19[0],
+      setTopSkill = _useState19[1];
+
+  var _useState20 = useState([]),
+      bandScore = _useState20[0],
+      setBandScore = _useState20[1];
 
   var user = useSelector(function (state) {
     return state.common.user;
   });
 
-  var _useState18 = useState(undefined),
-      studentDefault = _useState18[0],
-      setStudentDefault = _useState18[1];
+  var _useState21 = useState(undefined),
+      studentDefault = _useState21[0],
+      setStudentDefault = _useState21[1];
 
-  var _useState19 = useState(""),
-      genderOfStudent = _useState19[0],
-      setGenderOfStudent = _useState19[1];
+  var _useState22 = useState(""),
+      genderOfStudent = _useState22[0],
+      setGenderOfStudent = _useState22[1];
 
   var handleChangeFilters = function handleChangeFilters(event) {
     var _extends2;
@@ -27179,17 +27242,17 @@ var useDashboard = function useDashboard() {
     setFilter(_extends({}, filter, (_extends2 = {}, _extends2[event.target.name] = event.target.value, _extends2)));
   };
 
-  var _useState20 = useState([]),
-      activeColumnOneToOne = _useState20[0],
-      setActiveColumnOneToOne = _useState20[1];
+  var _useState23 = useState([]),
+      activeColumnOneToOne = _useState23[0],
+      setActiveColumnOneToOne = _useState23[1];
 
-  var _useState21 = useState([]),
-      seriesOneToOne = _useState21[0],
-      setSeriesOneToOne = _useState21[1];
+  var _useState24 = useState([]),
+      seriesOneToOne = _useState24[0],
+      setSeriesOneToOne = _useState24[1];
 
-  var _useState22 = useState(INITIAL_AVG),
-      avgOneToOne = _useState22[0],
-      setAvgOneToOne = _useState22[1];
+  var _useState25 = useState(INITIAL_AVG),
+      avgOneToOne = _useState25[0],
+      setAvgOneToOne = _useState25[1];
 
   var monthsOneToOne = chartOneToOneData === null || chartOneToOneData === void 0 ? void 0 : chartOneToOneData.overviewQuestionChoice.map(function (i) {
     return (i === null || i === void 0 ? void 0 : i.month) || "";
@@ -27205,9 +27268,6 @@ var useDashboard = function useDashboard() {
     setSeriesOneToOne(newSeriesOneToOne === null || newSeriesOneToOne === void 0 ? void 0 : newSeriesOneToOne.filter(function (_, idx) {
       return newActiveColumn[idx];
     }));
-    setAvgOneToOne(newAvgOneToOne === null || newAvgOneToOne === void 0 ? void 0 : newAvgOneToOne.map(function (_, idx) {
-      return newActiveColumn[idx] ? newAvgOneToOne[idx] : 0;
-    }));
   };
 
   useEffect(function () {
@@ -27219,25 +27279,23 @@ var useDashboard = function useDashboard() {
       }).splice(0, dataConvertedOneToOne.length - 2)));
     }
 
-    setAvgOneToOne(newAvgOneToOne === null || newAvgOneToOne === void 0 ? void 0 : newAvgOneToOne.map(function (_, index) {
-      return activeColumnOneToOne[index] ? newAvgOneToOne[index] : 0;
-    }));
+    setAvgOneToOne(newAvgOneToOne);
     setSeriesOneToOne(newSeriesOneToOne === null || newSeriesOneToOne === void 0 ? void 0 : newSeriesOneToOne.filter(function (_, idx) {
       return activeColumnOneToOne[idx];
     }));
   }, [chartOneToOneData.overviewQuestionChoice]);
 
-  var _useState23 = useState([]),
-      activeColumnClassReflection = _useState23[0],
-      setActiveColumnClassReflection = _useState23[1];
+  var _useState26 = useState([]),
+      activeColumnClassReflection = _useState26[0],
+      setActiveColumnClassReflection = _useState26[1];
 
-  var _useState24 = useState([]),
-      seriesClassRefection = _useState24[0],
-      setSeriesClassReflection = _useState24[1];
+  var _useState27 = useState([]),
+      seriesClassRefection = _useState27[0],
+      setSeriesClassReflection = _useState27[1];
 
-  var _useState25 = useState(INITIAL_AVG),
-      avgClassReflection = _useState25[0],
-      setAvgClassReflection = _useState25[1];
+  var _useState28 = useState(INITIAL_AVG),
+      avgClassReflection = _useState28[0],
+      setAvgClassReflection = _useState28[1];
 
   var monthsClassReflection = chartClassReflection === null || chartClassReflection === void 0 ? void 0 : chartClassReflection.overviewQuestionChoice.map(function (i) {
     return (i === null || i === void 0 ? void 0 : i.month) || "";
@@ -27253,9 +27311,6 @@ var useDashboard = function useDashboard() {
     setSeriesClassReflection(newSeriesClassReflection === null || newSeriesClassReflection === void 0 ? void 0 : newSeriesClassReflection.filter(function (_, idx) {
       return newActiveColumn[idx];
     }));
-    setAvgClassReflection(newAvgClassReflection === null || newAvgClassReflection === void 0 ? void 0 : newAvgClassReflection.map(function (_, idx) {
-      return newActiveColumn[idx] ? newAvgOneToOne[idx] : 0;
-    }));
   };
 
   useEffect(function () {
@@ -27270,22 +27325,20 @@ var useDashboard = function useDashboard() {
     setSeriesClassReflection(newSeriesClassReflection === null || newSeriesClassReflection === void 0 ? void 0 : newSeriesClassReflection.filter(function (_, idx) {
       return activeColumnClassReflection[idx];
     }));
-    setAvgClassReflection(newAvgClassReflection === null || newAvgClassReflection === void 0 ? void 0 : newAvgClassReflection.map(function (_, index) {
-      return activeColumnClassReflection[index] ? newAvgClassReflection[index] : 0;
-    }));
+    setAvgClassReflection(newAvgClassReflection);
   }, [chartClassReflection.overviewQuestionChoice]);
 
-  var _useState26 = useState([]),
-      activeColumnConference = _useState26[0],
-      setActiveColumnConference = _useState26[1];
+  var _useState29 = useState([]),
+      activeColumnConference = _useState29[0],
+      setActiveColumnConference = _useState29[1];
 
-  var _useState27 = useState([]),
-      seriesConference = _useState27[0],
-      setSeriesConference = _useState27[1];
+  var _useState30 = useState([]),
+      seriesConference = _useState30[0],
+      setSeriesConference = _useState30[1];
 
-  var _useState28 = useState(INITIAL_AVG),
-      avgConference = _useState28[0],
-      setAvgConference = _useState28[1];
+  var _useState31 = useState(INITIAL_AVG),
+      avgConference = _useState31[0],
+      setAvgConference = _useState31[1];
 
   var monthsConference = chartConference === null || chartConference === void 0 ? void 0 : (_chartConference$over = chartConference.overviewQuestionChoice) === null || _chartConference$over === void 0 ? void 0 : _chartConference$over.map(function (i) {
     return (i === null || i === void 0 ? void 0 : i.month) || "";
@@ -27301,9 +27354,6 @@ var useDashboard = function useDashboard() {
     setSeriesConference(newSeriesConference === null || newSeriesConference === void 0 ? void 0 : newSeriesConference.filter(function (_, idx) {
       return newActiveColumn[idx];
     }));
-    setAvgConference(newAvgConference === null || newAvgConference === void 0 ? void 0 : newAvgConference.map(function (_, idx) {
-      return newActiveColumn[idx] ? newAvgConference[idx] : 0;
-    }));
   };
 
   useEffect(function () {
@@ -27318,22 +27368,20 @@ var useDashboard = function useDashboard() {
     setSeriesConference(newSeriesConference === null || newSeriesConference === void 0 ? void 0 : newSeriesConference.filter(function (_, idx) {
       return activeColumnConference[idx];
     }));
-    setAvgConference(newAvgConference === null || newAvgConference === void 0 ? void 0 : newAvgConference.map(function (_, idx) {
-      return activeColumnConference[idx] ? newAvgConference[idx] : 0;
-    }));
+    setAvgConference(newAvgConference);
   }, [chartConference === null || chartConference === void 0 ? void 0 : chartConference.overviewQuestionChoice]);
 
-  var _useState29 = useState([]),
-      activeColumnSafety = _useState29[0],
-      setActiveColumnSafety = _useState29[1];
+  var _useState32 = useState([]),
+      activeColumnSafety = _useState32[0],
+      setActiveColumnSafety = _useState32[1];
 
-  var _useState30 = useState([]),
-      seriesSafety = _useState30[0],
-      setSeriesSafety = _useState30[1];
+  var _useState33 = useState([]),
+      seriesSafety = _useState33[0],
+      setSeriesSafety = _useState33[1];
 
-  var _useState31 = useState(INITIAL_AVG),
-      avgSafety = _useState31[0],
-      setAvgSafety = _useState31[1];
+  var _useState34 = useState(INITIAL_AVG),
+      avgSafety = _useState34[0],
+      setAvgSafety = _useState34[1];
 
   var monthsSafety = safety === null || safety === void 0 ? void 0 : (_safety$overviewQuest = safety.overviewQuestionChoice) === null || _safety$overviewQuest === void 0 ? void 0 : _safety$overviewQuest.map(function (i) {
     return (i === null || i === void 0 ? void 0 : i.month) || "";
@@ -27349,9 +27397,6 @@ var useDashboard = function useDashboard() {
     setSeriesSafety(newSeriesSafety === null || newSeriesSafety === void 0 ? void 0 : newSeriesSafety.filter(function (_, idx) {
       return newActiveColumn[idx];
     }));
-    setAvgSafety(newAvgSafety === null || newAvgSafety === void 0 ? void 0 : newAvgSafety.map(function (_, idx) {
-      return newActiveColumn[idx] ? newAvgSafety[idx] : 0;
-    }));
   };
 
   useEffect(function () {
@@ -27365,23 +27410,23 @@ var useDashboard = function useDashboard() {
   }, [safety === null || safety === void 0 ? void 0 : safety.overviewQuestionChoice]);
   var callApi = useCallback(function (apiCaller, setData, defaultData, type) {
     try {
-      var _temp2 = _catch(function () {
+      var _temp6 = _catch(function () {
         return Promise.resolve(type ? apiCaller(_extends({}, filter, {
           type: type
         })) : apiCaller(filter)).then(function (res) {
           !!(res !== null && res !== void 0 && res.data) && setData(res.data);
         });
       }, function (err) {
-        var _err$response, _err$response$data;
+        var _err$response2, _err$response2$data;
 
         dispatch(setAlert({
           type: "danger",
-          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
         }));
         setData(defaultData);
       });
 
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -27436,27 +27481,27 @@ var useDashboard = function useDashboard() {
 
   var callApiByStudentUserId = function callApiByStudentUserId(apiCaller, setData, studentUserId, defaultData) {
     try {
-      var _temp5 = function _temp5() {
+      var _temp9 = function _temp9() {
         dispatch(setLoading(false));
       };
 
       dispatch(setLoading(true));
 
-      var _temp6 = _catch(function () {
+      var _temp10 = _catch(function () {
         return Promise.resolve(apiCaller(studentUserId)).then(function (res) {
           res && setData(res.data);
         });
       }, function (err) {
-        var _err$response2, _err$response2$data;
+        var _err$response3, _err$response3$data;
 
         dispatch(setAlert({
           type: "danger",
-          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+          message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message
         }));
         setData(defaultData);
       });
 
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
+      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -27531,7 +27576,13 @@ var useDashboard = function useDashboard() {
     avgSafety: avgSafety,
     dataConvertedSafety: dataConvertedSafety,
     monthsSafety: monthsSafety,
-    activeColumnSafety: activeColumnSafety
+    activeColumnSafety: activeColumnSafety,
+    learningStrategiesData: learningStrategiesData,
+    openLearningStrategiesTable: openLearningStrategiesTable,
+    handleOpenCloseLearningStrategiesTable: handleOpenCloseLearningStrategiesTable,
+    filterLearningStrategiesTable: filterLearningStrategiesTable,
+    changeFiltersLearningStrategiesTable: changeFiltersLearningStrategiesTable,
+    getLearningStrategiesTableData: getLearningStrategiesTableData
   };
 };
 
@@ -27578,7 +27629,13 @@ var useChartDatas = function useChartDatas() {
       chartOneToOneData = _useDashboard.chartOneToOneData,
       chartClassReflection = _useDashboard.chartClassReflection,
       chartConference = _useDashboard.chartConference,
-      safety = _useDashboard.safety;
+      safety = _useDashboard.safety,
+      learningStrategiesData = _useDashboard.learningStrategiesData,
+      openLearningStrategiesTable = _useDashboard.openLearningStrategiesTable,
+      handleOpenCloseLearningStrategiesTable = _useDashboard.handleOpenCloseLearningStrategiesTable,
+      filterLearningStrategiesTable = _useDashboard.filterLearningStrategiesTable,
+      changeFiltersLearningStrategiesTable = _useDashboard.changeFiltersLearningStrategiesTable,
+      getLearningStrategiesTableData = _useDashboard.getLearningStrategiesTableData;
 
   var _useState = useState([]),
       selectedToPrint = _useState[0],
@@ -27688,7 +27745,8 @@ var useChartDatas = function useChartDatas() {
     },
     isShowChangeChart: false,
     options: [],
-    contentTooltip: "Both the composite of individual students reporting their perceived use of John Hattie's High Impact Learning Strategies measured against the actual application with a teacher in total."
+    contentTooltip: "Both the composite of individual students reporting their perceived use of John Hattie's High Impact Learning Strategies measured against the actual application with a teacher in total.",
+    handleClickOpenTable: handleOpenCloseLearningStrategiesTable
   }, {
     id: "1_to_1",
     label: "1 To 1",
@@ -27884,7 +27942,13 @@ var useChartDatas = function useChartDatas() {
     avgConference: avgConference,
     dataConvertedSafety: dataConvertedSafety,
     activeColumnSafety: activeColumnSafety,
-    avgSafety: avgSafety
+    avgSafety: avgSafety,
+    learningStrategiesData: learningStrategiesData,
+    openLearningStrategiesTable: openLearningStrategiesTable,
+    handleOpenCloseLearningStrategiesTable: handleOpenCloseLearningStrategiesTable,
+    filterLearningStrategiesTable: filterLearningStrategiesTable,
+    changeFiltersLearningStrategiesTable: changeFiltersLearningStrategiesTable,
+    getLearningStrategiesTableData: getLearningStrategiesTableData
   };
 };
 
@@ -29350,6 +29414,170 @@ var DashboardToPDF = function DashboardToPDF(props) {
   }, "Export"));
 };
 
+var ICON_CALENDAR = "/images/calendar.svg";
+
+var LearningStrategiesTable = function LearningStrategiesTable(_ref) {
+  var _data$items;
+
+  var isOpen = _ref.isOpen,
+      onClosed = _ref.onClosed,
+      filter = _ref.filter,
+      data = _ref.data,
+      getData = _ref.getData,
+      changeFilter = _ref.changeFilter;
+  var refStartDate = useRef(null);
+  var refEndDate = useRef(null);
+
+  var _useState = useState(false),
+      isOpenCollapseStartDate = _useState[0],
+      setIsOpenCollapseStartDate = _useState[1];
+
+  var _useState2 = useState(false),
+      isOpenCollapseEndDate = _useState2[0],
+      setIsOpenCollapseEndDate = _useState2[1];
+
+  var handleToggleCollapseStartDate = function handleToggleCollapseStartDate() {
+    setIsOpenCollapseStartDate(!isOpenCollapseStartDate);
+  };
+
+  var handleToggleCollapseEndDate = function handleToggleCollapseEndDate() {
+    setIsOpenCollapseEndDate(!isOpenCollapseEndDate);
+  };
+
+  var handleClickOutSideStartDate = function handleClickOutSideStartDate(event) {
+    var _refStartDate$current;
+
+    if (refStartDate.current && !(refStartDate !== null && refStartDate !== void 0 && (_refStartDate$current = refStartDate.current) !== null && _refStartDate$current !== void 0 && _refStartDate$current.contains(event.target))) setIsOpenCollapseStartDate(false);
+  };
+
+  var handleClickOutSideEndDate = function handleClickOutSideEndDate(event) {
+    var _refEndDate$current;
+
+    if (refEndDate.current && !(refEndDate !== null && refEndDate !== void 0 && (_refEndDate$current = refEndDate.current) !== null && _refEndDate$current !== void 0 && _refEndDate$current.contains(event.target))) setIsOpenCollapseEndDate(false);
+  };
+
+  useEffect(function () {
+    document.addEventListener("click", handleClickOutSideStartDate, true);
+    document.addEventListener("click", handleClickOutSideEndDate, true);
+  }, []);
+
+  var handleChangeStartDate = function handleChangeStartDate(date) {
+    !!changeFilter && changeFilter({
+      startDate: moment(date).startOf("day").valueOf()
+    });
+    setIsOpenCollapseStartDate(false);
+  };
+
+  var handleChangeEndDate = function handleChangeEndDate(date) {
+    !!changeFilter && changeFilter({
+      endDate: moment(date).endOf("day").valueOf()
+    });
+    setIsOpenCollapseEndDate(false);
+  };
+
+  useEffect(function () {
+    getData === null || getData === void 0 ? void 0 : getData();
+  }, [filter]);
+  return React.createElement(Modal, {
+    isOpen: isOpen,
+    toggle: onClosed,
+    size: "xl"
+  }, React.createElement(ModalHeader, null, "Learning Strategies"), React.createElement(ModalBody, null, React.createElement("div", {
+    className: "" + styles["filter-box-learning"]
+  }, React.createElement("div", {
+    className: "" + styles["block-filter-component"],
+    ref: refStartDate
+  }, React.createElement("button", {
+    onClick: handleToggleCollapseStartDate,
+    className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+  }, React.createElement("img", {
+    src: "" + ICON_CALENDAR
+  }), 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"))), isOpenCollapseStartDate && React.createElement("div", {
+    className: "" + styles["date-picker"]
+  }, React.createElement(DatePicker, {
+    selected: moment(filter === null || filter === void 0 ? void 0 : filter.startDate).toDate(),
+    onChange: function onChange(date) {
+      return handleChangeStartDate(date);
+    },
+    inline: true,
+    maxDate: moment(filter === null || filter === void 0 ? void 0 : filter.endDate).toDate()
+  }))), React.createElement("div", {
+    className: "" + styles["block-filter-component"],
+    ref: refEndDate
+  }, React.createElement("button", {
+    onClick: handleToggleCollapseEndDate,
+    className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+  }, React.createElement("img", {
+    src: "" + ICON_CALENDAR
+  }), 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"))), isOpenCollapseEndDate && React.createElement("div", {
+    className: "" + styles["date-picker"]
+  }, React.createElement(DatePicker, {
+    selected: moment(filter === null || filter === void 0 ? void 0 : filter.endDate).toDate(),
+    onChange: function onChange(date) {
+      return handleChangeEndDate(date);
+    },
+    inline: true,
+    maxDate: moment(filter === null || filter === void 0 ? void 0 : filter.startDate).add(3, "months").toDate(),
+    minDate: moment(filter === null || filter === void 0 ? void 0 : filter.startDate).toDate()
+  }))), React.createElement("div", {
+    className: "" + styles["search-box-learning"]
+  }, React.createElement(SearchBox, {
+    initValue: filter.searchString,
+    onSearch: function onSearch(searchString) {
+      return changeFilter({
+        searchString: searchString
+      });
+    },
+    placeholder: "Type something to search reflection result"
+  }))), React.createElement("div", {
+    style: {
+      maxHeight: "550px",
+      overflowY: "auto",
+      marginBottom: "10px"
+    }
+  }, React.createElement(Table, {
+    bordered: true,
+    striped: true,
+    responsive: "sm",
+    hover: true
+  }, React.createElement("thead", null, React.createElement("tr", {
+    style: {
+      top: 0,
+      left: 0,
+      zIndex: 2,
+      position: "sticky",
+      backgroundColor: "#fff"
+    }
+  }, React.createElement("th", null, "Strategies"), React.createElement("th", null, "Number Of Used"), React.createElement("th", null, "Session Type"))), React.createElement("tbody", null, data === null || data === void 0 ? void 0 : (_data$items = data.items) === null || _data$items === void 0 ? void 0 : _data$items.map(function (item, index) {
+    return React.createElement("tr", {
+      key: index
+    }, React.createElement("td", {
+      className: "align-middle"
+    }, item === null || item === void 0 ? void 0 : item.strategiesName), React.createElement("td", {
+      className: "align-middle"
+    }, item === null || item === void 0 ? void 0 : item.numberOfUsed), React.createElement("td", {
+      className: "align-middle"
+    }, item === null || item === void 0 ? void 0 : item.sessionType));
+  })))), React.createElement(CustomPagination, {
+    filters: filter,
+    totalRecordCount: data === null || data === void 0 ? void 0 : data.totalItems,
+    changePageSize: function changePageSize(pageSize) {
+      return changeFilter({
+        pageSize: pageSize
+      });
+    },
+    changePage: function changePage(currentPage) {
+      return changeFilter({
+        currentPage: currentPage
+      });
+    }
+  })));
+};
+
 var Dashboard = function Dashboard() {
   var _useChartDatas = useChartDatas(),
       chartDashBoards = _useChartDatas.chartDashBoards,
@@ -29380,7 +29608,13 @@ var Dashboard = function Dashboard() {
       avgConference = _useChartDatas.avgConference,
       dataConvertedSafety = _useChartDatas.dataConvertedSafety,
       activeColumnSafety = _useChartDatas.activeColumnSafety,
-      avgSafety = _useChartDatas.avgSafety;
+      avgSafety = _useChartDatas.avgSafety,
+      openLearningStrategiesTable = _useChartDatas.openLearningStrategiesTable,
+      handleOpenCloseLearningStrategiesTable = _useChartDatas.handleOpenCloseLearningStrategiesTable,
+      filterLearningStrategiesTable = _useChartDatas.filterLearningStrategiesTable,
+      changeFiltersLearningStrategiesTable = _useChartDatas.changeFiltersLearningStrategiesTable,
+      getLearningStrategiesTableData = _useChartDatas.getLearningStrategiesTableData,
+      learningStrategiesData = _useChartDatas.learningStrategiesData;
 
   var _useBehavior = useBehavior(initialTypeChart),
       chartIsOpened = _useBehavior.chartIsOpened,
@@ -29531,10 +29765,18 @@ var Dashboard = function Dashboard() {
       isOpen: chartIsOpened[index],
       options: chartDashBoard.options,
       contentTooltip: chartDashBoard === null || chartDashBoard === void 0 ? void 0 : chartDashBoard.contentTooltip,
-      index: index
+      index: index,
+      onClickOptions: chartDashBoard === null || chartDashBoard === void 0 ? void 0 : chartDashBoard.handleClickOpenTable
     }), React.createElement(Collapse, {
       isOpen: chartIsOpened[index]
     }, chartDashBoard.children(typeChartList[index])));
+  }), React.createElement(LearningStrategiesTable, {
+    isOpen: openLearningStrategiesTable,
+    onClosed: handleOpenCloseLearningStrategiesTable,
+    filter: filterLearningStrategiesTable,
+    data: learningStrategiesData,
+    getData: getLearningStrategiesTableData,
+    changeFilter: changeFiltersLearningStrategiesTable
   }));
 };