mario-education 2.4.26-admin → 2.4.27-admin

package/dist/index.js

@@ -19641,6 +19641,40 @@ var CompareTeacher = function CompareTeacher() {
   }, "No compare result."))));
 };
 
+var LegalGenderType;
+
+(function (LegalGenderType) {
+  LegalGenderType[LegalGenderType["Male"] = 0] = "Male";
+  LegalGenderType[LegalGenderType["Female"] = 1] = "Female";
+})(LegalGenderType || (LegalGenderType = {}));
+
+var MtssType;
+
+(function (MtssType) {
+  MtssType[MtssType["Tier1"] = 0] = "Tier1";
+  MtssType[MtssType["Tier2"] = 1] = "Tier2";
+  MtssType[MtssType["Tier3"] = 2] = "Tier3";
+})(MtssType || (MtssType = {}));
+
+var FILTER_YEAR;
+
+(function (FILTER_YEAR) {
+  FILTER_YEAR[FILTER_YEAR["THIS_YEAR"] = 0] = "THIS_YEAR";
+  FILTER_YEAR[FILTER_YEAR["LAST_YEAR"] = 1] = "LAST_YEAR";
+  FILTER_YEAR[FILTER_YEAR["LAST_QUARTER"] = 2] = "LAST_QUARTER";
+  FILTER_YEAR[FILTER_YEAR["LAST_MONTH"] = 3] = "LAST_MONTH";
+  FILTER_YEAR[FILTER_YEAR["LAST_DAY"] = 4] = "LAST_DAY";
+})(FILTER_YEAR || (FILTER_YEAR = {}));
+
+var TYPECHART;
+
+(function (TYPECHART) {
+  TYPECHART[TYPECHART["AREA"] = 0] = "AREA";
+  TYPECHART[TYPECHART["BAR"] = 1] = "BAR";
+  TYPECHART[TYPECHART["LINE"] = 2] = "LINE";
+  TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
+})(TYPECHART || (TYPECHART = {}));
+
 var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","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","label-chart":"_24PRg","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-chart":"_pFFg9"};
 
 var CheckboxCustom = function CheckboxCustom(_ref) {
@@ -19693,6 +19727,201 @@ var CheckboxCustom = function CheckboxCustom(_ref) {
   }));
 };
 
+var PlusButton = function PlusButton(_ref) {
+  var _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+  return React__default.createElement("div", {
+    style: {
+      transform: isActive ? "rotate(45deg)" : ""
+    }
+  }, React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, React__default.createElement("rect", {
+    width: "24",
+    height: "24",
+    rx: "12",
+    fill: !isActive ? "#808080" : "#D9D9D9"
+  }), React__default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M12.7143 7H11.2857V11.2857H7V12.7143H11.2857V17H12.7143V12.7143H17V11.2857H12.7143V7Z",
+    fill: "white"
+  })));
+};
+
+var HeaderChart = function HeaderChart(_ref) {
+  var title = _ref.title,
+      isOpen = _ref.isOpen,
+      onToggle = _ref.onToggle,
+      _ref$isShowChangeChar = _ref.isShowChangeChart,
+      isShowChangeChart = _ref$isShowChangeChar === void 0 ? false : _ref$isShowChangeChar,
+      _ref$typeChart = _ref.typeChart,
+      typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart,
+      onChangeChart = _ref.onChangeChart,
+      options = _ref.options;
+  return React__default.createElement("div", {
+    className: "d-flex justify-content-between align-items-center " + styles$1["header-chart"] + " "
+  }, React__default.createElement("div", {
+    className: "" + styles$1["header-left"]
+  }, React__default.createElement("span", {
+    className: styles$1["header-title"] + " pr-2"
+  }, title), React__default.createElement("i", {
+    className: styles$1["icon-chart"] + " fal fa-info-circle cursor-pointer"
+  })), React__default.createElement("div", {
+    className: "" + styles$1["header-right"]
+  }, isOpen && isShowChangeChart && (options === null || options === void 0 ? void 0 : options.length) && React__default.createElement("div", {
+    className: "d-flex align-items-center d-inline-block pr-4"
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center px-2 " + styles$1["checkbox-chart"]
+  }, React__default.createElement("div", {
+    className: "pr-4 d-flex",
+    onClick: function onClick() {
+      return onChangeChart(options[0].value);
+    },
+    style: {
+      cursor: "pointer"
+    }
+  }, React__default.createElement(CheckboxCustom, {
+    width: 16,
+    height: 16,
+    isActive: typeChart === options[0].value || typeChart === TYPECHART.BOTH,
+    className: "pr-2"
+  }), React__default.createElement("label", {
+    className: "" + styles$1["label-chart"],
+    style: {
+      color: "#252733",
+      marginBottom: 0,
+      cursor: "pointer"
+    }
+  }, "Ridge charts"))), React__default.createElement("div", {
+    className: "d-inline-block px-2  " + styles$1["checkbox-chart"]
+  }, React__default.createElement("div", {
+    className: "pr-4 d-flex",
+    onClick: function onClick() {
+      return onChangeChart(options[1].value);
+    },
+    style: {
+      cursor: "pointer"
+    }
+  }, React__default.createElement(CheckboxCustom, {
+    width: 16,
+    height: 16,
+    isActive: typeChart === options[1].value || typeChart === TYPECHART.BOTH,
+    className: "pr-2"
+  }), React__default.createElement("label", {
+    className: "" + styles$1["label-chart"],
+    style: {
+      color: "#252733",
+      marginBottom: 0,
+      cursor: "pointer"
+    }
+  }, options[1].value === TYPECHART.BAR ? "Bar charts" : "Line charts")))), React__default.createElement("i", {
+    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"]
+  }), React__default.createElement("div", {
+    onClick: onToggle,
+    className: styles$1["btn-show-chart"],
+    style: {
+      cursor: "pointer"
+    }
+  }, React__default.createElement(PlusButton, {
+    isActive: isOpen
+  }))));
+};
+
+var useBehavior = function useBehavior(initialTypeChart) {
+  var _useState = React.useState(""),
+      teacherUserId = _useState[0],
+      setTeacherUserId = _useState[1];
+
+  var _useState2 = React.useState(initialTypeChart.map(function () {
+    return false;
+  })),
+      chartIsOpened = _useState2[0],
+      setChartIsOpened = _useState2[1];
+
+  var _useState3 = React.useState(initialTypeChart),
+      typeChartList = _useState3[0],
+      setTypeChartList = _useState3[1];
+
+  var onToggle = function onToggle(idx) {
+    var newStateChart = [].concat(chartIsOpened);
+    newStateChart[idx] = !newStateChart[idx];
+    setChartIsOpened(newStateChart);
+  };
+
+  var onChangeChart = function onChangeChart(idx, type) {
+    switch (type) {
+      case TYPECHART.AREA:
+        if (typeChartList[idx] === TYPECHART.BAR || typeChartList[idx] === TYPECHART.LINE) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.BOTH : cur;
+          }));
+          return;
+        }
+
+        if (typeChartList[idx] === TYPECHART.BOTH) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? initialTypeChart[idx] : cur;
+          }));
+        }
+
+        return;
+
+      case TYPECHART.BAR:
+        if (typeChartList[idx] === TYPECHART.AREA) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.BOTH : cur;
+          }));
+          return;
+        }
+
+        if (typeChartList[idx] === TYPECHART.BOTH) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.AREA : cur;
+          }));
+        }
+
+        return;
+
+      case TYPECHART.LINE:
+        if (typeChartList[idx] === TYPECHART.AREA) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.BOTH : cur;
+          }));
+          return;
+        }
+
+        if (typeChartList[idx] === TYPECHART.BOTH) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.AREA : cur;
+          }));
+        }
+
+        return;
+
+      default:
+        return;
+    }
+  };
+
+  var changeCurrentTeacherUserId = function changeCurrentTeacherUserId(userId) {
+    setTeacherUserId(userId);
+  };
+
+  return {
+    chartIsOpened: chartIsOpened,
+    onToggle: onToggle,
+    onChangeChart: onChangeChart,
+    typeChartList: typeChartList,
+    teacherUserId: teacherUserId,
+    changeCurrentTeacherUserId: changeCurrentTeacherUserId
+  };
+};
+
 var INITIAL_BEST_FRIENDS = {
   friends: 0,
   couldBeFriends: 0,
@@ -25445,31 +25674,6 @@ var moment = createCommonjsModule(function (module, exports) {
 })));
 });
 
-var LegalGenderType;
-
-(function (LegalGenderType) {
-  LegalGenderType[LegalGenderType["Male"] = 0] = "Male";
-  LegalGenderType[LegalGenderType["Female"] = 1] = "Female";
-})(LegalGenderType || (LegalGenderType = {}));
-
-var MtssType;
-
-(function (MtssType) {
-  MtssType[MtssType["Tier1"] = 0] = "Tier1";
-  MtssType[MtssType["Tier2"] = 1] = "Tier2";
-  MtssType[MtssType["Tier3"] = 2] = "Tier3";
-})(MtssType || (MtssType = {}));
-
-var FILTER_YEAR;
-
-(function (FILTER_YEAR) {
-  FILTER_YEAR[FILTER_YEAR["THIS_YEAR"] = 0] = "THIS_YEAR";
-  FILTER_YEAR[FILTER_YEAR["LAST_YEAR"] = 1] = "LAST_YEAR";
-  FILTER_YEAR[FILTER_YEAR["LAST_QUARTER"] = 2] = "LAST_QUARTER";
-  FILTER_YEAR[FILTER_YEAR["LAST_MONTH"] = 3] = "LAST_MONTH";
-  FILTER_YEAR[FILTER_YEAR["LAST_DAY"] = 4] = "LAST_DAY";
-})(FILTER_YEAR || (FILTER_YEAR = {}));
-
 var gradeOptions = function gradeOptions(grades, studentUserId) {
   var result = !studentUserId ? GRAGE_DEFAULT : GRAGE_DEFAULT.filter(function (val) {
     return grades.indexOf(val) != -1;
@@ -25494,7 +25698,8 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
         horizontal: true,
         dataLabels: {
           position: "top"
-        }
+        },
+        borderRadius: 5
       }
     },
     stroke: {
@@ -25521,6 +25726,8 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
       }
     },
     yaxis: {
+      min: 0,
+      max: 100,
       labels: {
         show: true,
         align: "left",
@@ -25646,6 +25853,11 @@ var studentByAgeOptions = function studentByAgeOptions(series) {
     dataLabels: {
       enabled: false
     },
+    plotOptions: {
+      bar: {
+        borderRadius: 5
+      }
+    },
     grid: {
       borderColor: "#F6F6F6"
     },
@@ -25830,7 +26042,7 @@ var getConvertMinuteToHour = function getConvertMinuteToHour(timeSecond) {
 
   return hTime;
 };
-var readinesToLearnoptions = function readinesToLearnoptions(data, seriesName) {
+var readinesToLearnoptions = function readinesToLearnoptions(seriesName) {
   return {
     chart: {
       height: 450,
@@ -25852,6 +26064,9 @@ var readinesToLearnoptions = function readinesToLearnoptions(data, seriesName) {
       tickPlacement: "between",
       labels: {
         show: false
+      },
+      tooltip: {
+        enabled: false
       }
     },
     yaxis: {
@@ -25860,7 +26075,7 @@ var readinesToLearnoptions = function readinesToLearnoptions(data, seriesName) {
       tickAmount: 10,
       labels: {
         formatter: function formatter(value) {
-          return value + "%";
+          return Math.round(value) !== value ? value.toFixed(2) + "%" : value + "%";
         }
       }
     },
@@ -25870,16 +26085,16 @@ var readinesToLearnoptions = function readinesToLearnoptions(data, seriesName) {
         show: false
       },
       y: {
-        formatter: function formatter(_, opts) {
-          var _data$opts$seriesInde;
-
-          return (_data$opts$seriesInde = data[opts.seriesIndex]) === null || _data$opts$seriesInde === void 0 ? void 0 : _data$opts$seriesInde.studentPercentQuestion[opts.dataPointIndex].studentName;
-        },
+        formatter: undefined,
         title: {
           formatter: function formatter() {
-            return "Student:";
+            return "Percent";
           }
         }
+      },
+      z: {
+        formatter: undefined,
+        title: "Student: "
       }
     },
     labels: seriesName,
@@ -25908,7 +26123,7 @@ var convertDataToSeriesBullderChart = function convertDataToSeriesBullderChart(d
     return {
       name: i.questionText.replace("<p>", "").replace("</p>", ""),
       data: ((_i$studentPercentQues = i.studentPercentQuestion) === null || _i$studentPercentQues === void 0 ? void 0 : _i$studentPercentQues.map(function (question) {
-        return [getRandomArbitrary((index + 1) * 1000 - 330, (index + 1) * 1000 + 330), question.percentQuestion];
+        return [getRandomArbitrary((index + 1) * 1000 - 330, (index + 1) * 1000 + 330), question.percentQuestion, question.studentName];
       })) || []
     };
   });
@@ -25922,6 +26137,11 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
         show: false
       }
     },
+    plotOptions: {
+      bar: {
+        borderRadius: 5
+      }
+    },
     dataLabels: {
       enabled: false
     },
@@ -25993,7 +26213,7 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
     }
   };
 };
-var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
+var optionLineChart = function optionLineChart(months, activeData) {
   return {
     chart: {
       height: 350,
@@ -26006,14 +26226,14 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
       enabled: false
     },
     fill: {
-      opacity: 0.5
+      opacity: 1
     },
     colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
       return activeData[index];
     }),
     stroke: {
-      curve: "straight",
-      show: false,
+      curve: "smooth",
+      show: true,
       colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
         return activeData[index];
       }),
@@ -26073,37 +26293,122 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
     }
   };
 };
-var convertDataToDataChart = function convertDataToDataChart(data) {
-  return data.reduce(function (acc, cur) {
-    return [].concat(acc, cur.resultQuestion.map(function (i) {
-      var quests = i.questionText.split("</p>");
-      return quests[0].replace("<p>", "").trim();
-    }).filter(function (i) {
-      return !!i && !acc.includes(i);
-    }));
-  }, []);
-};
-var convertToSeriesColumnChartAndPercent = function convertToSeriesColumnChartAndPercent(dataCharts, data) {
-  return dataCharts.map(function (dataName) {
-    return {
-      name: dataName,
-      data: data.map(function (i) {
-        var questionItem = i.resultQuestion.find(function (question) {
-          return question.questionText.includes(dataName);
-        });
-        return !!questionItem ? questionItem.avgOfStudentChoice : 0;
-      })
-    };
-  });
-};
-var convertToAvg = function convertToAvg(dataCharts, data, months) {
-  return dataCharts.map(function (dataName) {
-    return Number((data.map(function (i) {
-      var questionItem = i.resultQuestion.find(function (question) {
-        return question.questionText.includes(dataName);
-      });
-      return !!questionItem ? questionItem.avgOfStudentChoice : 0;
-    }).reduce(function (acc, curr) {
+var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
+  return {
+    chart: {
+      height: 350,
+      stacked: false,
+      toolbar: {
+        show: false
+      }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 5
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    fill: {
+      opacity: 0.5
+    },
+    colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
+      return activeData[index];
+    }),
+    stroke: {
+      curve: "smooth",
+      show: false,
+      colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
+        return activeData[index];
+      }),
+      width: 3,
+      dashArray: 0
+    },
+    xaxis: {
+      categories: months,
+      labels: {
+        show: true,
+        style: {
+          colors: ["#808080"],
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        }
+      }
+    },
+    yaxis: {
+      tickAmount: 2,
+      min: 0,
+      max: 100,
+      labels: {
+        show: true,
+        align: "right",
+        minWidth: 0,
+        maxWidth: 160,
+        style: {
+          colors: ["#808080"],
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        },
+        formatter: function formatter(value) {
+          return value + "%";
+        },
+        offsetX: 0,
+        offsetY: 0,
+        rotate: 0
+      },
+      decimalsInFloat: 0
+    },
+    tooltip: {
+      y: {
+        formatter: function formatter(value) {
+          return value.toFixed(2) + "%";
+        }
+      },
+      onDatasetHover: {
+        highlightDataSeries: true
+      }
+    },
+    legend: {
+      show: false
+    }
+  };
+};
+var convertDataToDataChart = function convertDataToDataChart(data) {
+  return data.reduce(function (acc, cur) {
+    return [].concat(acc, cur.resultQuestion.map(function (i) {
+      var quests = i.questionText.split("</p>");
+      return quests[0].replace("<p>", "").trim();
+    }).filter(function (i) {
+      return !!i && !acc.includes(i);
+    }));
+  }, []);
+};
+var convertToSeriesColumnChartAndPercent = function convertToSeriesColumnChartAndPercent(dataCharts, data) {
+  return dataCharts.map(function (dataName) {
+    return {
+      name: dataName,
+      data: data.map(function (i) {
+        var questionItem = i.resultQuestion.find(function (question) {
+          return question.questionText.includes(dataName);
+        });
+        return !!questionItem ? questionItem.avgOfStudentChoice : 0;
+      })
+    };
+  });
+};
+var convertToAvg = function convertToAvg(dataCharts, data, months) {
+  return dataCharts.map(function (dataName) {
+    return Number((data.map(function (i) {
+      var questionItem = i.resultQuestion.find(function (question) {
+        return question.questionText.includes(dataName);
+      });
+      return !!questionItem ? questionItem.avgOfStudentChoice : 0;
+    }).reduce(function (acc, curr) {
       return acc + curr;
     }, 0) / months.length).toFixed(2));
   });
@@ -26113,10 +26418,10 @@ var seriesNameBubbleChartCustom = function seriesNameBubbleChartCustom(series) {
     return i.questionText.replace("<p>", "").replace("</p>", "");
   });
 };
-var mergeBarChartAndArea = function mergeBarChartAndArea(series) {
+var mergeBarChartAndArea = function mergeBarChartAndArea(series, isHasLineChart) {
   var barChartSeries = series.map(function (i) {
     return _extends({}, i, {
-      type: "bar"
+      type: isHasLineChart ? "line" : "bar"
     });
   });
   var areaChartSeries = series.map(function (i) {
@@ -26127,9 +26432,9 @@ var mergeBarChartAndArea = function mergeBarChartAndArea(series) {
   return [].concat(barChartSeries, areaChartSeries);
 };
 var getLastQuarterRange = function getLastQuarterRange() {
-  var curQuarter = moment().quarter();
-  var start = moment().quarter(curQuarter).startOf("quarter").valueOf();
-  var end = moment().quarter(curQuarter).endOf("quarter").valueOf();
+  var lastQuarter = moment().utc().quarter() - 1;
+  var start = lastQuarter ? moment().utc().quarter(lastQuarter).startOf("quarter").valueOf() : moment().add(-1, "years").utc().quarter(4).startOf("quarter").valueOf();
+  var end = lastQuarter ? moment().utc().quarter(lastQuarter).endOf("quarter").valueOf() : moment().add(-1, "years").utc().quarter(4).endOf("quarter").valueOf();
   return {
     start: start,
     end: end
@@ -26138,30 +26443,89 @@ var getLastQuarterRange = function getLastQuarterRange() {
 var filterYearData = [{
   label: "This Year",
   value: FILTER_YEAR.THIS_YEAR,
-  startDate: moment().startOf("year").valueOf(),
-  endDate: moment().endOf("day").valueOf()
+  startDate: moment().utc().startOf("year").valueOf(),
+  endDate: moment().utc().endOf("day").valueOf()
 }, {
   label: "Last Year",
   value: FILTER_YEAR.LAST_YEAR,
-  startDate: moment().add(-1, "years").startOf("year").valueOf(),
-  endDate: moment().add(-1, "years").endOf("year").valueOf()
+  startDate: moment().utc().add(-1, "years").startOf("year").valueOf(),
+  endDate: moment().utc().add(-1, "years").endOf("year").valueOf()
 }, {
   label: "Last Quarter",
   value: FILTER_YEAR.LAST_QUARTER,
   startDate: getLastQuarterRange().start,
   endDate: getLastQuarterRange().end
 }, {
-  label: "Last 30 day",
+  label: "Last 30 Day",
   value: FILTER_YEAR.LAST_MONTH,
-  startDate: moment().add(-1, "months").startOf("month").valueOf(),
-  endDate: moment().add(-1, "months").endOf("month").valueOf()
+  startDate: moment().utc().add(-30, "days").startOf("day").valueOf(),
+  endDate: moment().utc().endOf("day").valueOf()
 }, {
   label: "Last Day",
   value: FILTER_YEAR.LAST_DAY,
-  startDate: moment().add(-1, "days").startOf("day").valueOf(),
-  endDate: moment().add(-1, "days").endOf("day").valueOf()
+  startDate: moment().utc().add(-1, "days").startOf("day").valueOf(),
+  endDate: moment().utc().add(-1, "days").endOf("day").valueOf()
 }];
 
+var BubbleChartCustom = function BubbleChartCustom(_ref) {
+  var data = _ref.data;
+  if (!data) return React__default.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React__default.createElement("div", null, "No Data"));
+  var seriesName = seriesNameBubbleChartCustom(data);
+  return React__default.createElement("div", {
+    className: styles$1["bubble-chart-custom"]
+  }, React__default.createElement("div", {
+    className: styles$1["chart-custom"]
+  }, React__default.createElement("div", {
+    className: styles$1["list-percent"]
+  }, PERCENT.map(function (i, index) {
+    return React__default.createElement("div", {
+      className: "" + styles$1["percent-item"],
+      key: index
+    }, i, "%");
+  })), React__default.createElement("div", {
+    className: styles$1["chart-buddle"]
+  }, React__default.createElement("div", null, React__default.createElement(Chart, {
+    options: readinesToLearnoptions(seriesName),
+    type: "scatter",
+    series: convertDataToSeriesBullderChart(data),
+    width: "100%",
+    height: 450
+  }))), React__default.createElement("div", {
+    className: styles$1["x-axis-custom-wrap"]
+  }, React__default.createElement("div", {
+    className: styles$1["axis-content"]
+  }, seriesName.map(function (i, index) {
+    return React__default.createElement("div", {
+      key: index
+    }, i);
+  }))), React__default.createElement("div", {
+    className: styles$1["legend-wrap"]
+  }, seriesName.map(function (i, index) {
+    return React__default.createElement("div", {
+      className: "" + styles$1["item"],
+      key: index
+    }, React__default.createElement("div", {
+      className: "" + styles$1["mark-custom"],
+      style: {
+        backgroundColor: COLOR_CHART_BUBBLE[index]
+      }
+    }), React__default.createElement("label", {
+      className: "" + styles$1["label-legend-custom"]
+    }, i));
+  }))));
+};
+
+function propsAreEqual(prevProps, nextProps) {
+  return JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.data) === JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.data);
+}
+
+var BubbleChartCustom$1 = React__default.memo(BubbleChartCustom, propsAreEqual);
+
 var AreaChart = function AreaChart(_ref) {
   var series = _ref.series,
       months = _ref.months,
@@ -26191,8 +26555,10 @@ var BarChart = function BarChart(_ref) {
 var BarAndAreaChart = function BarAndAreaChart(_ref) {
   var series = _ref.series,
       months = _ref.months,
-      activeColumn = _ref.activeColumn;
-  var newseries = mergeBarChartAndArea(series);
+      activeColumn = _ref.activeColumn,
+      _ref$isHasLineChart = _ref.isHasLineChart,
+      isHasLineChart = _ref$isHasLineChart === void 0 ? false : _ref$isHasLineChart;
+  var newseries = mergeBarChartAndArea(series, isHasLineChart);
   return React__default.createElement(Chart, {
     options: optionBarChartAndArea(months, activeColumn),
     type: "line",
@@ -26202,18 +26568,31 @@ var BarAndAreaChart = function BarAndAreaChart(_ref) {
   });
 };
 
-var TYPECHART;
-
-(function (TYPECHART) {
-  TYPECHART[TYPECHART["AREA"] = 0] = "AREA";
-  TYPECHART[TYPECHART["BAR"] = 1] = "BAR";
-  TYPECHART[TYPECHART["BOTH"] = 2] = "BOTH";
-})(TYPECHART || (TYPECHART = {}));
+var LineChart = function LineChart(_ref) {
+  var series = _ref.series,
+      months = _ref.months,
+      activeColumn = _ref.activeColumn;
+  return React__default.createElement(Chart, {
+    options: optionLineChart(months, activeColumn),
+    type: "line",
+    series: series,
+    width: "100%",
+    height: 450
+  });
+};
 
 var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
   var data = _ref.data,
       _ref$typeChart = _ref.typeChart,
-      typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart;
+      typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart,
+      _ref$isHasLineChart = _ref.isHasLineChart,
+      isHasLineChart = _ref$isHasLineChart === void 0 ? false : _ref$isHasLineChart;
+  if (!data) return React__default.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React__default.createElement("div", null, "No Data"));
 
   var _useState = React.useState([]),
       activeColumn = _useState[0],
@@ -26299,6 +26678,11 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
     activeColumn: activeColumn,
     series: series
   }), typeChart === TYPECHART.BOTH && React__default.createElement(BarAndAreaChart, {
+    months: months,
+    activeColumn: activeColumn,
+    series: series,
+    isHasLineChart: isHasLineChart
+  }), typeChart === TYPECHART.LINE && React__default.createElement(LineChart, {
     months: months,
     activeColumn: activeColumn,
     series: series
@@ -26325,226 +26709,23 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
   })));
 };
 
-var propsAreEqual = function propsAreEqual(preProps, nextProps) {
+var propsAreEqual$1 = function propsAreEqual(preProps, nextProps) {
   return JSON.stringify(preProps) === JSON.stringify(nextProps);
 };
 
-var ColumnChartAndPercent$1 = React__default.memo(ColumnChartAndPercent, propsAreEqual);
-
-var PlusButton = function PlusButton(_ref) {
-  var _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive;
-  return React__default.createElement("div", {
-    style: {
-      transform: isActive ? "rotate(45deg)" : ""
-    }
-  }, React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, React__default.createElement("rect", {
-    width: "24",
-    height: "24",
-    rx: "12",
-    fill: !isActive ? "#808080" : "#D9D9D9"
-  }), React__default.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M12.7143 7H11.2857V11.2857H7V12.7143H11.2857V17H12.7143V12.7143H17V11.2857H12.7143V7Z",
-    fill: "white"
-  })));
-};
-
-var HeaderChart = function HeaderChart(_ref) {
-  var title = _ref.title,
-      isOpen = _ref.isOpen,
-      onToggle = _ref.onToggle,
-      _ref$isShowChangeChar = _ref.isShowChangeChart,
-      isShowChangeChart = _ref$isShowChangeChar === void 0 ? false : _ref$isShowChangeChar,
-      _ref$typeChart = _ref.typeChart,
-      typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart,
-      onChangeChart = _ref.onChangeChart;
-  return React__default.createElement("div", {
-    className: "d-flex justify-content-between align-items-center " + styles$1["header-chart"] + " "
-  }, React__default.createElement("div", {
-    className: "" + styles$1["header-left"]
-  }, React__default.createElement("span", {
-    className: styles$1["header-title"] + " pr-2"
-  }, title), React__default.createElement("i", {
-    className: styles$1["icon-chart"] + " fal fa-info-circle cursor-pointer"
-  })), React__default.createElement("div", {
-    className: "" + styles$1["header-right"]
-  }, isOpen && isShowChangeChart && React__default.createElement("div", {
-    className: "d-flex align-items-center d-inline-block pr-4"
-  }, React__default.createElement("div", {
-    className: "d-flex align-items-center px-2 " + styles$1["checkbox-chart"]
-  }, React__default.createElement("div", {
-    className: "pr-4 d-flex",
-    onClick: function onClick() {
-      return onChangeChart(TYPECHART.AREA);
-    },
-    style: {
-      cursor: "pointer"
-    }
-  }, React__default.createElement(CheckboxCustom, {
-    width: 16,
-    height: 16,
-    isActive: typeChart === TYPECHART.AREA || typeChart === TYPECHART.BOTH,
-    className: "pr-2"
-  }), React__default.createElement("label", {
-    className: "" + styles$1["label-chart"],
-    style: {
-      color: "#252733",
-      marginBottom: 0,
-      cursor: "pointer"
-    }
-  }, "Ridge charts"))), React__default.createElement("div", {
-    className: "d-inline-block px-2  " + styles$1["checkbox-chart"]
-  }, React__default.createElement("div", {
-    className: "pr-4 d-flex",
-    onClick: function onClick() {
-      return onChangeChart(TYPECHART.BAR);
-    },
-    style: {
-      cursor: "pointer"
-    }
-  }, React__default.createElement(CheckboxCustom, {
-    width: 16,
-    height: 16,
-    isActive: typeChart === TYPECHART.BAR || typeChart === TYPECHART.BOTH,
-    className: "pr-2"
-  }), React__default.createElement("label", {
-    className: "" + styles$1["label-chart"],
-    style: {
-      color: "#252733",
-      marginBottom: 0,
-      cursor: "pointer"
-    }
-  }, "Line charts")))), React__default.createElement("i", {
-    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"]
-  }), React__default.createElement("div", {
-    onClick: onToggle,
-    className: styles$1["btn-show-chart"],
-    style: {
-      cursor: "pointer"
-    }
-  }, React__default.createElement(PlusButton, {
-    isActive: isOpen
-  }))));
-};
-
-var INITIAL_CHART_STATUS = [false, false, false, false, false, false, false, false, false];
-var INITIAL_TYPE_CHART = [TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR];
-
-var useBehavior = function useBehavior() {
-  var _useState = React.useState([].concat(INITIAL_CHART_STATUS)),
-      chartIsOpened = _useState[0],
-      setChartIsOpened = _useState[1];
-
-  var _useState2 = React.useState(INITIAL_TYPE_CHART),
-      typeChartList = _useState2[0],
-      setTypeChartList = _useState2[1];
-
-  var onToggle = function onToggle(idx) {
-    var newStateChart = [].concat(chartIsOpened);
-    newStateChart[idx] = !newStateChart[idx];
-    setChartIsOpened(newStateChart);
-  };
-
-  var onChangeChart = function onChangeChart(idx, type) {
-    if (type !== typeChartList[idx] && typeChartList[idx] !== TYPECHART.BOTH) {
-      setTypeChartList(typeChartList.map(function (cur, index) {
-        return index === idx ? TYPECHART.BOTH : cur;
-      }));
-      return;
-    }
-
-    if (typeChartList[idx] === TYPECHART.BOTH && type === TYPECHART.AREA) {
-      setTypeChartList(typeChartList.map(function (cur, index) {
-        return index === idx ? TYPECHART.BAR : cur;
-      }));
-      return;
-    }
-
-    if (typeChartList[idx] === TYPECHART.BOTH && type === TYPECHART.BAR) {
-      setTypeChartList(typeChartList.map(function (cur, index) {
-        return index === idx ? TYPECHART.AREA : cur;
-      }));
-      return;
-    }
-
-    setTypeChartList(typeChartList.map(function (cur, index) {
-      return index === idx ? type : cur;
-    }));
-  };
-
-  return {
-    chartIsOpened: chartIsOpened,
-    onToggle: onToggle,
-    onChangeChart: onChangeChart,
-    typeChartList: typeChartList
-  };
-};
-
-var BubbleChartCustom = function BubbleChartCustom(_ref) {
-  var data = _ref.data;
-  var seriesName = seriesNameBubbleChartCustom(data);
-  return React__default.createElement("div", {
-    className: styles$1["bubble-chart-custom"]
-  }, React__default.createElement("div", {
-    className: styles$1["chart-custom"]
-  }, React__default.createElement("div", {
-    className: styles$1["list-percent"]
-  }, PERCENT.map(function (i, index) {
-    return React__default.createElement("div", {
-      className: "" + styles$1["percent-item"],
-      key: index
-    }, i, "%");
-  })), React__default.createElement("div", {
-    className: styles$1["chart-buddle"]
-  }, React__default.createElement("div", null, React__default.createElement(Chart, {
-    options: readinesToLearnoptions(data, seriesName),
-    type: "scatter",
-    series: convertDataToSeriesBullderChart(data),
-    width: "100%",
-    height: 450
-  }))), React__default.createElement("div", {
-    className: styles$1["x-axis-custom-wrap"]
-  }, React__default.createElement("div", {
-    className: styles$1["axis-content"]
-  }, seriesName.map(function (i, index) {
-    return React__default.createElement("div", {
-      key: index
-    }, i);
-  }))), React__default.createElement("div", {
-    className: styles$1["legend-wrap"]
-  }, seriesName.map(function (i, index) {
-    return React__default.createElement("div", {
-      className: "" + styles$1["item"],
-      key: index
-    }, React__default.createElement("div", {
-      className: "" + styles$1["mark-custom"],
-      style: {
-        backgroundColor: COLOR_CHART_BUBBLE[index]
-      }
-    }), React__default.createElement("label", {
-      className: "" + styles$1["label-legend-custom"]
-    }, i));
-  }))));
-};
-
-function propsAreEqual$1(prevProps, nextProps) {
-  return JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.data) === JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.data);
-}
-
-var BubbleChartCustom$1 = React__default.memo(BubbleChartCustom, propsAreEqual$1);
+var ColumnChartAndPercent$1 = React__default.memo(ColumnChartAndPercent, propsAreEqual$1);
 
 var CustomPieChart = function CustomPieChart(_ref) {
   var data = _ref.data;
+  if (!data) return React__default.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React__default.createElement("div", null, "No Data"));
   var series = Object.values(data).reverse();
-  var femalePropotion = Number((series[0] / (series[0] + series[1]) * 100).toFixed(2));
+  var femalePropotion = series[0] / (series[0] + series[1]) * 100;
+  var roundFemalePropotion = Math.round(femalePropotion) !== femalePropotion ? femalePropotion.toFixed(2) : femalePropotion;
   return React__default.createElement("div", {
     className: styles$1["pie-chart"]
   }, series.filter(function (i) {
@@ -26572,7 +26753,7 @@ var CustomPieChart = function CustomPieChart(_ref) {
     className: styles$1["text-lengend"]
   }, series[1]), React__default.createElement("div", {
     className: styles$1["text-lengend"]
-  }, "(", (100 - femalePropotion).toFixed(2), "%)")), React__default.createElement("div", {
+  }, "(", 100 - Number(roundFemalePropotion), "%)")), React__default.createElement("div", {
     className: styles$1["legend"]
   }, React__default.createElement("div", {
     className: styles$1["mark-custom"],
@@ -26585,7 +26766,7 @@ var CustomPieChart = function CustomPieChart(_ref) {
     className: styles$1["text-lengend"]
   }, series[0]), React__default.createElement("div", {
     className: styles$1["text-lengend"]
-  }, "(", femalePropotion, "%)")))) : React__default.createElement("img", {
+  }, "(", roundFemalePropotion, "%)")))) : React__default.createElement("img", {
     className: "" + styles$1["image-no-data"],
     src: "images/no-data-haft-pie.png"
   }));
@@ -26593,6 +26774,12 @@ var CustomPieChart = function CustomPieChart(_ref) {
 
 var StudentByAge = function StudentByAge(_ref) {
   var data = _ref.data;
+  if (!data) return React__default.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React__default.createElement("div", null, "No Data"));
   var series = convertDataStudentByAgeToSeries(data);
   var totalStudent = totalStudentByAge(data);
   return React__default.createElement("div", {
@@ -26637,6 +26824,12 @@ var StudentByAgeAndGender$1 = React__default.memo(StudentByAgeAndGender, propsAr
 
 var StudentByGrade = function StudentByGrade(_ref) {
   var data = _ref.data;
+  if (!data) return React__default.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React__default.createElement("div", null, "No Data"));
   var series = convertDataToSeriesStudentByGrade(data);
   var totalStudent = findTotalStudentByGrade(data);
   return React__default.createElement("div", {
@@ -27125,7 +27318,8 @@ var useChartDatas = function useChartDatas() {
         data: topLearningStrategies
       });
     },
-    isShowChangeChart: false
+    isShowChangeChart: false,
+    options: []
   }, {
     id: "Readiness_to_learn",
     label: "Readiness to learn",
@@ -27134,7 +27328,8 @@ var useChartDatas = function useChartDatas() {
         data: readinessToLearning
       });
     },
-    isShowChangeChart: false
+    isShowChangeChart: false,
+    options: []
   }, {
     id: "1_to_1",
     label: "1 To 1",
@@ -27145,7 +27340,14 @@ var useChartDatas = function useChartDatas() {
         typeChart: typeChart
       });
     },
-    isShowChangeChart: true
+    isShowChangeChart: true,
+    options: [{
+      label: "Ridge charts",
+      value: TYPECHART.AREA
+    }, {
+      label: "Bar charts",
+      value: TYPECHART.BAR
+    }]
   }, {
     id: "class_reflection",
     label: "Class Reflection",
@@ -27153,10 +27355,18 @@ var useChartDatas = function useChartDatas() {
       return React__default.createElement(ColumnChartAndPercent$1, {
         data: chartClassReflection.overviewQuestionChoice,
         typeChart: typeChart,
-        id: "class_reflection"
+        id: "class_reflection",
+        isHasLineChart: true
       });
     },
-    isShowChangeChart: true
+    isShowChangeChart: true,
+    options: [{
+      label: "Ridge charts",
+      value: TYPECHART.AREA
+    }, {
+      label: "Line charts",
+      value: TYPECHART.LINE
+    }]
   }, {
     id: "conference",
     label: "Conference",
@@ -27167,7 +27377,14 @@ var useChartDatas = function useChartDatas() {
         id: "conference"
       });
     },
-    isShowChangeChart: true
+    isShowChangeChart: true,
+    options: [{
+      label: "Ridge charts",
+      value: TYPECHART.AREA
+    }, {
+      label: "Bar charts",
+      value: TYPECHART.BAR
+    }]
   }, {
     id: "safety",
     label: "Safety",
@@ -27175,10 +27392,18 @@ var useChartDatas = function useChartDatas() {
       return React__default.createElement(ColumnChartAndPercent$1, {
         data: safety.overviewQuestionChoice,
         typeChart: typeChart,
-        id: "safety"
+        id: "safety",
+        isHasLineChart: true
       });
     },
-    isShowChangeChart: true
+    isShowChangeChart: true,
+    options: [{
+      label: "Ridge charts",
+      value: TYPECHART.AREA
+    }, {
+      label: "Line charts",
+      value: TYPECHART.LINE
+    }]
   }, {
     id: "Student_by_age",
     label: "Student by age",
@@ -27188,7 +27413,8 @@ var useChartDatas = function useChartDatas() {
         studentByGenderData: studentByGender
       });
     },
-    isShowChangeChart: false
+    isShowChangeChart: false,
+    options: []
   }, {
     id: "student_by_grade",
     label: "Students by Grade",
@@ -27197,8 +27423,12 @@ var useChartDatas = function useChartDatas() {
         data: studentByGrade
       });
     },
-    isShowChangeChart: false
+    isShowChangeChart: false,
+    options: []
   }];
+  var initialTypeChart = chartDashBoards.map(function (i) {
+    return i.options.length > 0 ? i.options[1].value : TYPECHART.BAR;
+  });
   var totalCardData = [{
     icon: "images/icon_chart.png",
     title: "Total 1-to-1:",
@@ -27242,7 +27472,8 @@ var useChartDatas = function useChartDatas() {
     LIST_FILTERS_LEFT: LIST_FILTERS_LEFT,
     LIST_FILTERS_RIGHT: LIST_FILTERS_RIGHT,
     totalCardData: totalCardData,
-    onChangeFilters: onChangeFilters
+    onChangeFilters: onChangeFilters,
+    initialTypeChart: initialTypeChart
   };
 };
 
@@ -27251,7 +27482,9 @@ var StudentItemSelector = function StudentItemSelector(_ref) {
       onChange = _ref.onChange,
       externalStudentIds = _ref.externalStudentIds,
       studentDefault = _ref.studentDefault,
-      teacherUserId = _ref.teacherUserId;
+      teacherUserId = _ref.teacherUserId,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? "Search student" : _ref$placeholder;
   var dispatch = reactRedux.useDispatch();
 
   var _useState = React.useState([]),
@@ -27329,7 +27562,7 @@ var StudentItemSelector = function StudentItemSelector(_ref) {
       return setSearchString(inputValue);
     },
     isLoading: isLoading,
-    placeholder: "Search student",
+    placeholder: placeholder,
     defaultValue: value,
     onChange: onChange,
     isClearable: true
@@ -27384,16 +27617,18 @@ var TeacherItemSelector = function TeacherItemSelector(_ref) {
 };
 
 var SelectFilter = function SelectFilter(_ref) {
-  var teacherId = _ref.teacherId,
-      studentUserId = _ref.studentUserId,
+  var studentUserId = _ref.studentUserId,
       studentId = _ref.studentId,
-      teacherUserId = _ref.teacherUserId,
       studentDefault = _ref.studentDefault,
       handleChangeFilters = _ref.handleChangeFilters,
       name = _ref.name,
       icon = _ref.icon,
       option = _ref.option,
-      onChangeFilters = _ref.onChangeFilters;
+      onChangeFilters = _ref.onChangeFilters,
+      btnStyle = _ref.btnStyle,
+      filter = _ref.filter,
+      teacherUserId = _ref.teacherUserId,
+      changeCurrentTeacherUserId = _ref.changeCurrentTeacherUserId;
 
   var _useState = React.useState(false),
       isOpenCollapse = _useState[0],
@@ -27664,6 +27899,7 @@ var SelectFilter = function SelectFilter(_ref) {
       }, React__default.createElement(TeacherItemSelector, {
         onChange: function onChange(e) {
           handleChangeFilters(e);
+          !!changeCurrentTeacherUserId && changeCurrentTeacherUserId(e.teacherUserId || "");
 
           if (!(e !== null && e !== void 0 && e.label)) {
             setTeacherName("");
@@ -27671,7 +27907,7 @@ var SelectFilter = function SelectFilter(_ref) {
             setTeacherName(e.label);
           }
         },
-        defaultValue: teacherId,
+        defaultValue: filter === null || filter === void 0 ? void 0 : filter.teacherId,
         studentUserId: studentUserId || ""
       })));
     }
@@ -27682,7 +27918,8 @@ var SelectFilter = function SelectFilter(_ref) {
         className: styles["block-filter-component"] + " "
       }, React__default.createElement("button", {
         onClick: handleToggleCollapse,
-        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer",
+        style: btnStyle
       }, React__default.createElement("img", {
         src: "" + icon,
         alt: name
@@ -27696,14 +27933,14 @@ var SelectFilter = function SelectFilter(_ref) {
 
           if (!(e !== null && e !== void 0 && e.label)) {
             setStudentName("");
-            setTeacherName("");
           } else {
             setStudentName(e.label);
           }
         },
         value: studentId,
         studentDefault: studentDefault,
-        teacherUserId: teacherUserId
+        teacherUserId: teacherUserId,
+        placeholder: "Type 2 characters to search"
       })));
     }
 
@@ -27740,13 +27977,16 @@ var Dashboard = function Dashboard() {
       LIST_FILTERS_LEFT = _useChartDatas.LIST_FILTERS_LEFT,
       LIST_FILTERS_RIGHT = _useChartDatas.LIST_FILTERS_RIGHT,
       totalCardData = _useChartDatas.totalCardData,
-      onChangeFilters = _useChartDatas.onChangeFilters;
+      onChangeFilters = _useChartDatas.onChangeFilters,
+      initialTypeChart = _useChartDatas.initialTypeChart;
 
-  var _useBehavior = useBehavior(),
+  var _useBehavior = useBehavior(initialTypeChart),
       chartIsOpened = _useBehavior.chartIsOpened,
       _onToggle = _useBehavior.onToggle,
       _onChangeChart = _useBehavior.onChangeChart,
-      typeChartList = _useBehavior.typeChartList;
+      typeChartList = _useBehavior.typeChartList,
+      teacherUserId = _useBehavior.teacherUserId,
+      changeCurrentTeacherUserId = _useBehavior.changeCurrentTeacherUserId;
 
   return React__default.createElement("div", {
     className: "" + styles$1["block-dashboard"]
@@ -27792,7 +28032,13 @@ var Dashboard = function Dashboard() {
       filter: filter,
       studentId: e.studentId || 0,
       studentDefault: e.studentDefault,
-      onChangeFilters: onChangeFilters
+      onChangeFilters: onChangeFilters,
+      teacherUserId: teacherUserId,
+      changeCurrentTeacherUserId: changeCurrentTeacherUserId,
+      btnStyle: e.name === FILTER_NAME.StudentName ? {
+        minWidth: 220,
+        justifyContent: "center"
+      } : {}
     });
   }))), React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-between flex-wrap mb-3"
@@ -27819,7 +28065,8 @@ var Dashboard = function Dashboard() {
       onChangeChart: function onChangeChart(type) {
         return _onChangeChart(index, type);
       },
-      isOpen: chartIsOpened[index]
+      isOpen: chartIsOpened[index],
+      options: chartDashBoard.options
     }), React__default.createElement(reactstrap.Collapse, {
       isOpen: chartIsOpened[index]
     }, chartDashBoard.children(typeChartList[index])));