mario-education 2.4.520-feedback → 2.4.522-feedback

package/dist/index.js

@@ -50657,18 +50657,20 @@ var getSurveysExport = function getSurveysExport(filter) {
 var getStudentSurveysExport = function getStudentSurveysExport(surveyId) {
   return marioCore.api.get(SURVEY_API + "/export-csv/" + surveyId);
 };
-var getRatingsOfQuestions = function getRatingsOfQuestions(surveyId) {
-  return marioCore.api.get(SURVEY_API + "/rating-of-questions/" + surveyId);
+var getRatingsOfQuestions = function getRatingsOfQuestions(surveyId, params) {
+  return marioCore.api.get(SURVEY_API + "/rating-of-questions/" + surveyId, {
+    params: params
+  });
 };
-var getTotalByQuestion = function getTotalByQuestion(surveyId, questionId) {
+var getTotalByQuestion = function getTotalByQuestion(surveyId, params) {
   return marioCore.api.get(SURVEY_API + "/total-by-question/" + surveyId, {
-    params: {
-      questionId: questionId
-    }
+    params: params
   });
 };
-var getResponsesDistribution = function getResponsesDistribution(surveyId) {
-  return marioCore.api.get(SURVEY_API + "/responses-distribution/" + surveyId);
+var getResponsesDistribution = function getResponsesDistribution(surveyId, params) {
+  return marioCore.api.get(SURVEY_API + "/responses-distribution/" + surveyId, {
+    params: params
+  });
 };
 var getRatingLabelSurvey = function getRatingLabelSurvey(isAdmin) {
   return marioCore.api.get(SURVEY_API + "/rating-label-survey", {
@@ -50677,11 +50679,9 @@ var getRatingLabelSurvey = function getRatingLabelSurvey(isAdmin) {
     }
   });
 };
-var getAnswerChart = function getAnswerChart(surveyId, isQuestionDropDown) {
+var getAnswerChart = function getAnswerChart(surveyId, params) {
   return marioCore.api.get(EXTERNAL_SURVEY + "/number-answer-question-survey/" + surveyId, {
-    params: {
-      isQuestionDropDown: isQuestionDropDown
-    }
+    params: params
   });
 };
 
@@ -50885,7 +50885,9 @@ var useListSurvey = function useListSurvey(pageSize) {
     status: undefined,
     isFavorite: false,
     isSchedule: false,
-    flag: ""
+    flag: "",
+    grade: "",
+    optionDate: ""
   }),
       filters = _useState10[0],
       setFilters = _useState10[1];
@@ -50927,14 +50929,16 @@ var useListSurvey = function useListSurvey(pageSize) {
   var handleChangeStartDate = function handleChangeStartDate(date) {
     changeFilters(_extends({}, filters, {
       startDate: date === null || date === void 0 ? void 0 : date.valueOf(),
-      currentPage: 1
+      currentPage: 1,
+      optionDate: ""
     }));
   };
 
   var handleChangeEndDate = function handleChangeEndDate(date) {
     changeFilters(_extends({}, filters, {
       endDate: date === null || date === void 0 ? void 0 : date.valueOf(),
-      currentPage: 1
+      currentPage: 1,
+      optionDate: ""
     }));
   };
 
@@ -50960,6 +50964,37 @@ var useListSurvey = function useListSurvey(pageSize) {
     }, 800);
   };
 
+  var handleChangeGrade = function handleChangeGrade(grade) {
+    changeFilters({
+      currentPage: 1,
+      grade: grade
+    });
+  };
+
+  var onChangeOptionDate = function onChangeOptionDate(option) {
+    var startDate = null;
+    var endDate = null;
+
+    switch (option.toLocaleLowerCase()) {
+      case "weeks":
+        startDate = moment().startOf("week").weekday(1).valueOf();
+        endDate = moment().endOf("week").weekday(7).valueOf();
+        break;
+
+      case "months":
+        startDate = moment().startOf("month").valueOf();
+        endDate = moment().endOf("month").valueOf();
+        break;
+    }
+
+    changeFilters(_extends({}, filters, {
+      startDate: startDate,
+      endDate: endDate,
+      currentPage: 1,
+      optionDate: option
+    }));
+  };
+
   var handleChangeStatus = function handleChangeStatus(newValue) {
     changeFilters({
       currentPage: 1,
@@ -51268,7 +51303,9 @@ var useListSurvey = function useListSurvey(pageSize) {
     linkAnonymousSurvey: linkAnonymousSurvey,
     goToTemplateSurvey: goToTemplateSurvey,
     goToDashboardSurvey: goToDashboardSurvey,
-    goToSurveyList: goToSurveyList
+    goToSurveyList: goToSurveyList,
+    handleChangeGrade: handleChangeGrade,
+    onChangeOptionDate: onChangeOptionDate
   };
 };
 
@@ -51411,7 +51448,10 @@ var CustomFilterComponent = function CustomFilterComponent(_ref) {
       academicOption = _ref.academicOption,
       handleChangeAcademicYear = _ref.handleChangeAcademicYear,
       valueAcademicYear = _ref.valueAcademicYear,
-      handleDownloadCsv = _ref.handleDownloadCsv;
+      handleDownloadCsv = _ref.handleDownloadCsv,
+      onChangeGrade = _ref.onChangeGrade,
+      onChangeOptionDate = _ref.onChangeOptionDate,
+      _renderOption = _ref.renderOption;
 
   var _useTranslation = marioCore.useTranslation(),
       t = _useTranslation.t;
@@ -51428,7 +51468,29 @@ var CustomFilterComponent = function CustomFilterComponent(_ref) {
     className: "" + styles["box-filter-left"]
   }, React__default.createElement(pickers.MuiPickersUtilsProvider, {
     utils: MomentUtils
-  }, !!handleChangeStartDate && React__default.createElement(pickers.KeyboardDatePicker, {
+  }, !!onChangeOptionDate && React__default.createElement(Autocomplete, {
+    fullWidth: true,
+    classes: {
+      popper: classes.popper
+    },
+    id: "combo-box-demo",
+    options: ["Weeks", "Months"],
+    className: "" + styles["filter-item"],
+    getOptionLabel: function getOptionLabel(option) {
+      return option;
+    },
+    defaultValue: undefined,
+    value: (filters === null || filters === void 0 ? void 0 : filters.optionDate) || null,
+    onChange: function onChange(_e, newValue) {
+      return onChangeOptionDate(newValue || "");
+    },
+    renderInput: function renderInput(params) {
+      return React__default.createElement(core$1.TextField, Object.assign({}, params, {
+        label: t("filter_calendar"),
+        variant: "outlined"
+      }));
+    }
+  }), !!handleChangeStartDate && React__default.createElement(pickers.KeyboardDatePicker, {
     fullWidth: true,
     inputVariant: "outlined",
     format: "Do MMM YYYY",
@@ -51521,6 +51583,29 @@ var CustomFilterComponent = function CustomFilterComponent(_ref) {
         variant: "outlined"
       }));
     }
+  }), !!onChangeGrade && React__default.createElement(Autocomplete, {
+    fullWidth: true,
+    classes: {
+      popper: classes.popper
+    },
+    id: "combo-box-demo",
+    options: GRAGE_DEFAULT$1,
+    className: "" + styles["filter-item"],
+    getOptionLabel: function getOptionLabel(option) {
+      return option;
+    },
+    renderOption: function renderOption(option) {
+      return React__default.createElement(core$1.Typography, null, "" + option + (_renderOption || ""));
+    },
+    onChange: function onChange(_e, newValue) {
+      return onChangeGrade === null || onChangeGrade === void 0 ? void 0 : onChangeGrade(newValue || "");
+    },
+    renderInput: function renderInput(params) {
+      return React__default.createElement(core$1.TextField, Object.assign({}, params, {
+        label: t("grade"),
+        variant: "outlined"
+      }));
+    }
   }), !!surveyOptions && React__default.createElement(Autocomplete, {
     fullWidth: true,
     classes: {
@@ -51658,7 +51743,10 @@ var CustomFilterMobile = function CustomFilterMobile(_ref) {
       toggleKeyCustom = _ref.toggleKeyCustom,
       toggleContentCustom = _ref.toggleContentCustom,
       handleToggleCustom = _ref.handleToggleCustom,
-      handleDownloadCsv = _ref.handleDownloadCsv;
+      handleDownloadCsv = _ref.handleDownloadCsv,
+      onChangeGrade = _ref.onChangeGrade,
+      onChangeOptionDate = _ref.onChangeOptionDate,
+      _renderOption = _ref.renderOption;
 
   var _useTranslation = marioCore.useTranslation(),
       t = _useTranslation.t;
@@ -51702,7 +51790,26 @@ var CustomFilterMobile = function CustomFilterMobile(_ref) {
     "in": isShowCalendar
   }, React__default.createElement(pickers.MuiPickersUtilsProvider, {
     utils: MomentUtils
-  }, !!handleChangeStartDate && React__default.createElement(pickers.KeyboardDatePicker, {
+  }, !!onChangeOptionDate && React__default.createElement(Autocomplete, {
+    fullWidth: true,
+    id: "combo-box-demo",
+    options: ["Weeks", "Months"],
+    className: styles["filter-item"] + " " + styles["space-item"],
+    getOptionLabel: function getOptionLabel(option) {
+      return option;
+    },
+    defaultValue: undefined,
+    value: (filters === null || filters === void 0 ? void 0 : filters.optionDate) || null,
+    onChange: function onChange(_e, newValue) {
+      return onChangeOptionDate(newValue || "");
+    },
+    renderInput: function renderInput(params) {
+      return React__default.createElement(core$1.TextField, Object.assign({}, params, {
+        label: t("filter_calendar"),
+        variant: "outlined"
+      }));
+    }
+  }), !!handleChangeStartDate && React__default.createElement(pickers.KeyboardDatePicker, {
     fullWidth: true,
     inputVariant: "outlined",
     format: "Do MMM YYYY",
@@ -51769,6 +51876,26 @@ var CustomFilterMobile = function CustomFilterMobile(_ref) {
         variant: "outlined"
       }));
     }
+  }), !!onChangeGrade && React__default.createElement(Autocomplete, {
+    fullWidth: true,
+    id: "combo-box-demo",
+    options: GRAGE_DEFAULT$1,
+    className: styles["filter-item"] + " " + styles["space-item"],
+    getOptionLabel: function getOptionLabel(option) {
+      return option;
+    },
+    onChange: function onChange(_e, newValue) {
+      return onChangeGrade === null || onChangeGrade === void 0 ? void 0 : onChangeGrade(newValue || "");
+    },
+    renderOption: function renderOption(option) {
+      return React__default.createElement(core$1.Typography, null, "" + option + (_renderOption || ""));
+    },
+    renderInput: function renderInput(params) {
+      return React__default.createElement(core$1.TextField, Object.assign({}, params, {
+        label: t("grade"),
+        variant: "outlined"
+      }));
+    }
   }), !!handleSelectFavorite && React__default.createElement("div", {
     className: styles["btn-favorite-text"] + " " + styles["space-item"]
   }, React__default.createElement(core$1.Checkbox, {
@@ -52164,7 +52291,9 @@ var ListSurveys = function ListSurveys() {
       anonymousKey = _useListSurvey.anonymousKey,
       handleCloseModelLink = _useListSurvey.handleCloseModelLink,
       handleCopyToClipboard = _useListSurvey.handleCopyToClipboard,
-      linkAnonymousSurvey = _useListSurvey.linkAnonymousSurvey;
+      linkAnonymousSurvey = _useListSurvey.linkAnonymousSurvey,
+      handleChangeGrade = _useListSurvey.handleChangeGrade,
+      onChangeOptionDate = _useListSurvey.onChangeOptionDate;
 
   var _useFontStyles = useFontStyles(),
       classFontSize = _useFontStyles.classFontSize,
@@ -52214,7 +52343,9 @@ var ListSurveys = function ListSurveys() {
     toggleContentCustom: "session_scheduled",
     optionCustomSelect: flagSurveyOptions,
     handleChangeCustomSelect: handleChangeFlag,
-    handleDownloadCsv: handleDownloadCsv
+    handleDownloadCsv: handleDownloadCsv,
+    onChangeGrade: handleChangeGrade,
+    onChangeOptionDate: onChangeOptionDate
   })), React__default.createElement(core$1.Grid, {
     className: "" + styles$6["filter-mobile"]
   }, React__default.createElement(CustomFilterMobile, {
@@ -52234,7 +52365,9 @@ var ListSurveys = function ListSurveys() {
     toggleContentCustom: "session_scheduled",
     optionCustomSelect: flagSurveyOptions,
     handleChangeCustomSelect: handleChangeFlag,
-    handleDownloadCsv: handleDownloadCsv
+    handleDownloadCsv: handleDownloadCsv,
+    onChangeGrade: handleChangeGrade,
+    onChangeOptionDate: onChangeOptionDate
   }))), React__default.createElement(core$1.Grid, {
     className: styles$6["table-desktop"] + " " + styles$6["filter-desktop"] + " pb-5"
   }, React__default.createElement(core$1.Grid, {
@@ -52654,6 +52787,84 @@ var useSurveyDetail = function useSurveyDetail() {
       openIndexField = _useState24[0],
       setOpenIndexField = _useState24[1];
 
+  var inputSearch = React.useRef(null);
+
+  var _useState25 = React.useState({
+    searchString: "",
+    startDate: null,
+    endDate: null,
+    grade: "",
+    optionDate: ""
+  }),
+      filters = _useState25[0],
+      setFilters = _useState25[1];
+
+  var changeFilters = function changeFilters(updatedFilters) {
+    return setFilters(_extends({}, filters, updatedFilters));
+  };
+
+  var handleChangeStartDate = function handleChangeStartDate(date) {
+    changeFilters(_extends({}, filters, {
+      startDate: date === null || date === void 0 ? void 0 : date.valueOf(),
+      currentPage: 1,
+      optionDate: ""
+    }));
+  };
+
+  var handleChangeEndDate = function handleChangeEndDate(date) {
+    changeFilters(_extends({}, filters, {
+      endDate: date === null || date === void 0 ? void 0 : date.valueOf(),
+      currentPage: 1,
+      optionDate: ""
+    }));
+  };
+
+  var handleChangeGrade = function handleChangeGrade(grade) {
+    changeFilters({
+      currentPage: 1,
+      grade: grade
+    });
+  };
+
+  var onChangeOptionDate = function onChangeOptionDate(option) {
+    var startDate = null;
+    var endDate = null;
+
+    switch (option.toLocaleLowerCase()) {
+      case "weeks":
+        startDate = moment().startOf("week").weekday(1).valueOf();
+        endDate = moment().endOf("week").weekday(7).valueOf();
+        break;
+
+      case "months":
+        startDate = moment().startOf("month").valueOf();
+        endDate = moment().endOf("month").valueOf();
+        break;
+    }
+
+    changeFilters(_extends({}, filters, {
+      startDate: startDate,
+      endDate: endDate,
+      currentPage: 1,
+      optionDate: option
+    }));
+  };
+
+  var handleChangeInputSearch = function handleChangeInputSearch(event) {
+    var inputValue = event.target.value;
+
+    if (!!inputSearch.current) {
+      clearTimeout(inputSearch.current);
+    }
+
+    inputSearch.current = setTimeout(function () {
+      changeFilters({
+        searchString: inputValue,
+        currentPage: 1
+      });
+    }, 800);
+  };
+
   React.useEffect(function () {
     var cate = Array.from(new Set(textInputQuestions.map(function (d) {
       return d.templateName;
@@ -52684,25 +52895,25 @@ var useSurveyDetail = function useSurveyDetail() {
     }
   };
 
-  var _useState25 = React.useState(''),
-      categoryRatingChose = _useState25[0],
-      setCategoryRatingChose = _useState25[1];
+  var _useState26 = React.useState(''),
+      categoryRatingChose = _useState26[0],
+      setCategoryRatingChose = _useState26[1];
 
-  var _useState26 = React.useState([]),
-      questionRatingSelected = _useState26[0],
-      setQuestionRatingSelected = _useState26[1];
+  var _useState27 = React.useState([]),
+      questionRatingSelected = _useState27[0],
+      setQuestionRatingSelected = _useState27[1];
 
-  var _useState27 = React.useState(''),
-      categoryRatingResponseChose = _useState27[0],
-      setCategoryRatingResponseChose = _useState27[1];
+  var _useState28 = React.useState(''),
+      categoryRatingResponseChose = _useState28[0],
+      setCategoryRatingResponseChose = _useState28[1];
 
-  var _useState28 = React.useState([]),
-      categoriesOptions = _useState28[0],
-      setCategoriesOptions = _useState28[1];
+  var _useState29 = React.useState([]),
+      categoriesOptions = _useState29[0],
+      setCategoriesOptions = _useState29[1];
 
-  var _useState29 = React.useState(null),
-      questionRatingResponseSelected = _useState29[0],
-      setQuestionRatingResponseSelected = _useState29[1];
+  var _useState30 = React.useState(null),
+      questionRatingResponseSelected = _useState30[0],
+      setQuestionRatingResponseSelected = _useState30[1];
 
   React.useEffect(function () {
     setCategoryRatingResponseChose(categoriesOptions[0]);
@@ -52716,13 +52927,13 @@ var useSurveyDetail = function useSurveyDetail() {
     }
   }, [ratingQuestions, categoriesOptions]);
 
-  var _useState30 = React.useState(''),
-      categoryDropdownChose = _useState30[0],
-      setCategoryDropdownChose = _useState30[1];
+  var _useState31 = React.useState(''),
+      categoryDropdownChose = _useState31[0],
+      setCategoryDropdownChose = _useState31[1];
 
-  var _useState31 = React.useState([]),
-      categoryDropdownOptions = _useState31[0],
-      setCategoryDropdownOptions = _useState31[1];
+  var _useState32 = React.useState([]),
+      categoryDropdownOptions = _useState32[0],
+      setCategoryDropdownOptions = _useState32[1];
 
   React.useEffect(function () {
     var cate = Array.from(new Set(barChartQuestions.map(function (d) {
@@ -52925,7 +53136,7 @@ var useSurveyDetail = function useSurveyDetail() {
       dispatch(marioCore.setLoading(true));
 
       var _temp12 = _catch(function () {
-        return Promise.resolve(getRatingsOfQuestions(parseInt(id))).then(function (res) {
+        return Promise.resolve(getRatingsOfQuestions(parseInt(id), filters)).then(function (res) {
           var ratingQuestions = res.data || [];
           var questionRemoveTags = ratingQuestions.questions.map(function (r) {
             return {
@@ -52987,7 +53198,7 @@ var useSurveyDetail = function useSurveyDetail() {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [id, studentDetail]);
+  }, [id, studentDetail, filters]);
   var handleGetTotalByQuestion = React.useCallback(function (questionId) {
     try {
       var _temp15 = function _temp15() {
@@ -52997,7 +53208,9 @@ var useSurveyDetail = function useSurveyDetail() {
       dispatch(marioCore.setLoading(true));
 
       var _temp16 = _catch(function () {
-        return Promise.resolve(getTotalByQuestion(parseInt(id), questionId)).then(function (res) {
+        return Promise.resolve(getTotalByQuestion(parseInt(id), _extends({}, filters, {
+          questionId: questionId
+        }))).then(function (res) {
           var data = res.data;
           var dataOverall = [data.totalSent, data.numberOfResponses];
           var totalOverall = dataOverall.reduce(function (acc, currentValue) {
@@ -53022,7 +53235,7 @@ var useSurveyDetail = function useSurveyDetail() {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [id]);
+  }, [id, filters]);
 
   var handleGetDistribution = function handleGetDistribution() {
     try {
@@ -53033,7 +53246,7 @@ var useSurveyDetail = function useSurveyDetail() {
       dispatch(marioCore.setLoading(true));
 
       var _temp20 = _catch(function () {
-        return Promise.resolve(getResponsesDistribution(parseInt(id))).then(function (res) {
+        return Promise.resolve(getResponsesDistribution(parseInt(id), filters)).then(function (res) {
           var data = (res === null || res === void 0 ? void 0 : res.data) || [];
           setDistributionQuestions(data.map(function (_r, index) {
             return "Q # " + (index + 1);
@@ -53094,7 +53307,9 @@ var useSurveyDetail = function useSurveyDetail() {
       dispatch(marioCore.setLoading(true));
 
       var _temp24 = _catch(function () {
-        return Promise.resolve(getAnswerChart(parseInt(id), true)).then(function (res) {
+        return Promise.resolve(getAnswerChart(parseInt(id), _extends({}, filters, {
+          isQuestionDropDown: true
+        }))).then(function (res) {
           var _res$data2;
 
           var data = (_res$data2 = res.data) != null ? _res$data2 : [];
@@ -53113,7 +53328,7 @@ var useSurveyDetail = function useSurveyDetail() {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [id]);
+  }, [id, filters]);
   var handleGetAnswerTextInput = React.useCallback(function () {
     try {
       var _temp27 = function _temp27() {
@@ -53123,7 +53338,9 @@ var useSurveyDetail = function useSurveyDetail() {
       dispatch(marioCore.setLoading(true));
 
       var _temp28 = _catch(function () {
-        return Promise.resolve(getAnswerChart(parseInt(id), false)).then(function (res) {
+        return Promise.resolve(getAnswerChart(parseInt(id), _extends({}, filters, {
+          isQuestionDropDown: false
+        }))).then(function (res) {
           var _res$data3;
 
           var data = (_res$data3 = res.data) != null ? _res$data3 : [];
@@ -53142,21 +53359,25 @@ var useSurveyDetail = function useSurveyDetail() {
     } catch (e) {
       return Promise.reject(e);
     }
+  }, [id, filters]);
+  React.useEffect(function () {
+    if (!!id) {
+      getStudentSurveyCount();
+    }
   }, [id]);
   React.useEffect(function () {
     if (!!id) {
       handleGetRatingsOfQuestions();
-      getStudentSurveyCount();
       handleGetDistribution();
       handleGetAnswerChart();
       handleGetAnswerTextInput();
     }
-  }, [id]);
+  }, [id, filters]);
   React.useEffect(function () {
     if (!!(selectQuestion !== null && selectQuestion !== void 0 && selectQuestion.questionId)) {
       handleGetTotalByQuestion(selectQuestion.questionId);
     }
-  }, [selectQuestion]);
+  }, [selectQuestion, filters]);
   React.useEffect(function () {
     !!(studentDetail !== null && studentDetail !== void 0 && studentDetail.studentId) && getDataQuestion();
   }, [studentDetail]);
@@ -53220,7 +53441,14 @@ var useSurveyDetail = function useSurveyDetail() {
     setQuestionRatingSelected: setQuestionRatingSelected,
     categoryDropdownOptions: categoryDropdownOptions,
     categoryDropdownChose: categoryDropdownChose,
-    setCategoryDropdownChose: setCategoryDropdownChose
+    setCategoryDropdownChose: setCategoryDropdownChose,
+    filters: filters,
+    handleChangeEndDate: handleChangeEndDate,
+    handleChangeStartDate: handleChangeStartDate,
+    handleChangeGrade: handleChangeGrade,
+    onChangeOptionDate: onChangeOptionDate,
+    handleChangeInputSearch: handleChangeInputSearch,
+    inputSearch: inputSearch
   };
 };
 
@@ -54709,7 +54937,14 @@ var SurveyDetailAdmin = function SurveyDetailAdmin() {
       setQuestionRatingSelected = _useSurveyDetail.setQuestionRatingSelected,
       categoryDropdownOptions = _useSurveyDetail.categoryDropdownOptions,
       categoryDropdownChose = _useSurveyDetail.categoryDropdownChose,
-      setCategoryDropdownChose = _useSurveyDetail.setCategoryDropdownChose;
+      setCategoryDropdownChose = _useSurveyDetail.setCategoryDropdownChose,
+      filters = _useSurveyDetail.filters,
+      handleChangeEndDate = _useSurveyDetail.handleChangeEndDate,
+      handleChangeStartDate = _useSurveyDetail.handleChangeStartDate,
+      handleChangeGrade = _useSurveyDetail.handleChangeGrade,
+      onChangeOptionDate = _useSurveyDetail.onChangeOptionDate,
+      handleChangeInputSearch = _useSurveyDetail.handleChangeInputSearch,
+      inputSearch = _useSurveyDetail.inputSearch;
 
   document.title = t("student_survey");
   return React__default.createElement("div", {
@@ -54738,6 +54973,26 @@ var SurveyDetailAdmin = function SurveyDetailAdmin() {
   }, React__default.createElement(TotalStudent, {
     data: [(_detailSurvey$allCoun = detailSurvey === null || detailSurvey === void 0 ? void 0 : detailSurvey.allCount) != null ? _detailSurvey$allCoun : 0, (_detailSurvey$complet = detailSurvey === null || detailSurvey === void 0 ? void 0 : detailSurvey.completedCount) != null ? _detailSurvey$complet : 0]
   })))), React__default.createElement(core$1.Grid, {
+    className: styles$6["filter-desktop"] + " " + styles$6["header-survey-detail-container"]
+  }, React__default.createElement(CustomFilterComponent, {
+    handleChangeInputSearch: handleChangeInputSearch,
+    filters: filters,
+    inputSearch: inputSearch,
+    handleChangeStartDate: handleChangeStartDate,
+    handleChangeEndDate: handleChangeEndDate,
+    onChangeGrade: handleChangeGrade,
+    onChangeOptionDate: onChangeOptionDate
+  })), React__default.createElement(core$1.Grid, {
+    className: "" + styles$6["filter-mobile"]
+  }, React__default.createElement(CustomFilterMobile, {
+    handleChangeInputSearch: handleChangeInputSearch,
+    filters: filters,
+    inputSearch: inputSearch,
+    handleChangeStartDate: handleChangeStartDate,
+    handleChangeEndDate: handleChangeEndDate,
+    onChangeGrade: handleChangeGrade,
+    onChangeOptionDate: onChangeOptionDate
+  })), React__default.createElement(core$1.Grid, {
     className: styles$6["survey-detail"] + " " + styles$6[classFontSize]
   }, React__default.createElement(core$1.Grid, {
     className: styles$6["responses-distribution"] + " " + styled['student-survey-questions']