mario-education 2.4.126-admin → 2.4.127-admin

package/dist/index.js

@@ -1212,6 +1212,7 @@ var FILTER_NAME;
   FILTER_NAME["TeacherName"] = "teacher_name";
   FILTER_NAME["StartDate"] = "start_date";
   FILTER_NAME["EndDate"] = "end_date";
+  FILTER_NAME["FavoriteSurvey"] = "favorite_survey";
 })(FILTER_NAME || (FILTER_NAME = {}));
 
 var header$1 = "Conference rubric";
@@ -1711,6 +1712,48 @@ function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure undefined");
 }
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it;
+
+  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      return function () {
+        if (i >= o.length) return {
+          done: true
+        };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  it = o[Symbol.iterator]();
+  return it.next.bind(it);
+}
+
 var RubricItemColumnOrder;
 
 (function (RubricItemColumnOrder) {
@@ -29268,6 +29311,26 @@ var getGrades = function getGrades(studentUserId) {
 var getBandScore = function getBandScore() {
   return marioCore.api.get("" + BAND_SCORE);
 };
+var getTopMostSurveyUsed = function getTopMostSurveyUsed(filter) {
+  return marioCore.api.get(REPORT_URL + "/top-most-survey-used", {
+    params: filter
+  });
+};
+var getAllTotalSurvey = function getAllTotalSurvey(filter) {
+  return marioCore.api.get(REPORT_URL + "/dashboard-survey-total", {
+    params: filter
+  });
+};
+var getDashboardFlagSurvey = function getDashboardFlagSurvey(filters) {
+  return marioCore.api.get(REPORT_URL + "/get-dashboard-flag-survey", {
+    params: filters
+  });
+};
+var getDashboardTemplateSurvey = function getDashboardTemplateSurvey(filters) {
+  return marioCore.api.get(REPORT_URL + "/get-dashboard-template-survey", {
+    params: filters
+  });
+};
 
 var TITLE$y = "Dashboard";
 
@@ -29957,7 +30020,8 @@ var SelectFilter = function SelectFilter(_ref) {
       label: "All"
     },
     grade: -1,
-    bandScore: -1
+    bandScore: -1,
+    favoriteSurvey: -1
   }),
       labelBox = _useState2[0],
       setLabelBox = _useState2[1];
@@ -30018,6 +30082,22 @@ var SelectFilter = function SelectFilter(_ref) {
     }
   };
 
+  var onChangeFavoriteSurvey = function onChangeFavoriteSurvey(favoriteSurvey) {
+    setLabelBox(_extends({}, labelBox, {
+      favoriteSurvey: favoriteSurvey.value
+    }));
+
+    if (favoriteSurvey.value == -1) {
+      !!onChangeFilters && onChangeFilters({
+        favoriteSurvey: []
+      });
+    } else {
+      !!onChangeFilters && onChangeFilters({
+        favoriteSurvey: [favoriteSurvey.value]
+      });
+    }
+  };
+
   var onChangeCalendar = function onChangeCalendar(calendar) {
     setLabelBox(_extends({}, labelBox, {
       calendarTime: calendar
@@ -30366,6 +30446,50 @@ var SelectFilter = function SelectFilter(_ref) {
       }))));
     }
 
+    if (name == FILTER_NAME.FavoriteSurvey) {
+      var _option$find3;
+
+      return React__default.createElement("div", {
+        key: "" + name,
+        className: styles["block-filter-component"] + " ",
+        ref: ref
+      }, React__default.createElement("button", {
+        onClick: handleToggleCollapse,
+        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+      }, React__default.createElement("img", {
+        src: "" + icon,
+        alt: name
+      }), React__default.createElement("p", {
+        className: styles["color-filter"] + " my-0 mx-2"
+      }, labelBox.favoriteSurvey === -1 ? "" + t(name) : option === null || option === void 0 ? void 0 : (_option$find3 = option.find(function (i) {
+        return i.value === labelBox.favoriteSurvey;
+      })) === null || _option$find3 === void 0 ? void 0 : _option$find3.label), !isOpenCollapse ? React__default.createElement(fi.FiChevronDown, null) : React__default.createElement(fi.FiChevronUp, null)), React__default.createElement("div", {
+        className: styles["select-filter-component"] + " " + (!isOpenCollapse && "" + styles["hidden"])
+      }, React__default.createElement(reactstrap.Form, {
+        className: styles["box-select"] + " " + styles["box-select-format"]
+      }, option === null || option === void 0 ? void 0 : option.map(function (e) {
+        return React__default.createElement(reactstrap.FormGroup, {
+          check: true,
+          className: "my-2 px-3",
+          key: "" + e.label
+        }, React__default.createElement(reactstrap.Input, {
+          id: e.label + "favorite",
+          name: "favorite",
+          value: [e.label],
+          type: "radio",
+          className: "" + styles["radio-btn"],
+          checked: labelBox.favoriteSurvey === e.value,
+          onChange: function onChange() {
+            return onChangeFavoriteSurvey(e);
+          }
+        }), React__default.createElement(reactstrap.Label, {
+          check: true,
+          "for": e.label + "favorite",
+          className: "" + styles["box-select-label"]
+        }, React__default.createElement("p", null, e.label)));
+      }))));
+    }
+
     return React__default.createElement("div", null);
   };
 
@@ -31585,6 +31709,1522 @@ var AdminTraining = function AdminTraining() {
   })));
 };
 
+var styles$2 = {"dashboard-card":"_3U9cF","quantity-table":"_3lYP4","label-chart":"_EIKHR","size-icon":"_3waCS","block-dashboard":"_2n_zv","size-arrow":"_36sKX","color-down":"_1TjNf","color-up":"_i4rwq","box-filter":"_BlYR7","title-card":"_3fBK1","value-card":"_2w6yc","deviant-card":"_1aq6C","filter-card":"_2lX51","box-skill-item":"_jGO7A","numerical-order":"_2dXys","backoround-top-skill":"_3-8WB","color-filter":"_5QHKk","btn-filter":"_2UyJG","block-collapse":"_1SL-6","form-date-picker":"_pKQ8e","bock-filter-left":"_2eZGm","bock-filter-right":"_dz04Q","form-filter-right":"_OhjkA","form-filter-left":"_-q4tF","bock-filter-wrap":"_nukn6","title-card-box":"_2ysrj","box-item":"_37HdU","image-no-data":"_-jYtE","image-grade":"_2FOHk","chart-data":"_38Xgv","apexcharts-datalabels":"_3m9ET","apexcharts-pie-label":"_3QJAM","image-custom":"_11W3J","image-special-need":"_2-frJ","title-dashboard":"_1_YyD","box-chart":"_xbK6p","block-filter-right":"_11sYZ","shadow-lg":"_rFfwe","chart-header-wrapper":"_zLI7s","devide-component":"_OoZLR","header-chart":"_3mzht","header-left":"_2gXQT","icon-chart":"_3XABq","header-right":"_1FHsv","header-title":"_2JBD5","button-export":"_2OEd7","button-content":"_2nyRe","button-icon":"_31EdD","icon-config":"_TmymT","cursor-pointer":"_3X_ow","btn-show-chart":"_1qdL4","checkbox-chart":"_PghQI","column-chart-percent":"_12jqi","chart-background":"_2rwg5","custom-marker":"_3iwnG","mark-custom":"_rKYWD","item-legend":"_n_lnI","label-legend-custom":"_3hlTa","mark-legend":"_1LGIl","percent":"_1mr1m","listItem":"_E_ciE","item":"_27ojF","student-by-age":"_2KJYt","total-student":"_hEgnv","pie-chart":"_34-k0","options-gender":"_119UL","legend":"_tlvnI","text-lengend":"_2Ehxf","student-by-grade":"_L1RnZ","bubble-chart-custom":"_18zab","x-axis-custom-wrap":"_1NRsG","axis-content":"_1jDpB","legend-wrap":"_93MRp","list-percent":"_3ipHU","percent-item":"_35mGN","chart-custom":"_1769M","chart-buddle":"_ton1p","title-grade":"_2LTMk","title-modal":"_3f2-D","header-desc-modal":"_19k86","form-checkbox":"_2ZpLB","checkbox-content":"_jLDZ4","btn-export":"_2sMK7","title-chart":"_1E7vX","image-logo":"_3Xggx","chart-to-canvas":"_3zQW_","box-chart-title":"_2HMn5","chart-view-dashboard":"_1qtzK","chart-left":"_g4q-z","chart-right":"_9ibzA","block-header-chart":"_1s7DG","item-checkbox":"_5wSJP","check-box":"_1h1ro","legend-pie-custom":"_2MTrM","legend-item":"_2kriq","color-box":"_jOIdn"};
+
+var LegalGenderType$1;
+
+(function (LegalGenderType) {
+  LegalGenderType[LegalGenderType["None"] = 0] = "None";
+  LegalGenderType[LegalGenderType["Male"] = 1] = "Male";
+  LegalGenderType[LegalGenderType["Female"] = 2] = "Female";
+})(LegalGenderType$1 || (LegalGenderType$1 = {}));
+
+var MtssType$1;
+
+(function (MtssType) {
+  MtssType[MtssType["Tier1"] = 0] = "Tier1";
+  MtssType[MtssType["Tier2"] = 1] = "Tier2";
+  MtssType[MtssType["Tier3"] = 2] = "Tier3";
+})(MtssType$1 || (MtssType$1 = {}));
+
+var FILTER_YEAR$1;
+
+(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$1 || (FILTER_YEAR$1 = {}));
+
+var TYPECHART$1;
+
+(function (TYPECHART) {
+  TYPECHART[TYPECHART["AREA"] = 0] = "AREA";
+  TYPECHART[TYPECHART["BAR"] = 1] = "BAR";
+  TYPECHART[TYPECHART["LINE"] = 2] = "LINE";
+  TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
+})(TYPECHART$1 || (TYPECHART$1 = {}));
+
+var COLOR_CHART_AND_PERCENTS$1 = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
+
+var COLOR_CHART_AND_PIE = ["#5A7F05", "#C94645", "#FFB04F"];
+var COLOR_LABEL_PIE = ["#006E60", "#FF7670", "#994700"];
+var GRAGE_DEFAULT$1 = ["K", "G", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
+var LABEL_NAME_PIE_CHART = ["Green", "Red", "Yellow"];
+var INITIAl_STUDENT_DASHBOARD$1 = {
+  responseRate: 0,
+  totalSurvey: 0
+};
+var INIT_TOP_MOST_SURVEY_USED = {
+  nameSurvey: "",
+  sendDateSurvey: new Date(),
+  percentSurvey: 0
+};
+var COLOR_CHART_AND_PERCENTS$2 = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
+var DEFAULT_START_DATE$1 = moment().subtract(2, 'months').startOf("day").valueOf();
+var DEFAULT_END_DATE$1 = moment().endOf("day").valueOf();
+var CALENDAR_OPTIONS$1 = [{
+  label: "Today",
+  startDate: moment().startOf("day").valueOf(),
+  endDate: moment().endOf("day").valueOf()
+}, {
+  label: "This week",
+  startDate: moment().startOf("week").weekday(1).valueOf(),
+  endDate: moment().endOf("week").weekday(7).valueOf()
+}, {
+  label: "This month",
+  startDate: moment().startOf("month").valueOf(),
+  endDate: moment().endOf("month").valueOf()
+}];
+var COLOR_NAME = ["Green", "Red", "Yellow"];
+var TYPECHART$2;
+
+(function (TYPECHART) {
+  TYPECHART[TYPECHART["AREA"] = 0] = "AREA";
+  TYPECHART[TYPECHART["BAR"] = 1] = "BAR";
+  TYPECHART[TYPECHART["LINE"] = 2] = "LINE";
+  TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
+})(TYPECHART$2 || (TYPECHART$2 = {}));
+
+var topMostSurveyNameUsed = "top_5_most_survey_used";
+
+var TotalCard$1 = function TotalCard(_ref) {
+  var icon = _ref.icon,
+      title = _ref.title,
+      value = _ref.value;
+  return React__default.createElement("div", {
+    className: styles$2["title-card-box"] + " " + styles$2["box-item"] + " p-4 mb-2 shadow-md mr-3"
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center justify-content-center"
+  }, React__default.createElement("img", {
+    src: icon
+  }), React__default.createElement("p", {
+    className: styles$2["title-card"] + " m-0 mx-2"
+  }, title, ":")), React__default.createElement("div", {
+    className: "d-flex align-items-center justify-content-center mt-3"
+  }, React__default.createElement("p", {
+    className: "" + styles$2["value-card"]
+  }, value)));
+};
+
+var gradeOptions$1 = function gradeOptions(grades, studentUserId) {
+  var result = !studentUserId ? GRAGE_DEFAULT$1 : GRAGE_DEFAULT$1.filter(function (val) {
+    return grades.indexOf(val) != -1;
+  });
+  return result.map(function (grade, index) {
+    return {
+      label: grade,
+      value: index
+    };
+  });
+};
+var topMostSurveyChartOptions = function topMostSurveyChartOptions(labelNames, percentSurvey, isDonutChart) {
+  return {
+    legend: {
+      show: false,
+      fontFamily: 'Poppins-Regular !important'
+    },
+    chart: {
+      type: "bar",
+      toolbar: {
+        show: false
+      }
+    },
+    noData: {
+      text: "No data",
+      align: 'center',
+      verticalAlign: 'middle'
+    },
+    grid: {
+      strokeDashArray: 5,
+      borderColor: "#D3D3D3"
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        distributed: true,
+        borderRadius: 5
+      }
+    },
+    stroke: {
+      show: false,
+      width: 1,
+      colors: ["#fff"]
+    },
+    colors: ["#316CD9", "#5a89e1", "#83a7e8", "#adc4f0", "#eaf0fb"],
+    xaxis: {
+      categories: labelNames,
+      labels: {
+        show: true,
+        style: {
+          colors: ["#808080"],
+          fontSize: "14px",
+          fontFamily: 'Poppins-Regular !important',
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        }
+      }
+    },
+    labels: labelNames,
+    tooltip: {
+      x: {
+        formatter: function formatter(value) {
+          return value.toString();
+        }
+      },
+      y: {
+        formatter: function formatter(value) {
+          return value.toFixed(2).toString();
+        }
+      }
+    },
+    yaxis: {
+      min: 0,
+      max: 100,
+      labels: {
+        show: true,
+        align: "left",
+        minWidth: 0,
+        style: {
+          fontSize: "14px",
+          fontFamily: 'Poppins-Regular !important',
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        },
+        offsetX: 0,
+        offsetY: 0,
+        rotate: 0
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function formatter(val, opts) {
+        if (!val) {
+          return "";
+        }
+
+        if (!isDonutChart) {
+          return typeof val === "number" ? val.toFixed(2) + "%" : "" + val;
+        } else {
+          return percentSurvey[opts.seriesIndex];
+        }
+      },
+      style: {
+        colors: ["#FFFFFF", "#FFFFFF", "#FFFFFF", "#FFFFFF", "#242424"]
+      }
+    }
+  };
+};
+var getLastQuarterRange$1 = function getLastQuarterRange() {
+  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
+  };
+};
+var filterYearData$1 = [{
+  label: "This Year",
+  value: FILTER_YEAR$1.THIS_YEAR,
+  startDate: moment().utc().startOf("year").valueOf(),
+  endDate: moment().utc().endOf("day").valueOf()
+}, {
+  label: "Last Year",
+  value: FILTER_YEAR$1.LAST_YEAR,
+  startDate: moment().utc().add(-1, "years").startOf("year").valueOf(),
+  endDate: moment().utc().add(-1, "years").endOf("year").valueOf()
+}, {
+  label: "Last Quarter",
+  value: FILTER_YEAR$1.LAST_QUARTER,
+  startDate: getLastQuarterRange$1().start,
+  endDate: getLastQuarterRange$1().end
+}, {
+  label: "Last 30 Day",
+  value: FILTER_YEAR$1.LAST_MONTH,
+  startDate: moment().utc().add(-30, "days").startOf("day").valueOf(),
+  endDate: moment().utc().endOf("day").valueOf()
+}, {
+  label: "Last Day",
+  value: FILTER_YEAR$1.LAST_DAY,
+  startDate: moment().utc().add(-1, "days").startOf("day").valueOf(),
+  endDate: moment().utc().add(-1, "days").endOf("day").valueOf()
+}];
+
+var handleViewSeriesActive = function handleViewSeriesActive(active) {
+  var _active$filter;
+
+  var item = ((_active$filter = active.filter(function (r) {
+    return r == true;
+  })) === null || _active$filter === void 0 ? void 0 : _active$filter.length) || 0;
+  return Array.from(Array(item).keys());
+};
+var convertDataToDataChart$1 = function convertDataToDataChart(data) {
+  if (data.length > 0) {
+    return data.reduce(function (acc, cur) {
+      return [].concat(acc, cur.surveyTemplate.map(function (i) {
+        return i.templateName.trim();
+      }).filter(function (i) {
+        return !!i && !acc.includes(i);
+      }));
+    }, []);
+  }
+
+  return [];
+};
+var convertToSeriesTemplate = function convertToSeriesTemplate(data) {
+  return convertDataToDataChart$1(data).map(function (dataName) {
+    return {
+      name: dataName,
+      data: data.map(function (i) {
+        var questionItem = i.surveyTemplate.find(function (question) {
+          return question.templateName.includes(dataName);
+        });
+        return !!questionItem ? questionItem.avgTemplateSurvey : 0;
+      })
+    };
+  });
+};
+var mergeBarChartAndArea = function mergeBarChartAndArea(series) {
+  var barChartSeries = series.map(function (i) {
+    return _extends({}, i, {
+      type: "bar"
+    });
+  });
+  var areaChartSeries = series.map(function (i) {
+    return _extends({}, i, {
+      type: "area"
+    });
+  });
+  return [].concat(barChartSeries, areaChartSeries);
+};
+var convertToAvg = function convertToAvg(dataCharts, data, months) {
+  var result = dataCharts.map(function (dataName) {
+    return Number(data.map(function (i) {
+      var templateItem = i.surveyTemplate.find(function (question) {
+        return question.templateName.includes(dataName);
+      });
+      return !!templateItem ? templateItem.avgTemplateSurvey : 0;
+    }).reduce(function (acc, curr) {
+      return acc + curr;
+    }, 0) / (months === null || months === void 0 ? void 0 : months.length));
+  });
+  return result;
+};
+
+var TITLE$z = "Dashboard";
+
+var useDashboard$1 = function useDashboard() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState({
+    calendar: "",
+    studentIds: [],
+    studentId: undefined,
+    teacherId: undefined,
+    teacherUserId: "",
+    studentUserId: "",
+    bandScore: "",
+    grade: [],
+    startDate: DEFAULT_START_DATE$1,
+    endDate: DEFAULT_END_DATE$1
+  }),
+      filter = _useState[0],
+      setFilter = _useState[1];
+
+  var _useState2 = React.useState(INITIAl_STUDENT_DASHBOARD$1),
+      listSurveyTotal = _useState2[0],
+      setListSurveyTotal = _useState2[1];
+
+  var _useState3 = React.useState([INIT_TOP_MOST_SURVEY_USED]),
+      topMostSurveyUsed = _useState3[0],
+      setTopMostSurveyUsed = _useState3[1];
+
+  var _useState4 = React.useState([]),
+      templateSurveyDashboard = _useState4[0],
+      setTemplateSurveyDashboard = _useState4[1];
+
+  var _useState5 = React.useState([true]),
+      activeColumnResult = _useState5[0],
+      setActiveColumnResult = _useState5[1];
+
+  var _useState6 = React.useState([]),
+      avgResult = _useState6[0],
+      setAvgResult = _useState6[1];
+
+  var _useState7 = React.useState([]),
+      seriseResult = _useState7[0],
+      setSeriesResult = _useState7[1];
+
+  var _useState8 = React.useState([TYPECHART$2.BAR]),
+      typeChartList = _useState8[0],
+      setTypeChartList = _useState8[1];
+
+  var _useState9 = React.useState(),
+      surveyFlagData = _useState9[0],
+      setSurveyFlagData = _useState9[1];
+
+  var _useState10 = React.useState([]),
+      studentByGrade = _useState10[0],
+      setStudentByGrade = _useState10[1];
+
+  var user = reactRedux.useSelector(function (state) {
+    return state.common.user;
+  });
+
+  var _useState11 = React.useState(undefined),
+      studentDefault = _useState11[0],
+      setStudentDefault = _useState11[1];
+
+  var _useState12 = React.useState(""),
+      genderOfStudent = _useState12[0],
+      setGenderOfStudent = _useState12[1];
+
+  var handleChangeFilters = function handleChangeFilters(event) {
+    var _extends2;
+
+    setFilter(_extends({}, filter, (_extends2 = {}, _extends2[event.target.name] = event.target.value, _extends2)));
+  };
+
+  var callApi = React.useCallback(function (apiCaller, setData, defaultData, type) {
+    try {
+      var _temp2 = _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;
+
+        dispatch(marioCore.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
+        }));
+        setData(defaultData);
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [filter]);
+
+  var handleFilterTeacher = function handleFilterTeacher(option) {
+    if (option != null) {
+      setFilter(_extends({}, filter, {
+        teacherId: option ? option === null || option === void 0 ? void 0 : option.value : undefined,
+        teacherUserId: option === null || option === void 0 ? void 0 : option.teacherUserId
+      }));
+    } else {
+      setFilter(_extends({}, filter, {
+        teacherId: undefined,
+        teacherUserId: ""
+      }));
+    }
+  };
+
+  var handleFilterStudent = function handleFilterStudent(option) {
+    if (option != null) {
+      setGenderOfStudent(option === null || option === void 0 ? void 0 : option.gender);
+      setStudentDefault(option);
+      setFilter(_extends({}, filter, {
+        studentId: option ? option === null || option === void 0 ? void 0 : option.studentId : undefined,
+        studentUserId: option === null || option === void 0 ? void 0 : option.id
+      }));
+      return;
+    }
+
+    setGenderOfStudent("");
+    setStudentDefault(undefined);
+    setFilter(_extends({}, filter, {
+      grade: [],
+      studentId: undefined,
+      studentUserId: ""
+    }));
+    return;
+  };
+
+  var handleSaveGradeFilter = function handleSaveGradeFilter(grades) {
+    setFilter(_extends({}, filter, {
+      grade: grades
+    }));
+  };
+
+  var onChangeFilters = function onChangeFilters(filterSelect) {
+    setFilter(_extends({}, filter, filterSelect));
+  };
+
+  var callApiByStudentUserId = function callApiByStudentUserId(apiCaller, setData, studentUserId, defaultData) {
+    try {
+      var _temp5 = function _temp5() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp6 = _catch(function () {
+        return Promise.resolve(apiCaller(studentUserId)).then(function (res) {
+          res && setData(res.data);
+        });
+      }, function (err) {
+        var _err$response2, _err$response2$data;
+
+        dispatch(marioCore.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
+        }));
+        setData(defaultData);
+      });
+
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var getData = React.useCallback(function () {
+    try {
+      document.title = TITLE$z;
+      dispatch(marioCore.setLoading(true));
+      return Promise.resolve(Promise.any([callApi(getAllTotalSurvey, setListSurveyTotal, []), callApi(getStudentByGrade, setStudentByGrade, []), callApi(getTopMostSurveyUsed, setTopMostSurveyUsed, []), callApi(getDashboardFlagSurvey, setSurveyFlagData, [])])).then(function () {
+        dispatch(marioCore.setLoading(false));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [filter]);
+
+  var handleActiveColumnOneToOne = function handleActiveColumnOneToOne(index) {
+    var _convertToSeriesTempl;
+
+    var newActiveColumn = [].concat(activeColumnResult);
+
+    if (newActiveColumn.filter(function (r) {
+      return r;
+    }).length >= 6 && newActiveColumn[index] === false) {
+      dispatch(marioCore.setAlert({
+        type: "danger",
+        message: "Maximum 6 options can be select at the same time"
+      }));
+      return;
+    }
+
+    newActiveColumn[index] = !newActiveColumn[index];
+    setActiveColumnResult(newActiveColumn);
+    setSeriesResult((_convertToSeriesTempl = convertToSeriesTemplate(templateSurveyDashboard)) === null || _convertToSeriesTempl === void 0 ? void 0 : _convertToSeriesTempl.filter(function (_, idx) {
+      return newActiveColumn[idx];
+    }));
+  };
+
+  var onChangeChart = React.useCallback(function (type) {
+    var indexType = typeChartList.findIndex(function (r) {
+      return r === type;
+    });
+    var newListTypeChart = typeChartList || [];
+
+    if (indexType >= 0) {
+      newListTypeChart.length > 1 && newListTypeChart.splice(indexType, 1);
+    } else {
+      newListTypeChart.push(type);
+    }
+
+    setTypeChartList([].concat(newListTypeChart));
+  }, [typeChartList]);
+  var getDashBoardTemplate = React.useCallback(function () {
+    try {
+      var _temp9 = function _temp9() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp10 = _catch(function () {
+        return Promise.resolve(getDashboardTemplateSurvey(filter)).then(function (res) {
+          if (!!res) {
+            var dataConvert = convertToSeriesTemplate(res.data);
+            var dataChart = convertDataToDataChart$1(res.data);
+            var avg = convertToAvg(dataChart, res.data, res.data.map(function (r) {
+              return r.month || "";
+            }));
+            setAvgResult(avg);
+            setTemplateSurveyDashboard(res.data);
+            setSeriesResult(dataConvert.filter(function (_, idx) {
+              return activeColumnResult[idx];
+            }));
+
+            if (activeColumnResult.filter(function (r) {
+              return r == true;
+            }).length == 0 || activeColumnResult.length != activeColumnResult.length) {
+              setActiveColumnResult([true].concat(dataConvert.map(function (_i) {
+                return false;
+              }).splice(0, dataConvert.length - 1)));
+            }
+          }
+        });
+      }, function (err) {
+        var _err$response3, _err$response3$data;
+
+        dispatch(marioCore.setAlert({
+          type: "danger",
+          message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [filter, activeColumnResult]);
+  React.useEffect(function () {
+    getData();
+    getDashBoardTemplate();
+  }, [filter]);
+  React.useEffect(function () {
+    !!filter.studentUserId && callApiByStudentUserId(getGrades, handleSaveGradeFilter, filter.studentUserId, []);
+  }, [filter.studentUserId]);
+  return {
+    setFilter: setFilter,
+    filter: filter,
+    listSurveyTotal: listSurveyTotal,
+    studentByGrade: studentByGrade,
+    handleChangeFilters: handleChangeFilters,
+    user: user,
+    studentDefault: studentDefault,
+    setStudentDefault: setStudentDefault,
+    genderOfStudent: genderOfStudent,
+    setGenderOfStudent: setGenderOfStudent,
+    handleFilterStudent: handleFilterStudent,
+    handleFilterTeacher: handleFilterTeacher,
+    onChangeFilters: onChangeFilters,
+    topMostSurveyUsed: topMostSurveyUsed,
+    surveyFlagData: surveyFlagData,
+    templateSurveyDashboard: templateSurveyDashboard,
+    avgResult: avgResult,
+    seriseResult: seriseResult,
+    activeColumnResult: activeColumnResult,
+    handleActiveColumnOneToOne: handleActiveColumnOneToOne,
+    typeChartList: typeChartList,
+    onChangeChart: onChangeChart
+  };
+};
+
+var useChartDatas$1 = function useChartDatas() {
+  var _useDashboard = useDashboard$1(),
+      topMostSurveyUsed = _useDashboard.topMostSurveyUsed,
+      handleChangeFilters = _useDashboard.handleChangeFilters,
+      user = _useDashboard.user,
+      studentDefault = _useDashboard.studentDefault,
+      handleFilterStudent = _useDashboard.handleFilterStudent,
+      filter = _useDashboard.filter,
+      listSurveyTotal = _useDashboard.listSurveyTotal,
+      onChangeFilters = _useDashboard.onChangeFilters,
+      surveyFlagData = _useDashboard.surveyFlagData,
+      templateSurveyDashboard = _useDashboard.templateSurveyDashboard,
+      avgResult = _useDashboard.avgResult,
+      seriseResult = _useDashboard.seriseResult,
+      activeColumnResult = _useDashboard.activeColumnResult,
+      handleActiveColumnOneToOne = _useDashboard.handleActiveColumnOneToOne,
+      typeChartList = _useDashboard.typeChartList,
+      onChangeChart = _useDashboard.onChangeChart;
+
+  var _useState = React.useState([]),
+      selectedToPrint = _useState[0],
+      setSelectedToPrint = _useState[1];
+
+  var handleSelectToPrint = function handleSelectToPrint(checked, data, chartType) {
+    var updateSelectToPrint = [].concat(selectedToPrint);
+    var foundItem = updateSelectToPrint === null || updateSelectToPrint === void 0 ? void 0 : updateSelectToPrint.find(function (e) {
+      return e.identification == data.id;
+    });
+
+    if (checked) {
+      if (!!data.id && !foundItem) {
+        updateSelectToPrint.push({
+          chartIndex: data.chartIndex,
+          id: data.id,
+          identification: data.id,
+          label: data.label,
+          children: data.children,
+          chartType: chartType
+        });
+      }
+
+      if (!!data && foundItem && foundItem.id == null) {
+        var itemIndex = updateSelectToPrint.indexOf(foundItem);
+        updateSelectToPrint[itemIndex].id = data.id;
+        updateSelectToPrint[itemIndex].children = data.children;
+      }
+    } else {
+      var _itemIndex = updateSelectToPrint.indexOf(foundItem);
+
+      updateSelectToPrint[_itemIndex].id = null;
+      updateSelectToPrint[_itemIndex].children = null;
+    }
+
+    setSelectedToPrint(updateSelectToPrint);
+  };
+
+  var checkSelectedItem = function checkSelectedItem(id) {
+    for (var _iterator = _createForOfIteratorHelperLoose(selectedToPrint), _step; !(_step = _iterator()).done;) {
+      var item = _step.value;
+      if (item.id === id) return true;
+    }
+
+    return false;
+  };
+
+  var LIST_FILTERS_LEFT = [{
+    name: FILTER_NAME.Calendar,
+    icon: "/images/calendar.svg",
+    handleChangeFilters: handleChangeFilters,
+    option: CALENDAR_OPTIONS$1
+  }, {
+    name: FILTER_NAME.StartDate,
+    icon: "/images/calendar.svg",
+    handleChangeFilters: handleChangeFilters
+  }, {
+    name: FILTER_NAME.EndDate,
+    icon: "/images/calendar.svg",
+    handleChangeFilters: handleChangeFilters
+  }, {
+    name: FILTER_NAME.Grade,
+    icon: "/images/star-icon.svg",
+    handleChangeFilters: handleChangeFilters,
+    option: [{
+      value: -1,
+      label: "All"
+    }].concat(gradeOptions$1(filter.grade, filter.studentUserId))
+  }];
+  var LIST_FILTERS_RIGHT = [{
+    name: FILTER_NAME.StudentName,
+    icon: "/images/student-icon.svg",
+    handleChangeFilters: handleFilterStudent,
+    studentId: filter.studentId,
+    studentDefault: studentDefault
+  }, {
+    name: FILTER_NAME.FavoriteSurvey,
+    icon: "/images/teacher-icon.svg",
+    handleChangeFilters: handleChangeFilters,
+    option: [{
+      value: -1,
+      label: "All"
+    }, {
+      value: 1,
+      label: "Favorite Survey"
+    }]
+  }];
+  var totalCardData = [{
+    icon: "images/icon_chart.png",
+    title: "total_surveys",
+    value: listSurveyTotal === null || listSurveyTotal === void 0 ? void 0 : listSurveyTotal.totalSurvey,
+    isUp: true,
+    deviant: "2",
+    filter: "this week"
+  }, {
+    icon: "images/icon_watch.png",
+    title: "response_rate",
+    value: (listSurveyTotal === null || listSurveyTotal === void 0 ? void 0 : listSurveyTotal.responseRate) + "%",
+    isUp: true,
+    deviant: "17 min",
+    filter: "this week"
+  }];
+  return {
+    user: user,
+    filter: filter,
+    LIST_FILTERS_LEFT: LIST_FILTERS_LEFT,
+    LIST_FILTERS_RIGHT: LIST_FILTERS_RIGHT,
+    totalCardData: totalCardData,
+    onChangeFilters: onChangeFilters,
+    handleSelectToPrint: handleSelectToPrint,
+    checkSelectedItem: checkSelectedItem,
+    selectedToPrint: selectedToPrint,
+    setSelectedToPrint: setSelectedToPrint,
+    topMostSurveyUsed: topMostSurveyUsed,
+    surveyFlagData: surveyFlagData,
+    templateSurveyDashboard: templateSurveyDashboard,
+    avgResult: avgResult,
+    seriseResult: seriseResult,
+    activeColumnResult: activeColumnResult,
+    handleActiveColumnOneToOne: handleActiveColumnOneToOne,
+    typeChartList: typeChartList,
+    onChangeChart: onChangeChart
+  };
+};
+
+var Loading$1 = function Loading() {
+  return React__default.createElement("div", {
+    className: "d-flex align-items-center justify-content-center"
+  }, React__default.createElement("div", {
+    className: "spinner-grow",
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  }, "Loading...")), React__default.createElement("div", {
+    className: "spinner-grow mx-2",
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  }, "Loading...")), React__default.createElement("div", {
+    className: "spinner-grow",
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  }, "Loading...")));
+};
+
+var TopMostSurveyUsed = function TopMostSurveyUsed(_ref) {
+  var data = _ref.data;
+  if (!data) return React__default.createElement(Loading$1, null);
+
+  var _useTranslation = marioCore.useTranslation(),
+      t = _useTranslation.t;
+
+  var labelNames = data === null || data === void 0 ? void 0 : data.map(function (i) {
+    return i.nameSurvey;
+  });
+  var labelTimes = data === null || data === void 0 ? void 0 : data.map(function (i) {
+    return marioCore.utcToLocalTime(i.sendDateSurvey.toString(), "Do MMMM yyyy - hh:mm A");
+  });
+  console.log({
+    labelTimes: labelTimes
+  });
+  var percentSurvey = data === null || data === void 0 ? void 0 : data.map(function (i) {
+    return i.percentSurvey;
+  });
+  var seriesLearningStrategy = [{
+    name: "Perceived Usefulness",
+    data: percentSurvey
+  }];
+  return React__default.createElement("div", {
+    className: "h-100 w-100 " + styles$2["chart-background"] + " pl-4"
+  }, React__default.createElement("div", {
+    className: "" + styles$2["block-header-chart"]
+  }, React__default.createElement("div", {
+    className: "" + styles$2["block-header-name"]
+  }, React__default.createElement("p", {
+    className: "" + styles$2["title-chart"]
+  }, t(topMostSurveyNameUsed)))), seriesLearningStrategy.some(function (i) {
+    return i.data;
+  }) ? React__default.createElement("div", null, React__default.createElement(Chart, {
+    options: topMostSurveyChartOptions(labelNames, percentSurvey),
+    series: seriesLearningStrategy,
+    type: "bar",
+    width: "100%",
+    height: 450
+  })) : React__default.createElement("img", {
+    className: styles$2["image-no-data"] + " " + styles$2["image-custom"],
+    src: "images/chart-top-learning.png"
+  }));
+};
+
+var propsAreEqual$1 = function propsAreEqual(preProps, nextProps) {
+  return JSON.stringify(preProps) === JSON.stringify(nextProps);
+};
+
+var TopMostSurveyUsed$1 = React__default.memo(TopMostSurveyUsed, propsAreEqual$1);
+
+var maxSeries = function maxSeries(series) {
+  var max = 0;
+
+  for (var i = 0; i < series.length; i++) {
+    max = Math.max.apply(Math, series[i].data.concat([max]));
+  }
+
+  return max;
+};
+var optionColumnChartAndPercents$1 = function optionColumnChartAndPercents(months, activeData, isRidgeCharts, isShowChartLabel, percentData, series) {
+  return {
+    chart: {
+      height: 350,
+      stacked: false,
+      toolbar: {
+        show: false,
+        "export": {
+          png: {
+            filename: "test"
+          }
+        }
+      }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 5
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    fill: {
+      opacity: isRidgeCharts ? 0.2 : 1
+    },
+    colors: COLOR_CHART_AND_PERCENTS$2.filter(function (_, index) {
+      return activeData[index];
+    }),
+    stroke: {
+      curve: "smooth",
+      show: true,
+      colors: isRidgeCharts ? COLOR_CHART_AND_PERCENTS$2.filter(function (_, index) {
+        return activeData[index];
+      }) : ["#fff"],
+      width: 3,
+      dashArray: 0
+    },
+    xaxis: {
+      categories: months,
+      labels: {
+        show: months.length > 0 ? true : false,
+        style: {
+          colors: ["#808080"],
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        }
+      },
+      axisTicks: {
+        show: months.length > 0 ? true : false
+      }
+    },
+    yaxis: {
+      tickAmount: 2,
+      min: 0,
+      max: percentData ? 100 : maxSeries(series || []),
+      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 "" + (!percentData ? value : value + "%");
+        },
+        offsetX: 0,
+        offsetY: 0,
+        rotate: 0
+      },
+      decimalsInFloat: 0
+    },
+    tooltip: {
+      shared: false,
+      y: {
+        formatter: function formatter(value) {
+          return "" + (!percentData ? value : value.toFixed(2) + "%");
+        }
+      },
+      onDatasetHover: {
+        highlightDataSeries: true
+      }
+    },
+    legend: {
+      show: isShowChartLabel
+    }
+  };
+};
+var optionBarChartAndArea = function optionBarChartAndArea(months, activeData, newseries) {
+  return {
+    chart: {
+      height: 350,
+      stacked: false,
+      toolbar: {
+        show: false
+      }
+    },
+    plotOptions: {
+      bar: {
+        columnWidth: "50%",
+        borderRadius: 5
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    fill: {
+      opacity: newseries === null || newseries === void 0 ? void 0 : newseries.map(function (item) {
+        if ((item === null || item === void 0 ? void 0 : item.type) == "area") {
+          return 0.2;
+        }
+
+        return 0.6;
+      })
+    },
+    colors: COLOR_CHART_AND_PERCENTS$2.filter(function (_, index) {
+      return activeData[index];
+    }),
+    stroke: {
+      curve: "smooth",
+      show: true,
+      colors: COLOR_CHART_AND_PERCENTS$2.filter(function (_, index) {
+        return activeData[index];
+      }),
+      width: newseries === null || newseries === void 0 ? void 0 : newseries.map(function (item) {
+        if ((item === null || item === void 0 ? void 0 : item.type) == "area") {
+          return 2;
+        }
+
+        return 0;
+      }),
+      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: {
+      shared: false,
+      enabledOnSeries: handleViewSeriesActive(activeData),
+      y: {
+        formatter: function formatter(value) {
+          return value.toFixed(2) + "%";
+        }
+      },
+      onDatasetHover: {
+        highlightDataSeries: true
+      }
+    },
+    legend: {
+      show: false
+    }
+  };
+};
+var pieChartOptions = {
+  labels: LABEL_NAME_PIE_CHART,
+  colors: COLOR_LABEL_PIE,
+  legend: {
+    show: false
+  },
+  chart: {
+    height: "100%"
+  },
+  plotOptions: {
+    pie: {
+      donut: {
+        size: "15%"
+      }
+    }
+  },
+  dataLabels: {
+    enabled: false
+  },
+  fill: {
+    colors: COLOR_CHART_AND_PIE
+  },
+  stroke: {
+    colors: COLOR_CHART_AND_PIE,
+    width: 1
+  },
+  states: {
+    normal: {
+      filter: {
+        type: "none",
+        value: 0
+      }
+    },
+    hover: {
+      filter: {
+        type: "none",
+        value: 0
+      }
+    },
+    active: {
+      filter: {
+        type: "none",
+        value: 0
+      }
+    }
+  }
+};
+
+var useContainerDimensions = function useContainerDimensions(myRef) {
+  var _myRef$current;
+
+  var _useState = React.useState({
+    width: 0,
+    height: 0
+  }),
+      dimensions = _useState[0],
+      setDimensions = _useState[1];
+
+  React.useEffect(function () {
+    var getDimensions = function getDimensions() {
+      return {
+        width: myRef.current.offsetWidth,
+        height: myRef.current.offsetHeight
+      };
+    };
+
+    var handleResize = function handleResize() {
+      setDimensions(getDimensions());
+    };
+
+    if (myRef.current) {
+      setDimensions(getDimensions());
+    }
+
+    window.addEventListener("resize", handleResize);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [myRef === null || myRef === void 0 ? void 0 : (_myRef$current = myRef.current) === null || _myRef$current === void 0 ? void 0 : _myRef$current.offsetWidth]);
+  return dimensions;
+};
+
+var PieChart = function PieChart(_ref) {
+  var data = _ref.data,
+      name = _ref.name;
+  var ref = React.useRef(null);
+
+  var _useContainerDimensio = useContainerDimensions(ref),
+      width = _useContainerDimensio.width;
+
+  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 = [data.numberSurveyBlue, data.numberSurveyRed, data.numberSurveyYellow];
+  return React__default.createElement("div", {
+    className: styles$2["pie-chart"],
+    ref: ref
+  }, React__default.createElement("div", {
+    className: styles$2["box-chart-title"]
+  }, React__default.createElement("p", {
+    className: styles$2["title-chart"]
+  }, name)), React__default.createElement("div", {
+    className: styles$2["box-chart"] + " " + (width == 0 && styles$2["h-75"])
+  }, React__default.createElement(Chart, {
+    options: pieChartOptions,
+    series: series,
+    type: "donut",
+    width: width || "100%",
+    height: width || "100%"
+  }), React__default.createElement("div", {
+    className: "" + styles$2["legend-pie-custom"]
+  }, COLOR_NAME.map(function (color, index) {
+    return React__default.createElement("div", {
+      className: "" + styles$2["legend-item"]
+    }, React__default.createElement("div", {
+      className: "" + styles$2["color-box"],
+      style: {
+        backgroundColor: COLOR_CHART_AND_PIE[index]
+      }
+    }), React__default.createElement("div", {
+      className: "" + styles$2["text"]
+    }, color));
+  }))));
+};
+
+var BarChart$1 = function BarChart(_ref) {
+  var series = _ref.series,
+      months = _ref.months,
+      activeColumn = _ref.activeColumn,
+      isShowChartLabel = _ref.isShowChartLabel,
+      percentData = _ref.percentData;
+  return React__default.createElement(Chart, {
+    options: optionColumnChartAndPercents$1(months, activeColumn, false, isShowChartLabel, percentData, series),
+    type: "bar",
+    series: series,
+    width: "100%",
+    height: 450
+  });
+};
+
+var CheckboxCustom$1 = function CheckboxCustom(_ref) {
+  var _ref$background = _ref.background,
+      background = _ref$background === void 0 ? "#2B4DC0" : _ref$background,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 16 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 16 : _ref$height,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? "" : _ref$className,
+      onClick = _ref.onClick;
+  return React__default.createElement("div", {
+    className: className,
+    onClick: onClick,
+    style: {
+      cursor: "pointer"
+    }
+  }, isActive ? React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, React__default.createElement("rect", {
+    x: "2.5",
+    y: "2.5",
+    width: "19",
+    height: "19",
+    rx: "1.5",
+    fill: background,
+    stroke: background
+  }), React__default.createElement("path", {
+    d: "M7.3335 12.6667L10.0002 15.3334L16.6668 8.66669",
+    stroke: "white",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  })) : React__default.createElement("div", {
+    style: {
+      width: width,
+      height: height,
+      background: "#FCFCFC",
+      border: "1px solid #CCCCCC",
+      borderRadius: 2,
+      cursor: "pointer",
+      marginTop: 3
+    }
+  }));
+};
+
+var ChoiceChartType = function ChoiceChartType(_ref) {
+  var onChangeChart = _ref.onChangeChart,
+      _ref$typeChart = _ref.typeChart,
+      typeChart = _ref$typeChart === void 0 ? [TYPECHART$2.BAR] : _ref$typeChart,
+      options = _ref.options;
+  return React__default.createElement("div", {
+    className: "d-flex align-items-center d-inline-block"
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center px-2 " + styles$2["checkbox-chart"]
+  }, React__default.createElement("div", {
+    className: "pr-4 d-flex align-items-center",
+    onClick: function onClick() {
+      return onChangeChart === null || onChangeChart === void 0 ? void 0 : onChangeChart(options[0].value);
+    },
+    style: {
+      cursor: "pointer"
+    }
+  }, React__default.createElement(CheckboxCustom$1, {
+    width: 16,
+    height: 16,
+    isActive: typeChart.includes(TYPECHART$2.BOTH),
+    className: "pr-2 d-flex align-items-center"
+  }), React__default.createElement("label", {
+    className: "" + styles$2["label-chart"],
+    style: {
+      color: "#252733",
+      marginBottom: 0,
+      cursor: "pointer"
+    }
+  }, "Ridge charts"))), React__default.createElement("div", {
+    className: "d-inline-block " + styles$2["checkbox-chart"]
+  }, React__default.createElement("div", {
+    className: "pr-4 d-flex align-items-center",
+    onClick: function onClick() {
+      return onChangeChart === null || onChangeChart === void 0 ? void 0 : onChangeChart(options[1].value);
+    },
+    style: {
+      cursor: "pointer"
+    }
+  }, React__default.createElement(CheckboxCustom$1, {
+    width: 16,
+    height: 16,
+    isActive: typeChart.includes(TYPECHART$2.LINE) || typeChart.includes(TYPECHART$2.BAR),
+    className: "pr-2 d-flex align-items-center"
+  }), React__default.createElement("label", {
+    className: "" + styles$2["label-chart"],
+    style: {
+      color: "#252733",
+      marginBottom: 0,
+      cursor: "pointer"
+    }
+  }, options[1].value === TYPECHART$2.BAR ? "Bar charts" : "Line charts"))));
+};
+
+var AreaChart$1 = function AreaChart(_ref) {
+  var series = _ref.series,
+      months = _ref.months,
+      activeColumn = _ref.activeColumn,
+      percentData = _ref.percentData;
+  return React__default.createElement(Chart, {
+    options: optionColumnChartAndPercents$1(months, activeColumn, true, false, percentData),
+    type: "area",
+    series: series,
+    width: "100%",
+    height: 450
+  });
+};
+
+var BarAndAreaChart = function BarAndAreaChart(_ref) {
+  var series = _ref.series,
+      months = _ref.months,
+      activeColumn = _ref.activeColumn;
+  var newseries = mergeBarChartAndArea(series);
+  return React__default.createElement(Chart, {
+    options: optionBarChartAndArea(months, activeColumn, newseries),
+    series: newseries,
+    width: "100%",
+    height: 450
+  });
+};
+
+var ChartViewDashboard = function ChartViewDashboard(_ref) {
+  var data = _ref.data,
+      typeChart = _ref.typeChart,
+      onActiveColumn = _ref.onActiveColumn,
+      activeColumn = _ref.activeColumn,
+      series = _ref.series,
+      avg = _ref.avg,
+      months = _ref.months,
+      onChangeChart = _ref.onChangeChart,
+      optionType = _ref.optionType,
+      name = _ref.name,
+      _ref$isShowChartLabel = _ref.isShowChartLabel,
+      isShowChartLabel = _ref$isShowChartLabel === void 0 ? false : _ref$isShowChartLabel,
+      _ref$percentData = _ref.percentData,
+      percentData = _ref$percentData === void 0 ? true : _ref$percentData,
+      classFontSize = _ref.classFontSize;
+
+  var _useTranslation = marioCore.useTranslation(),
+      t = _useTranslation.t;
+
+  if (!data) return React__default.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React__default.createElement("p", null, t("no_data")));
+  return React__default.createElement("div", {
+    key: name,
+    className: " " + styles$2["size-100"] + " " + styles$2[classFontSize != null ? classFontSize : '']
+  }, React__default.createElement("div", {
+    className: "" + styles$2["block-header-chart"]
+  }, React__default.createElement("p", {
+    className: "" + styles$2["title-chart"]
+  }, t(name)), !!onChangeChart && !!optionType && React__default.createElement(ChoiceChartType, {
+    onChangeChart: onChangeChart,
+    options: optionType,
+    typeChart: typeChart
+  })), React__default.createElement("div", {
+    className: "" + styles$2["column-chart-percent"]
+  }, !!onActiveColumn && React__default.createElement("div", {
+    className: "" + styles$2["listItem"]
+  }, data.map(function (month, index) {
+    return React__default.createElement("div", {
+      className: "" + styles$2["item-checkbox"],
+      key: index
+    }, React__default.createElement(CheckboxCustom$1, {
+      background: COLOR_CHART_AND_PERCENTS$1[index],
+      width: 16,
+      height: 16,
+      isActive: activeColumn[index],
+      className: "" + styles$2["check-box"],
+      onClick: function onClick() {
+        return onActiveColumn === null || onActiveColumn === void 0 ? void 0 : onActiveColumn(index);
+      }
+    }), React__default.createElement("label", {
+      className: "" + styles$2["label-chart"],
+      style: {
+        color: !activeColumn[index] ? "#CCCCCC" : "#4D4D4D",
+        marginBottom: 0,
+        cursor: "pointer"
+      },
+      onClick: function onClick() {
+        return onActiveColumn === null || onActiveColumn === void 0 ? void 0 : onActiveColumn(index);
+      }
+    }, month));
+  })), React__default.createElement("div", {
+    className: "w-100",
+    style: {
+      height: 450
+    }
+  }, typeChart.includes(TYPECHART$1.BOTH) && typeChart.length == 1 && React__default.createElement(AreaChart$1, {
+    months: months,
+    activeColumn: activeColumn,
+    series: series,
+    percentData: percentData
+  }), typeChart.includes(TYPECHART$1.BAR) && typeChart.length == 1 && React__default.createElement(BarChart$1, {
+    months: months,
+    activeColumn: activeColumn,
+    series: series,
+    isShowChartLabel: isShowChartLabel,
+    percentData: percentData
+  }), typeChart.includes(TYPECHART$1.BOTH) && typeChart.includes(TYPECHART$1.BAR) && React__default.createElement(BarAndAreaChart, {
+    months: months,
+    activeColumn: activeColumn,
+    series: series
+  })), !!avg && React__default.createElement("div", {
+    className: "" + styles$2["listItem"]
+  }, data.map(function (month, index) {
+    return avg[index] > 0 && React__default.createElement("div", {
+      className: "" + styles$2["item-legend"],
+      key: index
+    }, React__default.createElement("div", {
+      className: "" + styles$2["item"]
+    }, React__default.createElement("div", {
+      className: "" + styles$2["mark-custom"],
+      style: {
+        backgroundColor: COLOR_CHART_AND_PERCENTS$1[index]
+      }
+    }), React__default.createElement("label", {
+      className: "" + styles$2["label-legend-custom"]
+    }, month)), React__default.createElement("div", {
+      className: "" + styles$2["percent"]
+    }, React__default.createElement("label", {
+      className: "" + styles$2["m-0"]
+    }, avg[index].toFixed(2))));
+  }))));
+};
+
+var SurveyDashboard = function SurveyDashboard() {
+  var _useTranslation = marioCore.useTranslation(),
+      t = _useTranslation.t;
+
+  var _useChartDatas = useChartDatas$1(),
+      filter = _useChartDatas.filter,
+      LIST_FILTERS_LEFT = _useChartDatas.LIST_FILTERS_LEFT,
+      LIST_FILTERS_RIGHT = _useChartDatas.LIST_FILTERS_RIGHT,
+      totalCardData = _useChartDatas.totalCardData,
+      onChangeFilters = _useChartDatas.onChangeFilters,
+      topMostSurveyUsed = _useChartDatas.topMostSurveyUsed,
+      surveyFlagData = _useChartDatas.surveyFlagData,
+      templateSurveyDashboard = _useChartDatas.templateSurveyDashboard,
+      avgResult = _useChartDatas.avgResult,
+      seriseResult = _useChartDatas.seriseResult,
+      activeColumnResult = _useChartDatas.activeColumnResult,
+      handleActiveColumnOneToOne = _useChartDatas.handleActiveColumnOneToOne,
+      typeChartList = _useChartDatas.typeChartList,
+      onChangeChart = _useChartDatas.onChangeChart;
+
+  console.log({
+    LIST_FILTERS_RIGHT: LIST_FILTERS_RIGHT
+  });
+  return React__default.createElement("div", {
+    className: styles$2["block-dashboard"] + " mb-5"
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center justify-content-between"
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center mx-3"
+  }, React__default.createElement("h4", {
+    className: styles$2["title-dashboard"] + " m-0"
+  }, t('survey_dashboard')))), React__default.createElement("div", {
+    className: "d-flex justify-content-between flex-wrap my-2"
+  }, React__default.createElement("div", {
+    className: "d-flex"
+  }, LIST_FILTERS_LEFT.map(function (e) {
+    return React__default.createElement(SelectFilter, {
+      name: e.name,
+      icon: e.icon,
+      handleChangeFilters: e.handleChangeFilters,
+      filter: filter,
+      option: e.option,
+      onChangeFilters: onChangeFilters
+    });
+  })), React__default.createElement("div", {
+    className: "d-flex"
+  }, LIST_FILTERS_RIGHT.map(function (e) {
+    return React__default.createElement(SelectFilter, {
+      name: e.name,
+      icon: e.icon,
+      handleChangeFilters: e.handleChangeFilters,
+      filter: filter,
+      option: e.option,
+      studentId: e.studentId || 0,
+      studentDefault: e.studentDefault,
+      onChangeFilters: onChangeFilters,
+      btnStyle: e.name === FILTER_NAME.StudentName ? {
+        minWidth: 220,
+        justifyContent: "center"
+      } : {}
+    });
+  }))), React__default.createElement("div", {
+    className: "d-flex align-items-center flex-wrap mb-3"
+  }, totalCardData.map(function (item) {
+    return React__default.createElement(TotalCard$1, {
+      icon: item.icon,
+      title: t("" + item.title),
+      value: item.value,
+      isUp: item.isUp,
+      deviant: item.deviant,
+      filter: item.filter
+    });
+  })), React__default.createElement("div", {
+    className: "shadow-lg mb-3 " + styles$2["chart-header-wrapper"]
+  }, React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+    md: 7
+  }, React__default.createElement(TopMostSurveyUsed$1, {
+    data: topMostSurveyUsed
+  })), React__default.createElement(reactstrap.Col, {
+    md: 5
+  }, React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+    md: 7,
+    style: {
+      margin: "0 auto"
+    }
+  }, React__default.createElement(PieChart, {
+    data: surveyFlagData,
+    name: "Flag"
+  })))))), React__default.createElement(reactstrap.Row, {
+    className: "" + styles$2["chart-view-dashboard"]
+  }, React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, React__default.createElement(ChartViewDashboard, {
+    name: "survey_result",
+    data: convertDataToDataChart$1(templateSurveyDashboard),
+    months: templateSurveyDashboard.map(function (r) {
+      return r.month || "";
+    }),
+    series: seriseResult,
+    activeColumn: activeColumnResult,
+    onActiveColumn: handleActiveColumnOneToOne,
+    typeChart: typeChartList,
+    onChangeChart: onChangeChart,
+    avg: avgResult,
+    optionType: [{
+      label: "Ridge charts",
+      value: TYPECHART$2.BOTH
+    }, {
+      label: "Bar charts",
+      value: TYPECHART$2.BAR
+    }]
+  }))));
+};
+
 core.LicenseManager.setLicenseKey(marioCore.LICENSE_AGGRID);
 
 exports.AdminTraining = AdminTraining;
@@ -31619,6 +33259,7 @@ exports.SessionTemplateList = SessionTemplateList;
 exports.SetupContainer = SetupContainer;
 exports.SubjectList = SubjectList;
 exports.SuggestionList = SuggestionBankList;
+exports.SurveyDashboard = SurveyDashboard;
 exports.SurveyQuestionContainer = SurveyQuestionContainer;
 exports.TutorialScreenContainer = TutorialScreenContainer;
 //# sourceMappingURL=index.js.map