mario-education 2.4.4 → 2.4.5-beta

package/dist/index.js

@@ -20,6 +20,10 @@ var clientSideRowModel = require('@ag-grid-community/client-side-row-model');
 var fa = require('react-icons/fa');
 var tinymceReact = require('@tinymce/tinymce-react');
 var ReactApexChart = _interopDefault(require('react-apexcharts'));
+var io = require('react-icons/io');
+var bi = require('react-icons/bi');
+var md = require('react-icons/md');
+var fi = require('react-icons/fi');
 
 // A type of promise-like that resolves synchronously and supports only one observer
 
@@ -8371,6 +8375,648 @@ var SwitchTeacherList = function SwitchTeacherList() {
   }));
 };
 
+var USER_URL$1 = marioCore.BASE_URL + "/api/User";
+var getStudentAssistant = function getStudentAssistant(data) {
+  return marioCore.api.get(USER_URL$1 + "/studentAssistant/", {
+    params: data
+  });
+};
+var getAssistant = function getAssistant() {
+  return marioCore.api.get(USER_URL$1 + "/assistants");
+};
+var changeAssistantOfStudent = function changeAssistantOfStudent(id, assistantUserId) {
+  return marioCore.api.put(USER_URL$1 + "/change-assistant/" + id, {
+    assistantUserId: assistantUserId
+  });
+};
+
+var INITIAL_USER_CHOICE = {
+  id: 0,
+  emailStudent: "",
+  studentName: "",
+  assistantId: "",
+  emailAssistant: "",
+  assistantName: ""
+};
+
+var TITLE$d = "Switch assistant list";
+
+var useSwitchAssistant = function useSwitchAssistant() {
+  var modal = React.useRef();
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState([]),
+      assistantList = _useState[0],
+      setAssistantList = _useState[1];
+
+  var _useState2 = React.useState([]),
+      userList = _useState2[0],
+      setUserList = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      totalItems = _useState3[0],
+      setTotalItems = _useState3[1];
+
+  var _useFilters = marioCore.useFilters(),
+      filters = _useFilters.filters,
+      changeFilters = _useFilters.changeFilters;
+
+  var _useState4 = React.useState(INITIAL_USER_CHOICE),
+      userChoiced = _useState4[0],
+      setUserChoiced = _useState4[1];
+
+  var _useState5 = React.useState(""),
+      assistantChangeId = _useState5[0],
+      setAssistantChangeId = _useState5[1];
+
+  var getStudentAssistantData = React.useCallback(function () {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+      console.log(filters);
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(getStudentAssistant(filters)).then(function (res) {
+          var _res$data = res.data,
+              items = _res$data.items,
+              totalItems = _res$data.totalItems;
+          setUserList(items);
+          setTotalItems(totalItems);
+        });
+      }, 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
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [dispatch, filters]);
+
+  var getAllAssistant = function getAllAssistant() {
+    try {
+      var _temp6 = _catch(function () {
+        return Promise.resolve(getAssistant()).then(function (res) {
+          setAssistantList(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
+        }));
+      });
+
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var options = React.useMemo(function () {
+    return assistantList.map(function (record) {
+      return {
+        label: record.name + " - " + record.email,
+        value: record.id
+      };
+    });
+  }, [assistantList]);
+
+  var openModal = function openModal() {
+    modal && modal.current && modal.current.toggle();
+  };
+
+  var resetData = function resetData() {
+    setAssistantChangeId("");
+    setUserChoiced(INITIAL_USER_CHOICE);
+  };
+
+  var choiceUser = function choiceUser(userChoiced) {
+    !!userChoiced && setUserChoiced(userChoiced);
+    setAssistantChangeId(userChoiced.assistantId);
+    openModal();
+  };
+
+  var removeData = function removeData(teacherUserId, studentId) {
+    try {
+      dispatch(marioCore.setModal({
+        isOpen: true,
+        type: "warning",
+        message: "Do you want to change assistant?",
+        onConfirm: function () {
+          try {
+            var _temp9 = function _temp9() {
+              dispatch(marioCore.setLoading(false));
+            };
+
+            dispatch(marioCore.setLoading(true));
+
+            var _temp10 = _catch(function () {
+              return Promise.resolve(changeAssistantOfStudent(studentId, teacherUserId)).then(function () {
+                dispatch(marioCore.setAlert({
+                  type: "success",
+                  message: "Change assistant successfully"
+                }));
+                openModal();
+                resetData();
+                changeFilters({
+                  currentPage: 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);
+          }
+        }
+      }));
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  React.useEffect(function () {
+    document.title = TITLE$d;
+  }, []);
+  React.useEffect(function () {
+    getAllAssistant();
+  }, [modal]);
+  React.useEffect(function () {
+    getStudentAssistantData();
+  }, [filters]);
+  return {
+    userList: userList,
+    totalItems: totalItems,
+    filters: filters,
+    changeFilters: changeFilters,
+    modal: modal,
+    userChoiced: userChoiced,
+    options: options,
+    setAssistantChangeId: setAssistantChangeId,
+    assistantChangeId: assistantChangeId,
+    removeData: removeData,
+    resetData: resetData,
+    choiceUser: choiceUser
+  };
+};
+
+var SwitchAssistantModal = function SwitchAssistantModal(_ref, ref) {
+  var header = _ref.header,
+      removeData = _ref.removeData,
+      resetData = _ref.resetData,
+      userChoiced = _ref.userChoiced,
+      options = _ref.options,
+      assistantChangeId = _ref.assistantChangeId,
+      setAssistantChangeId = _ref.setAssistantChangeId;
+  var valueDefault = options === null || options === void 0 ? void 0 : options.find(function (item) {
+    return item.value == assistantChangeId;
+  });
+  return React__default.createElement(marioCore.CommonModal, {
+    header: header,
+    ref: ref,
+    confirmText: "Change Save",
+    onConfirm: function onConfirm() {
+      return removeData(assistantChangeId, userChoiced.id);
+    },
+    onCancel: function onCancel() {
+      resetData();
+    }
+  }, React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+    md: 12,
+    className: "mb-2"
+  }, React__default.createElement("p", {
+    className: "font-weight-bold"
+  }, "Student Name"), React__default.createElement("p", null, userChoiced.studentName, " "), React__default.createElement("p", {
+    className: "font-weight-bold"
+  }, "Student Email"), React__default.createElement("p", null, userChoiced.emailStudent), React__default.createElement("p", {
+    className: "font-weight-bold"
+  }, "Current Assistant Name"), React__default.createElement("p", null, userChoiced.assistantName), React__default.createElement("p", {
+    className: "font-weight-bold"
+  }, "Current Assistant Email"), React__default.createElement("p", null, userChoiced.emailAssistant), !!userChoiced && React__default.createElement(marioCore.CustomSelector, {
+    options: options,
+    value: valueDefault,
+    placeholder: "Select Assistant change",
+    onChange: function onChange(e) {
+      return setAssistantChangeId(e.value);
+    }
+  }))));
+};
+
+var SwitchAssistantModal$1 = React.forwardRef(SwitchAssistantModal);
+
+var header$5 = "List Students";
+
+var SwitchAssistantList = function SwitchAssistantList() {
+  var _useSwitchTeacher = useSwitchAssistant(),
+      userList = _useSwitchTeacher.userList,
+      totalItems = _useSwitchTeacher.totalItems,
+      filters = _useSwitchTeacher.filters,
+      changeFilters = _useSwitchTeacher.changeFilters,
+      modal = _useSwitchTeacher.modal,
+      userChoiced = _useSwitchTeacher.userChoiced,
+      options = _useSwitchTeacher.options,
+      setAssistantChangeId = _useSwitchTeacher.setAssistantChangeId,
+      assistantChangeId = _useSwitchTeacher.assistantChangeId,
+      removeData = _useSwitchTeacher.removeData,
+      resetData = _useSwitchTeacher.resetData,
+      choiceUser = _useSwitchTeacher.choiceUser;
+
+  return React__default.createElement("div", {
+    className: "fadeIn animated"
+  }, React__default.createElement("h5", {
+    className: "mt-4 mb-2"
+  }, header$5), React__default.createElement(reactstrap.Row, {
+    className: "my-2"
+  }, React__default.createElement(reactstrap.Col, {
+    md: 8
+  }, React__default.createElement(marioCore.SearchBox, {
+    initValue: filters.searchString,
+    onSearch: function onSearch(searchString) {
+      return changeFilters({
+        searchString: searchString
+      });
+    },
+    placeholder: "Type something to search reflection result"
+  })), React__default.createElement(reactstrap.Col, {
+    md: 4,
+    className: "d-flex justify-content-end align-items-center"
+  }, "Total of users: ", totalItems)), React__default.createElement(reactstrap.Row, {
+    className: "mb-2"
+  }, React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, userList && userList.length > 0 ? React__default.createElement("div", null, React__default.createElement(reactstrap.Table, {
+    bordered: true,
+    hover: true,
+    striped: true,
+    responsive: true,
+    size: "sm"
+  }, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+    className: "align-top"
+  }, "Student Name"), React__default.createElement("th", {
+    className: "align-top"
+  }, "Student Email"), React__default.createElement("th", {
+    className: "align-top"
+  }, "Current Assistant Name"), React__default.createElement("th", {
+    className: "align-top"
+  }, "Current Assistant Email"))), React__default.createElement("tbody", null, !!userList && userList.length > 0 && userList.map(function (record) {
+    return React__default.createElement("tr", {
+      key: record.id
+    }, React__default.createElement("td", {
+      className: "align-middle"
+    }, React__default.createElement(marioCore.LinkEditButton, {
+      label: "" + record.studentName,
+      onClick: function onClick() {
+        return choiceUser(record);
+      }
+    })), React__default.createElement("td", {
+      className: "align-middle"
+    }, record.emailStudent), React__default.createElement("td", {
+      className: "align-middle"
+    }, record.assistantName), React__default.createElement("td", {
+      className: "align-middle"
+    }, record.emailAssistant));
+  })))) : React__default.createElement(marioCore.EmptyDataAlert, {
+    label: "user"
+  })), React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, React__default.createElement(marioCore.CustomPagination, {
+    filters: filters,
+    totalRecordCount: totalItems,
+    changePageSize: function changePageSize(pageSize) {
+      return changeFilters({
+        pageSize: pageSize
+      });
+    },
+    changePage: function changePage(currentPage) {
+      return changeFilters({
+        currentPage: currentPage
+      });
+    }
+  }))), React__default.createElement(SwitchAssistantModal$1, {
+    ref: modal,
+    header: "Switch Assistant",
+    userChoiced: userChoiced,
+    removeData: removeData,
+    options: options,
+    assistantChangeId: assistantChangeId,
+    setAssistantChangeId: setAssistantChangeId,
+    resetData: resetData
+  }));
+};
+
+var USER_URL$2 = marioCore.BASE_URL + "/api/user";
+var ACCOUNT_URL = marioCore.BASE_URL + "/api/account";
+var getUserList = function getUserList(filter) {
+  return marioCore.api.get("" + USER_URL$2, {
+    params: filter
+  });
+};
+var postRequestResendMail = function postRequestResendMail(data) {
+  return marioCore.api.post(ACCOUNT_URL + "/re-send-welcome-mail", data);
+};
+
+var DEFAULT_PAGE_SIZE = {
+  label: "10",
+  value: 10
+};
+var DEFAULT_FILTER = {
+  searchString: "",
+  currentPage: 1,
+  pageSize: DEFAULT_PAGE_SIZE.value,
+  sortBy: "",
+  sortOrder: "ASC",
+  name: ""
+};
+var MediaType;
+
+(function (MediaType) {
+  MediaType[MediaType["IMAGE"] = 0] = "IMAGE";
+  MediaType[MediaType["VIDEO"] = 1] = "VIDEO";
+  MediaType[MediaType["AUDIO"] = 2] = "AUDIO";
+  MediaType[MediaType["DOC"] = 3] = "DOC";
+  MediaType[MediaType["UNKNOW"] = 4] = "UNKNOW";
+})(MediaType || (MediaType = {}));
+
+var useGetUserList = function useGetUserList() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState([]),
+      userList = _useState[0],
+      setUserList = _useState[1];
+
+  var _useState2 = React.useState(DEFAULT_FILTER),
+      filters = _useState2[0],
+      setFilters = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      totalItem = _useState3[0],
+      setTotalItem = _useState3[1];
+
+  var _useState4 = React.useState(false),
+      isCheckAll = _useState4[0],
+      setIsCheckAll = _useState4[1];
+
+  var _useState5 = React.useState([]),
+      isCheck = _useState5[0],
+      setIsCheck = _useState5[1];
+
+  var changeFilters = function changeFilters(updatedFilters) {
+    var newFilters = _extends({}, filters, updatedFilters);
+
+    if (!!newFilters.searchString && !!updatedFilters.searchString && updatedFilters.searchString != filters.searchString) {
+      newFilters.currentPage = 1;
+    }
+
+    setFilters(newFilters);
+  };
+
+  var getDataUserList = function getDataUserList() {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(getUserList(filters)).then(function (res) {
+          var _res$data, _res$data2;
+
+          setUserList(res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.items);
+          setTotalItem(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.totalItems);
+        });
+      }, 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
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var handleSelectAll = function handleSelectAll() {
+    setIsCheckAll(!isCheckAll);
+    setIsCheck(userList.map(function (i) {
+      return i.id;
+    }));
+
+    if (isCheckAll) {
+      setIsCheck([]);
+    }
+  };
+
+  var handleClickCheck = function handleClickCheck(e) {
+    var _e$target = e.target,
+        id = _e$target.id,
+        checked = _e$target.checked;
+    setIsCheck([].concat(isCheck, [id]));
+
+    if (!checked) {
+      setIsCheck(isCheck.filter(function (item) {
+        return item !== id;
+      }));
+    }
+  };
+
+  React.useEffect(function () {
+    getDataUserList();
+  }, [filters]);
+  return {
+    totalItem: totalItem,
+    userList: userList,
+    filters: filters,
+    changeFilters: changeFilters,
+    handleSelectAll: handleSelectAll,
+    handleClickCheck: handleClickCheck,
+    isCheckAll: isCheckAll,
+    isCheck: isCheck
+  };
+};
+
+var useResendMail = function useResendMail() {
+  var dispatch = reactRedux.useDispatch();
+
+  var postDataResendMail = function postDataResendMail(data) {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(postRequestResendMail(data)).then(function () {
+          dispatch(marioCore.setAlert({
+            type: "success",
+            message: "Send Successfully"
+          }));
+        });
+      }, 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
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var handleSendMultiUsers = function handleSendMultiUsers(listUserIds) {
+    postDataResendMail({
+      userIds: [].concat(listUserIds)
+    });
+  };
+
+  var handleSendSingleUser = function handleSendSingleUser(userId) {
+    postDataResendMail({
+      userIds: [userId]
+    });
+  };
+
+  return {
+    handleSendMultiUsers: handleSendMultiUsers,
+    handleSendSingleUser: handleSendSingleUser
+  };
+};
+
+var WelcomeEmailResend = function WelcomeEmailResend() {
+  var _useGetUserList = useGetUserList(),
+      userList = _useGetUserList.userList,
+      totalItem = _useGetUserList.totalItem,
+      changeFilters = _useGetUserList.changeFilters,
+      filters = _useGetUserList.filters,
+      handleSelectAll = _useGetUserList.handleSelectAll,
+      handleClickCheck = _useGetUserList.handleClickCheck,
+      isCheckAll = _useGetUserList.isCheckAll,
+      isCheck = _useGetUserList.isCheck;
+
+  var _useResendMail = useResendMail(),
+      handleSendMultiUsers = _useResendMail.handleSendMultiUsers,
+      handleSendSingleUser = _useResendMail.handleSendSingleUser;
+
+  return React__default.createElement("div", {
+    className: "fadeIn animated"
+  }, React__default.createElement("h5", {
+    className: "mt-4 mb-2"
+  }, "Welcome Email Re-send"), React__default.createElement(reactstrap.Row, {
+    className: "my-2"
+  }, React__default.createElement(reactstrap.Col, {
+    md: 8
+  }, React__default.createElement(marioCore.SearchBox, {
+    initValue: filters === null || filters === void 0 ? void 0 : filters.searchString,
+    onSearch: function onSearch(searchString) {
+      return changeFilters({
+        searchString: searchString
+      });
+    },
+    placeholder: "Type something to search by user name"
+  })), React__default.createElement(reactstrap.Col, {
+    md: 4,
+    className: "d-flex justify-content-end align-items-center"
+  }, "Total of users: ", totalItem)), React__default.createElement(reactstrap.Row, {
+    className: "mb-2"
+  }, React__default.createElement(reactstrap.Col, null, React__default.createElement(reactstrap.Button, {
+    onClick: function onClick() {
+      return handleSendMultiUsers(isCheck);
+    },
+    color: "primary"
+  }, "Send for selected users"))), React__default.createElement(reactstrap.Row, {
+    className: "mb-2"
+  }, React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, !!userList && userList.length > 0 ? React__default.createElement("div", null, React__default.createElement(reactstrap.Table, {
+    bordered: true,
+    hover: true,
+    striped: true,
+    responsive: true,
+    size: "sm"
+  }, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+    className: "align-middle"
+  }, React__default.createElement("input", {
+    type: "checkbox",
+    onChange: handleSelectAll,
+    checked: isCheckAll
+  })), React__default.createElement("th", {
+    className: "align-top"
+  }, "User Name"), React__default.createElement("th", {
+    className: "align-top"
+  }, "User Email"), React__default.createElement("th", {
+    className: "align-top"
+  }, "Role"), React__default.createElement("th", {
+    className: "align-top"
+  }, "Action"))), React__default.createElement("tbody", null, userList.map(function (item) {
+    return React__default.createElement("tr", {
+      key: item.id
+    }, React__default.createElement("td", {
+      className: "align-middle"
+    }, React__default.createElement("input", {
+      id: item.id,
+      type: "checkbox",
+      onChange: handleClickCheck,
+      checked: isCheck.includes(item.id)
+    })), React__default.createElement("td", {
+      className: "align-middle"
+    }, item.fullName), React__default.createElement("td", {
+      className: "align-middle"
+    }, item.email), React__default.createElement("td", {
+      className: "align-middle"
+    }, !!item.roles && item.roles.join(", ")), React__default.createElement("td", {
+      className: "align-middle"
+    }, React__default.createElement(marioCore.LinkEditButton, {
+      label: "Send",
+      onClick: function onClick() {
+        return handleSendSingleUser(item.id);
+      }
+    })));
+  })))) : React__default.createElement(marioCore.EmptyDataAlert, {
+    label: "user"
+  })), React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, React__default.createElement(marioCore.CustomPagination, {
+    filters: filters,
+    totalRecordCount: totalItem,
+    changePageSize: function changePageSize(pageSize) {
+      return changeFilters({
+        pageSize: pageSize
+      });
+    },
+    changePage: function changePage(currentPage) {
+      return changeFilters({
+        currentPage: currentPage
+      });
+    }
+  }))));
+};
+
 var tabs = [{
   path: "/admin/set-up/skill",
   title: "Skills",
@@ -8423,6 +9069,14 @@ var tabs = [{
   path: "/admin/set-up/switch-teacher",
   title: "Switch Teacher",
   component: SwitchTeacherList
+}, {
+  path: "/admin/set-up/switch-assistant",
+  title: "Switch assistant",
+  component: SwitchAssistantList
+}, {
+  path: "/admin/set-up/welcome-email-re-send",
+  title: "Welcome Email Re-send",
+  component: WelcomeEmailResend
 }];
 var title$1 = "Set up";
 
@@ -8616,7 +9270,7 @@ var renderType = function renderType(params) {
 
 var QUESTION_URL$1 = "/admin/question-bank";
 var CREATE_QUESTION_URL = "/admin/create-question";
-var TITLE$d = "Question list";
+var TITLE$e = "Question list";
 
 var useQuestionList = function useQuestionList(isDefaultQuestion, isDefaultQuestionGeneralClass) {
   var history = reactRouterDom.useHistory();
@@ -8771,7 +9425,7 @@ var useQuestionList = function useQuestionList(isDefaultQuestion, isDefaultQuest
     history.push(url);
   }, []);
   React.useEffect(function () {
-    document.title = TITLE$d;
+    document.title = TITLE$e;
   }, []);
   React.useEffect(function () {
     getData();
@@ -9403,7 +10057,7 @@ var useReflectionFormDetail = function useReflectionFormDetail() {
   };
 };
 
-var TITLE$e = "Reflection form list";
+var TITLE$f = "Reflection form list";
 
 var useReflectionFormList = function useReflectionFormList() {
   var reflectionList = reactRedux.useSelector(function (state) {
@@ -9493,7 +10147,7 @@ var useReflectionFormList = function useReflectionFormList() {
     }
   }, [dispatch]);
   React.useEffect(function () {
-    document.title = TITLE$e;
+    document.title = TITLE$f;
   }, []);
   React.useEffect(function () {
     getData();
@@ -10556,7 +11210,7 @@ var initValue$e = {
   isMandatory: false,
   isBeforeSession: false
 };
-var TITLE$f = "Question detail";
+var TITLE$g = "Question detail";
 
 var useQuestionDetail = function useQuestionDetail(id) {
   var editorRef;
@@ -10582,7 +11236,7 @@ var useQuestionDetail = function useQuestionDetail(id) {
   };
 
   React.useEffect(function () {
-    document.title = TITLE$f;
+    document.title = TITLE$g;
     setEdited(false);
     if (!!localStorage.getItem(window.location.href)) localStorage.removeItem(window.location.href);
   }, []);
@@ -11246,7 +11900,7 @@ var useAssessmentDetail = function useAssessmentDetail() {
   };
 };
 
-var TITLE$g = "Assessment list";
+var TITLE$h = "Assessment list";
 
 var useAssessmentList = function useAssessmentList() {
   var assessmentList = reactRedux.useSelector(function (state) {
@@ -11329,7 +11983,7 @@ var useAssessmentList = function useAssessmentList() {
     dispatch(marioCore.setLoading(false));
   }, [filters]);
   React.useEffect(function () {
-    document.title = TITLE$g;
+    document.title = TITLE$h;
   }, []);
   React.useEffect(function () {
     getData();
@@ -11781,7 +12435,7 @@ var useFeedbackDetail = function useFeedbackDetail() {
   };
 };
 
-var TITLE$h = "Feedback list";
+var TITLE$i = "Feedback list";
 
 var useFeedbackList = function useFeedbackList() {
   var feedbackList = reactRedux.useSelector(function (state) {
@@ -11833,7 +12487,7 @@ var useFeedbackList = function useFeedbackList() {
     }
   }, [dispatch, filters]);
   React.useEffect(function () {
-    document.title = TITLE$h;
+    document.title = TITLE$i;
   }, []);
   React.useEffect(function () {
     getData();
@@ -11847,7 +12501,7 @@ var useFeedbackList = function useFeedbackList() {
   };
 };
 
-var header$5 = "Feedback";
+var header$6 = "Feedback";
 
 var FeedbackList = function FeedbackList() {
   var history = reactRouterDom.useHistory();
@@ -11876,7 +12530,7 @@ var FeedbackList = function FeedbackList() {
     feedbackDetail: feedbackDetail
   }), React__default.createElement("h5", {
     className: "mb-2"
-  }, header$5), React__default.createElement(reactstrap.Row, {
+  }, header$6), React__default.createElement(reactstrap.Row, {
     className: "my-2"
   }, React__default.createElement(reactstrap.Col, {
     md: 8,
@@ -12174,7 +12828,7 @@ var useTutorialScreenDetail = function useTutorialScreenDetail(typeRole) {
   };
 };
 
-var TITLE$i = "Tutorial screen list";
+var TITLE$j = "Tutorial screen list";
 
 var useTutorialScreenList = function useTutorialScreenList(typeRole) {
   var tutorialScreenList = reactRedux.useSelector(function (state) {
@@ -12259,7 +12913,7 @@ var useTutorialScreenList = function useTutorialScreenList(typeRole) {
     dispatch(marioCore.setLoading(false));
   }, [filters]);
   React.useEffect(function () {
-    document.title = TITLE$i;
+    document.title = TITLE$j;
   }, []);
   React.useEffect(function () {
     getData();
@@ -12635,7 +13289,7 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
   };
 };
 
-var TITLE$j = "Question category list";
+var TITLE$k = "Question category list";
 
 var useQuestionCateList = function useQuestionCateList() {
   var questionCateList = reactRedux.useSelector(function (state) {
@@ -12718,7 +13372,7 @@ var useQuestionCateList = function useQuestionCateList() {
     dispatch(marioCore.setLoading(false));
   }, [filters]);
   React.useEffect(function () {
-    document.title = TITLE$j;
+    document.title = TITLE$k;
   }, []);
   React.useEffect(function () {
     getData();
@@ -13487,7 +14141,7 @@ var useAssignmentDetail = function useAssignmentDetail() {
   };
 };
 
-var TITLE$k = "Assignment list";
+var TITLE$l = "Assignment list";
 
 var useAssignmentList = function useAssignmentList() {
   var assignmentList = reactRedux.useSelector(function (state) {
@@ -13584,7 +14238,7 @@ var useAssignmentList = function useAssignmentList() {
     dispatch(marioCore.setLoading(false));
   }, [filters]);
   React.useEffect(function () {
-    document.title = TITLE$k;
+    document.title = TITLE$l;
   }, []);
   React.useEffect(function () {
     getData();
@@ -14034,7 +14688,7 @@ var getRandomQuestion = function getRandomQuestion(data) {
   return marioCore.api.post(QUESTION_URL$2 + "/random", data);
 };
 
-var TITLE$l = "Session template list";
+var TITLE$m = "Session template list";
 var SESSION_TEMPLATE_URL$1 = "/admin/session-template-learning-support";
 var CREATE_TEMPLATE_URL = "/admin/create-session-template-learning-support";
 
@@ -14138,7 +14792,7 @@ var useSessionTemplateList = function useSessionTemplateList() {
     history.push(url);
   }, []);
   React.useEffect(function () {
-    document.title = TITLE$l;
+    document.title = TITLE$m;
   }, []);
   React.useEffect(function () {
     getData();
@@ -14285,7 +14939,7 @@ var remove$j = function remove(id) {
   return marioCore.api["delete"](SESSION_TEMPLATE_GENERAL_CLASS_URL + "/" + id);
 };
 
-var TITLE$m = "Session template general class list";
+var TITLE$n = "Session template general class list";
 var SESSION_TEMPLATE_GENERAL_CLASS_URL$1 = "/admin/session-template/general-class";
 var CREATE_TEMPLATE_GENERAL_CLASS_URL = "/admin/create-session-template-general-class";
 
@@ -14375,7 +15029,7 @@ var useSessionTemplateGeneralClassList = function useSessionTemplateGeneralClass
     history.push(url);
   }, []);
   React.useEffect(function () {
-    document.title = TITLE$m;
+    document.title = TITLE$n;
   }, []);
   React.useEffect(function () {
     getData();
@@ -16364,7 +17018,7 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
   };
 };
 
-var TITLE$n = "Custom alert list";
+var TITLE$o = "Custom alert list";
 
 var useCustomAlertList = function useCustomAlertList() {
   var customAlertList = reactRedux.useSelector(function (state) {
@@ -16452,7 +17106,7 @@ var useCustomAlertList = function useCustomAlertList() {
     dispatch(marioCore.setLoading(false));
   }, [filters]);
   React.useEffect(function () {
-    document.title = TITLE$n;
+    document.title = TITLE$o;
   }, []);
   React.useEffect(function () {
     getData();
@@ -16467,7 +17121,7 @@ var useCustomAlertList = function useCustomAlertList() {
   };
 };
 
-var header$6 = "Custom alert";
+var header$7 = "Custom alert";
 
 var CustomAlertList = function CustomAlertList() {
   var modal = React.useRef();
@@ -16535,7 +17189,7 @@ var CustomAlertList = function CustomAlertList() {
     when: edited
   }), React__default.createElement("h5", {
     className: "mb-2"
-  }, header$6), React__default.createElement(reactstrap.Row, {
+  }, header$7), React__default.createElement(reactstrap.Row, {
     className: "my-2"
   }, React__default.createElement(reactstrap.Col, {
     md: 4
@@ -17094,7 +17748,7 @@ var useCertificateDetail = function useCertificateDetail() {
   };
 };
 
-var TITLE$o = "Certificate list";
+var TITLE$p = "Certificate list";
 
 var useCertificateList = function useCertificateList() {
   var certificateList = reactRedux.useSelector(function (state) {
@@ -17177,7 +17831,7 @@ var useCertificateList = function useCertificateList() {
     dispatch(marioCore.setLoading(false));
   }, [filters]);
   React.useEffect(function () {
-    document.title = TITLE$o;
+    document.title = TITLE$p;
   }, []);
   React.useEffect(function () {
     getData();
@@ -17192,7 +17846,7 @@ var useCertificateList = function useCertificateList() {
   };
 };
 
-var header$7 = "Certificate";
+var header$8 = "Certificate";
 
 var CertificateList = function CertificateList() {
   var modal = React.useRef();
@@ -17251,7 +17905,7 @@ var CertificateList = function CertificateList() {
     when: edited
   }), React__default.createElement("h5", {
     className: "mb-2"
-  }, header$7), React__default.createElement(reactstrap.Row, {
+  }, header$8), React__default.createElement(reactstrap.Row, {
     className: "my-2"
   }, React__default.createElement(reactstrap.Col, {
     md: 4
@@ -17325,7 +17979,7 @@ var CertificateList = function CertificateList() {
   }))));
 };
 
-var TITLE$p = "Certificate list";
+var TITLE$q = "Certificate list";
 
 var useCertificateList$1 = function useCertificateList() {
   var dispatch = reactRedux.useDispatch();
@@ -17413,7 +18067,7 @@ var useCertificateList$1 = function useCertificateList() {
     }
   }, [listWaiting]);
   React.useEffect(function () {
-    document.title = TITLE$p;
+    document.title = TITLE$q;
     getListWaiting();
     getListApproved();
   }, []);
@@ -17757,60 +18411,159 @@ var CompareTeacher = function CompareTeacher() {
     className: "text-center"
   }, "No compare result."))));
 };
-
-var REPORT_URL = marioCore.BASE_URL + "/api/report";
-var getQuantityReport = function getQuantityReport() {
-  return marioCore.api.get(REPORT_URL + "/quantity");
+
+var REPORT_URL = marioCore.BASE_URL + "/api/report";
+var getAllTotalTime = function getAllTotalTime(filter) {
+  return marioCore.api.get(REPORT_URL + "/dashboard-total-student", {
+    params: filter
+  });
+};
+var getReadinessToLearning = function getReadinessToLearning(filter) {
+  return marioCore.api.get(REPORT_URL + "/top-readiness-learn", {
+    params: filter
+  });
+};
+var getTopLearningStrategies = function getTopLearningStrategies(filter) {
+  return marioCore.api.get(REPORT_URL + "/top-learning-strategies", {
+    params: filter
+  });
+};
+var getStudentByGrade = function getStudentByGrade(filter) {
+  return marioCore.api.get(REPORT_URL + "/student-by-grade", {
+    params: filter
+  });
+};
+var getOverviewQuestionChart = function getOverviewQuestionChart(filter) {
+  return marioCore.api.get(REPORT_URL + "/overview-chart", {
+    params: filter
+  });
+};
+var getFriendCircleItems = function getFriendCircleItems(filter) {
+  return marioCore.api.get(REPORT_URL + "/friend-circles", {
+    params: filter
+  });
+};
+var getActivityCircleItems = function getActivityCircleItems(filter) {
+  return marioCore.api.get(REPORT_URL + "/activity-circles", {
+    params: filter
+  });
 };
-var getLoginCountingReport = function getLoginCountingReport() {
-  return marioCore.api.get(REPORT_URL + "/logincouting");
+var getStudentBySpecialNeed = function getStudentBySpecialNeed(filter) {
+  return marioCore.api.get(REPORT_URL + "/student-by-special-needs", {
+    params: filter
+  });
+};
+var getStudentByAge = function getStudentByAge(filter) {
+  return marioCore.api.get(REPORT_URL + "/student-by-age", {
+    params: filter
+  });
 };
-var getGoalProgressReport = function getGoalProgressReport() {
-  return marioCore.api.get(REPORT_URL + "/goalprogress");
+var getStudentByGender = function getStudentByGender(filter) {
+  return marioCore.api.get(REPORT_URL + "/student-by-gender", {
+    params: filter
+  });
 };
-var getHighImpactLearningStrategyReport = function getHighImpactLearningStrategyReport() {
-  return marioCore.api.get(REPORT_URL + "/highimpactlearningstrategy");
+var getGrades = function getGrades() {
+  return marioCore.api.get(REPORT_URL + "/grade-levels");
 };
-var getPerceivedImpactReport = function getPerceivedImpactReport() {
-  return marioCore.api.get(REPORT_URL + "/perceivedimpact");
+
+var LegalGenderType;
+
+(function (LegalGenderType) {
+  LegalGenderType[LegalGenderType["Male"] = 0] = "Male";
+  LegalGenderType[LegalGenderType["Female"] = 1] = "Female";
+})(LegalGenderType || (LegalGenderType = {}));
+
+var INITIAL_BEST_FRIENDS = {
+  friends: 0,
+  couldBeFriends: 0,
+  supportive: 0,
+  notSpeakingAtTheMoment: 0
 };
-var getGradeReport = function getGradeReport() {
-  return marioCore.api.get(REPORT_URL + "/grade");
+var INITIAL_ACTIVITY_FRIENDS = {
+  like: 0,
+  love: 0,
+  interested: 0,
+  curious: 0
 };
 
-var TITLE$q = "Dashboard";
+var TITLE$r = "Dashboard";
 
 var useDashboard = function useDashboard() {
   var dispatch = reactRedux.useDispatch();
+  var now = new Date();
 
-  var _useState = React.useState(null),
-      loginCounting = _useState[0],
-      setLoginCounting = _useState[1];
+  var _useState = React.useState({
+    startDate: new Date(now.getFullYear(), now.getMonth(), 1).getTime(),
+    endDate: new Date(now.getFullYear(), now.getMonth() + 1, 0).getTime(),
+    studentIds: [],
+    gender: [LegalGenderType.Male, LegalGenderType.Female]
+  }),
+      filter = _useState[0],
+      setFilter = _useState[1];
 
-  var _useState2 = React.useState(null),
-      quantity = _useState2[0],
-      setQuantity = _useState2[1];
+  var _useState2 = React.useState(),
+      listTotalTime = _useState2[0],
+      setListTotalTime = _useState2[1];
 
-  var _useState3 = React.useState(null),
-      goalProgress = _useState3[0],
-      setGoalProgress = _useState3[1];
+  var _useState3 = React.useState(),
+      readinessToLearning = _useState3[0],
+      setReadinessToLearning = _useState3[1];
 
-  var _useState4 = React.useState(null),
-      highImpact = _useState4[0],
-      setHighImpact = _useState4[1];
+  var _useState4 = React.useState(),
+      topLearningStrategies = _useState4[0],
+      setTopLearningStrategies = _useState4[1];
 
-  var _useState5 = React.useState(null),
-      perceivedImpact = _useState5[0],
-      setPerceivedImpact = _useState5[1];
+  var _useState5 = React.useState(),
+      studentByGrade = _useState5[0],
+      setStudentByGrade = _useState5[1];
+
+  var _useState6 = React.useState(),
+      chartOneToOneData = _useState6[0],
+      setChartOneToOneData = _useState6[1];
 
-  var _useState6 = React.useState(null),
-      grade = _useState6[0],
-      setGrade = _useState6[1];
+  var _useState7 = React.useState(),
+      chartClassReflection = _useState7[0],
+      setChartClassReflection = _useState7[1];
 
-  var callApi = React.useCallback(function (apiCaller, setData, defaultData) {
+  var _useState8 = React.useState(),
+      chartConference = _useState8[0],
+      setChartConference = _useState8[1];
+
+  var _useState9 = React.useState(),
+      learningProgress = _useState9[0],
+      setLearningProgress = _useState9[1];
+
+  var _useState10 = React.useState(),
+      friendCircles = _useState10[0],
+      setFriendCircles = _useState10[1];
+
+  var _useState11 = React.useState(),
+      activityCircles = _useState11[0],
+      setActivityCircles = _useState11[1];
+
+  var _useState12 = React.useState(),
+      studentBySpecialNeed = _useState12[0],
+      setStudentBySpecialNeed = _useState12[1];
+
+  var _useState13 = React.useState(),
+      studentByAge = _useState13[0],
+      setStudentByAge = _useState13[1];
+
+  var _useState14 = React.useState(),
+      studentByGender = _useState14[0],
+      setStudentByGender = _useState14[1];
+
+  var _useState15 = React.useState([]),
+      grades = _useState15[0],
+      setGrades = _useState15[1];
+
+  var callApi = React.useCallback(function (apiCaller, setData, defaultData, type) {
     try {
       var _temp2 = _catch(function () {
-        return Promise.resolve(apiCaller()).then(function (res) {
+        return Promise.resolve(type ? apiCaller(_extends({}, filter, {
+          type: type
+        })) : apiCaller(filter)).then(function (res) {
           setData(res.data);
         });
       }, function (err) {
@@ -17827,45 +18580,166 @@ var useDashboard = function useDashboard() {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, []);
+  }, [filter]);
+
+  var callApiNoFilter = function callApiNoFilter(apiCaller, setData, defaultData) {
+    try {
+      var _temp5 = function _temp5() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp6 = _catch(function () {
+        return Promise.resolve(apiCaller()).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$q;
+      document.title = TITLE$r;
       dispatch(marioCore.setLoading(true));
-      return Promise.resolve(Promise.any([callApi(getLoginCountingReport, setLoginCounting, []), callApi(getQuantityReport, setQuantity, {}), callApi(getGoalProgressReport, setGoalProgress, []), callApi(getHighImpactLearningStrategyReport, setHighImpact, {}), callApi(getPerceivedImpactReport, setPerceivedImpact, []), callApi(getGradeReport, setGrade, {})])).then(function () {
+      return Promise.resolve(Promise.any([callApi(getAllTotalTime, setListTotalTime, []), callApi(getReadinessToLearning, setReadinessToLearning, []), callApi(getTopLearningStrategies, setTopLearningStrategies, []), callApi(getStudentByGrade, setStudentByGrade, []), callApi(getOverviewQuestionChart, setChartOneToOneData, [], "OneToOne"), callApi(getOverviewQuestionChart, setChartClassReflection, [], "ClassReflection"), callApi(getOverviewQuestionChart, setChartConference, [], "Conference"), callApi(getOverviewQuestionChart, setLearningProgress, [], "LearningProgress"), callApi(getFriendCircleItems, setFriendCircles, INITIAL_BEST_FRIENDS), callApi(getActivityCircleItems, setActivityCircles, INITIAL_ACTIVITY_FRIENDS), callApi(getStudentBySpecialNeed, setStudentBySpecialNeed, []), callApi(getStudentByAge, setStudentByAge, []), callApi(getStudentByGender, setStudentByGender, [])])).then(function () {
         dispatch(marioCore.setLoading(false));
       });
     } catch (e) {
       return Promise.reject(e);
     }
-  }, []);
+  }, [filter]);
   React.useEffect(function () {
     getData();
+  }, [filter]);
+  React.useEffect(function () {
+    callApiNoFilter(getGrades, setGrades, []);
   }, []);
   return {
-    loginCounting: loginCounting,
-    quantity: quantity,
-    goalProgress: goalProgress,
-    highImpact: highImpact,
-    perceivedImpact: perceivedImpact,
-    grade: grade
+    setFilter: setFilter,
+    filter: filter,
+    listTotalTime: listTotalTime,
+    readinessToLearning: readinessToLearning,
+    topLearningStrategies: topLearningStrategies,
+    studentByGrade: studentByGrade,
+    chartOneToOneData: chartOneToOneData,
+    chartClassReflection: chartClassReflection,
+    chartConference: chartConference,
+    learningProgress: learningProgress,
+    friendCircles: friendCircles,
+    activityCircles: activityCircles,
+    studentBySpecialNeed: studentBySpecialNeed,
+    studentByAge: studentByAge,
+    studentByGender: studentByGender,
+    grades: grades
   };
 };
 
-var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy"};
+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-gender":"_31VDE","form-filter-grade":"_1Pm1w"};
 
 var DashboardCard = function DashboardCard(_ref) {
   var label = _ref.label,
       children = _ref.children;
   return React__default.createElement("div", {
     className: styles$1["dashboard-card"]
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center justify-content-between"
   }, React__default.createElement("h5", {
     className: "mb-2"
-  }, label), React__default.createElement("div", {
+  }, label)), React__default.createElement("div", {
     className: "flex-grow-1 d-flex flex-column justify-content-center"
   }, children));
 };
 
+var ReadinessToLearn = function ReadinessToLearn(_ref) {
+  var data = _ref.data;
+  var categories = React.useMemo(function () {
+    if (!data) return [];
+
+    try {
+      return data === null || data === void 0 ? void 0 : data.map(function (item) {
+        return item.createdAt;
+      });
+    } catch (_unused) {
+      return [];
+    }
+  }, [data]);
+  if (!data) return React__default.createElement(marioCore.Loading, null);
+  var options = {
+    chart: {
+      type: "radialBar",
+      height: 350,
+      stacked: true,
+      stackType: "100%",
+      toolbar: {
+        show: false
+      }
+    },
+    noData: {
+      text: "NO DATA",
+      align: "center",
+      verticalAlign: "middle",
+      offsetX: 0,
+      offsetY: 0,
+      style: {
+        color: undefined,
+        fontSize: "14px",
+        fontFamily: undefined
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: "80%"
+      }
+    },
+    colors: ["#FFB04F", "#78B6E2", "#F08281", "#40D2CC"],
+    stroke: {
+      lineCap: "round"
+    },
+    labels: (data === null || data === void 0 ? void 0 : data.map(function (i) {
+      return i.questionText;
+    })) || [],
+    xaxis: {
+      categories: categories
+    },
+    fill: {
+      opacity: 1
+    },
+    legend: {
+      position: "bottom",
+      show: true,
+      fontSize: "16px",
+      onItemClick: {
+        toggleDataSeries: true
+      },
+      onItemHover: {
+        highlightDataSeries: false
+      }
+    }
+  };
+  return React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
+    options: options,
+    series: (data === null || data === void 0 ? void 0 : data.map(function (i) {
+      return i.percentQuestion.toFixed(2);
+    })) || [],
+    type: "radialBar",
+    height: 350
+  }));
+};
+
 var Loading = function Loading() {
   return React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-center"
@@ -17887,354 +18761,955 @@ var Loading = function Loading() {
   }, "Loading...")));
 };
 
-var colors = ["rgba(129, 236, 236, 0.8)", "rgba(116, 185, 255, 0.8)", "rgba(250, 177, 160, 0.8)", "rgba(255, 234, 167, 0.8)", "rgba(178, 190, 195, 0.8)", "rgba(85, 239, 196, 0.8)", "rgba(120, 111, 166, 0.8)", "rgba(243, 166, 131, 0.8)"];
+var colors = ["#40D2CC", "#1D74C5", "#78B6E2", "#FFC783", "#0D9994"];
 
-var getColors = function getColors(length) {
-  if (colors.length >= length) return colors;
-  var newColors = [].concat(colors);
+var TopLearningStrategy = function TopLearningStrategy(_ref) {
+  var _data$learningStrateg, _data$learningStrateg2;
 
-  while (newColors.length < length) {
-    newColors = [].concat(newColors, colors);
-  }
+  var data = _ref.data;
+  if (!data) return React__default.createElement(Loading, null);
+  var options = {
+    chart: {
+      width: 350,
+      type: "pie"
+    },
+    noData: {
+      text: "NO DATA",
+      align: "center",
+      verticalAlign: "middle",
+      offsetX: 0,
+      offsetY: 0,
+      style: {
+        color: undefined,
+        fontSize: "14px",
+        fontFamily: undefined
+      }
+    },
+    labels: (data === null || data === void 0 ? void 0 : (_data$learningStrateg = data.learningStrategies) === null || _data$learningStrateg === void 0 ? void 0 : _data$learningStrateg.map(function (i) {
+      return i.learningStrategyName;
+    })) || [],
+    colors: colors,
+    legend: {
+      show: true,
+      position: "bottom"
+    }
+  };
+  return React__default.createElement("div", {
+    className: "d-flex h-100 justify-content-center"
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-end justify-content-center"
+  }, React__default.createElement(ReactApexChart, {
+    options: options,
+    series: (data === null || data === void 0 ? void 0 : (_data$learningStrateg2 = data.learningStrategies) === null || _data$learningStrateg2 === void 0 ? void 0 : _data$learningStrateg2.map(function (i) {
+      return i.usageCount;
+    })) || [],
+    type: "pie",
+    height: 350
+  })));
+};
 
-  return newColors;
+var TotalCard = function TotalCard(_ref) {
+  var icon = _ref.icon,
+      title = _ref.title,
+      value = _ref.value;
+  return React__default.createElement("div", {
+    className: "border p-3 rounded mr-3 mb-3"
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center"
+  }, icon, React__default.createElement("p", {
+    className: styles$1["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$1["value-card"]
+  }, value)));
 };
 
-var HighImpact = function HighImpact(_ref) {
+var CustomBarChart = function CustomBarChart(_ref) {
   var data = _ref.data;
-  var colors = React.useMemo(function () {
-    var _Object$keys;
 
-    if (!data) return [];
-    return getColors(((_Object$keys = Object.keys(data)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) || 0);
-  }, [data]);
-  var ratings = React.useMemo(function () {
-    if (!data) return [];
-    return Object.values(data);
-  }, [data]);
-  var learningStrategies = React.useMemo(function () {
-    if (!data) return [];
+  var _useState = React.useState(600),
+      widthChartOne = _useState[0],
+      setWidthChart = _useState[1];
+
+  var _useState2 = React.useState(400),
+      heightChartOne = _useState2[0],
+      setHeightChart = _useState2[1];
+
+  var wellbeing = [];
+  var growth = [];
+  var relations = [];
+  var productiviy = [];
+  var academic = [];
+  var selfEfficacy = [];
+  var focus = [];
+  var energy = [];
+  var hapiness = [];
+  var mood = [];
+  var learningProgress = [];
+  var chatMonth = [];
+
+  var _useState3 = React.useState({
+    chart: {
+      type: "line",
+      toolbar: {
+        show: false
+      },
+      height: heightChartOne,
+      zoom: {
+        enabled: false
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    legend: {
+      position: "top",
+      horizontalAlign: "center",
+      width: 3 * widthChartOne / 5,
+      offsetX: 20,
+      markers: {
+        width: 12,
+        radius: 0
+      }
+    },
+    stroke: {
+      width: 2
+    },
+    markers: {
+      size: 5
+    },
+    colors: ["#082FA2", "#1A55AE", "#3C65E0", "#6D88E8", "#1E80B9", "#1C77AC", "#4992BD", "#77ADCD", "#3DCBCB", "#1DBAB4", "#61CBCB"],
+    xaxis: {
+      categories: chatMonth
+    },
+    yaxis: {
+      title: {
+        text: "High",
+        rotate: 0,
+        offsetX: -20,
+        offsetY: -265
+      },
+      labels: {
+        offsetX: 10,
+        show: false
+      }
+    }
+  }),
+      optionsOne = _useState3[0],
+      setOptions = _useState3[1];
+
+  var _useState4 = React.useState([{
+    name: "Wellbeing",
+    data: [0]
+  }, {
+    name: "Growth",
+    data: [0]
+  }, {
+    name: "Relations",
+    data: [0]
+  }, {
+    name: "Productivity",
+    data: [0]
+  }, {
+    name: "Academic",
+    data: [0]
+  }, {
+    name: "Self-Efficacy",
+    data: [0]
+  }, {
+    name: "Focus",
+    data: [0]
+  }, {
+    name: "Energy",
+    data: [0]
+  }, {
+    name: "Hapiness",
+    data: [0]
+  }, {
+    name: "Mood",
+    data: [0]
+  }, {
+    name: "Learning Progress",
+    data: [0]
+  }]),
+      series = _useState4[0],
+      setSeries = _useState4[1];
 
+  var screenWidthMe = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  React.useEffect(function () {
+    if (screenWidthMe > 1400) {
+      setWidthChart(932);
+      setHeightChart(680);
+    }
+  }, []);
+
+  var getData = function getData() {
     try {
-      var results = Object.keys(data).map(function (key, index) {
-        return {
-          name: key,
-          color: colors[index]
-        };
+      !!data && data.overviewQuestionChoice.map(function (element) {
+        chatMonth.push(element.month);
+        element.resultQuestion.map(function (data, index) {
+          if (data.questionText == "") {
+            mood.push(null);
+            learningProgress.push(null);
+            wellbeing.push(null);
+            growth.push(null);
+            academic.push(null);
+            selfEfficacy.push(null);
+            energy.push(null);
+            focus.push(null), hapiness.push(null);
+            relations.push(null);
+            productiviy.push(null);
+            return;
+          } else {
+            var result = data.avgOfStudentChoice.toFixed(2);
+
+            if (index == 0) {
+              wellbeing.push(result);
+              mood.push(0);
+              learningProgress.push(0);
+            } else if (index == 1) {
+              growth.push(result);
+            } else if (index == 2) {
+              relations.push(result);
+            } else if (index == 3) {
+              productiviy.push(result);
+            } else if (index == 4) {
+              academic.push(result);
+            } else if (index == 5) {
+              selfEfficacy.push(result);
+            } else if (index == 6) {
+              energy.push(result);
+            } else if (index == 7) {
+              focus.push(result);
+            } else if (index == 8) {
+              hapiness.push(result);
+            }
+          }
+        });
       });
-      return results;
-    } catch (_unused) {
-      return [];
+      setOptions({
+        chart: {
+          type: "line",
+          toolbar: {
+            show: false
+          },
+          height: heightChartOne,
+          zoom: {
+            enabled: false
+          }
+        },
+        dataLabels: {
+          enabled: false
+        },
+        legend: {
+          position: "top",
+          horizontalAlign: "center",
+          width: 4 * widthChartOne / 5,
+          offsetX: 20,
+          markers: {
+            width: 12,
+            radius: 0
+          }
+        },
+        markers: {
+          size: 5
+        },
+        colors: ["#082FA2", "#1A55AE", "#3C65E0", "#6D88E8", "#1E80B9", "#1C77AC", "#4992BD", "#77ADCD", "#3DCBCB", "#1DBAB4", "#61CBCB"],
+        xaxis: {
+          categories: chatMonth
+        },
+        yaxis: {
+          labels: {
+            offsetX: 0,
+            show: false
+          }
+        }
+      });
+      setSeries([{
+        name: "Wellbeing",
+        data: wellbeing
+      }, {
+        name: "Growth",
+        data: growth
+      }, {
+        name: "Relations",
+        data: relations
+      }, {
+        name: "Productivity",
+        data: productiviy
+      }, {
+        name: "Academic",
+        data: academic
+      }, {
+        name: "Self-Efficacy",
+        data: selfEfficacy
+      }, {
+        name: "Focus",
+        data: focus
+      }, {
+        name: "Energy",
+        data: energy
+      }, {
+        name: "Hapiness",
+        data: hapiness
+      }, {
+        name: "Mood",
+        data: mood
+      }, {
+        name: "Learning Progress",
+        data: learningProgress
+      }]);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
     }
+  };
+
+  React.useEffect(function () {
+    getData();
   }, [data]);
-  if (!data) return React__default.createElement(Loading, null);
-  var series = [{
-    name: "",
-    data: ratings
-  }];
+  var optionOneToOne = optionsOne;
+  return React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
+    options: optionOneToOne,
+    series: series,
+    type: "line",
+    width: "100%",
+    height: 350
+  }));
+};
+
+var StudentByGrade = function StudentByGrade(_ref) {
+  var data = _ref.data;
   var options = {
     chart: {
-      height: 350,
-      type: "bar",
-      toolbar: {
-        show: false
-      }
+      height: 350
     },
-    colors: colors,
     plotOptions: {
       bar: {
-        columnWidth: "45%",
-        distributed: true
+        borderRadius: 4,
+        horizontal: true
       }
     },
     dataLabels: {
       enabled: false
     },
+    grid: {
+      show: false
+    },
+    colors: ["#1D74C5", "#4B92CE", "#78B6E2", "#A4D1F0", "#4B92CE"]
+  };
+  var series = [{
+    data: (data === null || data === void 0 ? void 0 : data.map(function (i) {
+      return i.quantity;
+    })) || []
+  }];
+  return React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
+    options: options,
+    series: series,
+    type: "bar",
+    width: "100%",
+    height: 350
+  }));
+};
+
+var StudentByGender = function StudentByGender(_ref) {
+  var data = _ref.data;
+  var series = !!data ? [data.male, data.female] : [];
+  var options = {
+    labels: ["Female", "Male"],
+    colors: ["#A4D1F0", "#40D2CC"],
     legend: {
       show: false
-    },
-    xaxis: {
-      categories: learningStrategies.map(function (item) {
-        return item.name.substring(0, 15) + "...";
-      })
-    },
-    yaxis: {
-      labels: {
-        formatter: function formatter(val) {
-          return "" + val.toFixed(0);
-        }
-      }
     }
   };
-  return React__default.createElement("div", null, React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
+  return React__default.createElement("div", {
+    className: "d-flex h-100 justify-content-center"
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-end justify-content-center"
+  }, React__default.createElement(ReactApexChart, {
     options: options,
     series: series,
-    type: "bar",
-    height: 350
-  })), React__default.createElement("div", {
-    className: "d-flex flex-wrap"
-  }, learningStrategies.map(function (item) {
-    return React__default.createElement("div", {
-      key: item.name,
-      className: "d-flex align-items-center mb-2 mr-3"
-    }, React__default.createElement("span", {
-      className: "plain-color-square mr-2",
-      style: {
-        backgroundColor: item.color
-      }
-    }), React__default.createElement("span", null, item.name));
+    type: "pie",
+    height: 350,
+    width: "100%"
   })));
 };
 
-var colors$1 = ["#1abc9c", "#c0392b"];
-
-var LoginCouting = function LoginCouting(_ref) {
+var StudentWithSpecialNeeds = function StudentWithSpecialNeeds(_ref) {
   var data = _ref.data;
-  if (!data) return React__default.createElement(Loading, null);
-  var categories = data.map(function (item) {
-    return format(new Date(item.date), marioCore.DATE_FORMAT);
-  });
-  var teacherCount = data.map(function (item) {
-    return item.teacherLoginCount;
-  });
-  var studentCount = data.map(function (item) {
-    return item.studentLoginCount;
-  });
-  var series = [{
-    name: "Teacher",
-    data: teacherCount,
-    color: colors$1[0]
-  }, {
-    name: "Student",
-    data: studentCount,
-    color: colors$1[1]
-  }];
   var options = {
-    chart: {
-      height: 350,
-      type: "area",
-      toolbar: {
-        show: false
-      }
-    },
-    stroke: {
-      width: 2,
-      curve: "straight"
-    },
-    markers: {
-      size: 4,
-      colors: ["#fff"],
-      strokeColors: colors$1,
-      strokeWidth: 2,
-      strokeOpacity: 0.9,
-      strokeDashArray: 0,
-      fillOpacity: 1,
-      shape: "circle",
-      radius: 2,
-      offsetX: 0,
-      offsetY: 0,
-      onClick: undefined,
-      onDblClick: undefined,
-      showNullDataPoints: true,
-      hover: {
-        size: undefined,
-        sizeOffset: 3
-      }
-    },
+    colors: ["#CEF7F5", "#0D9994", "#1CB7B1", "#40D2CC", "#80E7E2"],
     legend: {
       show: false
     },
-    xaxis: {
-      categories: categories
-    }
+    labels: (data === null || data === void 0 ? void 0 : data.map(function (i) {
+      return i.nameSpecial;
+    })) || []
   };
   return React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
     options: options,
-    series: series,
-    type: "line",
+    series: (data === null || data === void 0 ? void 0 : data.map(function (i) {
+      return i.numberSpecial;
+    })) || [],
+    type: "donut",
+    width: "100%",
     height: 350
   }));
 };
 
-var colors$2 = ["#00cec9", "#00b894"];
-
-var PerceivedImpact = function PerceivedImpact(_ref) {
+var StudentByAge = function StudentByAge(_ref) {
   var data = _ref.data;
-  if (!data) return React__default.createElement(Loading, null);
-  var series = [{
-    name: "Student",
-    data: data.map(function (item) {
-      return item.studentRating;
-    })
-  }];
-  var categories = data.map(function (item) {
-    return item.learningStrategyName.substring(0, 15) + "...";
-  });
   var options = {
     chart: {
-      type: "bar",
-      height: 350,
-      toolbar: {
-        show: false
-      }
+      height: 350
     },
-    colors: colors$2,
     plotOptions: {
       bar: {
-        horizontal: false,
-        columnWidth: "55%"
+        columnWidth: "45%",
+        distributed: true
       }
     },
     dataLabels: {
       enabled: false
     },
-    stroke: {
-      show: true,
-      width: 2,
-      colors: ["transparent"]
-    },
-    xaxis: {
-      categories: categories
+    legend: {
+      show: false
     },
-    fill: {
-      opacity: 1
+    noData: {
+      text: "NO DATA",
+      offsetX: 0,
+      offsetY: 0
     },
-    legend: {
-      onItemClick: {
-        toggleDataSeries: false
-      },
-      onItemHover: {
-        highlightDataSeries: false
-      }
+    colors: ["#40D2CC", "#1CB7B1", "#0D9994", "#80E7E2", "#40D2CC"],
+    xaxis: {
+      categories: ["3-5", "6-8", "9-12", "13-15", "16-18"]
     }
   };
+  var series = [{
+    data: !!data ? [data === null || data === void 0 ? void 0 : data.threeToFive, data === null || data === void 0 ? void 0 : data.sixToEight, data === null || data === void 0 ? void 0 : data.nineToTwelve, data === null || data === void 0 ? void 0 : data.thirteenToFifteen, data === null || data === void 0 ? void 0 : data.sixteenToEighteen] : []
+  }];
   return React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
     options: options,
     series: series,
     type: "bar",
+    width: "100%",
     height: 350
   }));
 };
 
-var colors$3 = ["#00b894", "#00cec9", "#0984e3"];
+var styles$2 = {"block-circle":"_2Q9xO","block-item-3":"_3r61v","item-circle":"_2b1Cw","block-item-4":"_2Nlax"};
 
-var Quantity = function Quantity(_ref) {
-  var data = _ref.data;
-  if (!data) return React__default.createElement(Loading, null);
-  var teacherPercentage = data.teacherPercentage,
-      studentPercentage = data.studentPercentage,
-      assistantPercentage = data.assistantPercentage,
-      numberOfTeachers = data.numberOfTeachers,
-      numberOfStudents = data.numberOfStudents,
-      numberOfAssistants = data.numberOfAssistants;
-  var series = [teacherPercentage, studentPercentage, assistantPercentage].map(function (number) {
-    return Number(number.toFixed(2));
-  });
-  var options = {
-    chart: {
-      width: 380,
-      type: "pie"
-    },
-    labels: ["Teachers", "Students", "Assistants"],
-    colors: colors$3,
-    legend: {
-      show: false
-    },
-    responsive: [{
-      breakpoint: 480,
-      options: {
-        chart: {
-          width: 200
-        }
-      }
-    }]
+var cssConfig = function cssConfig(width, height, background) {
+  return {
+    width: width,
+    height: height,
+    background: background
   };
-  var details = [{
-    label: "Teachers",
-    color: colors$3[0],
-    value: numberOfTeachers
-  }, {
-    label: "Students",
-    color: colors$3[1],
-    value: numberOfStudents
-  }, {
-    label: "Assistants",
-    color: colors$3[2],
-    value: numberOfAssistants
-  }];
+};
+
+var Circle = function Circle(_ref) {
+  var title = _ref.title,
+      quality = _ref.quality,
+      width = _ref.width,
+      height = _ref.height,
+      background = _ref.background,
+      key = _ref.key;
   return React__default.createElement("div", {
-    className: "d-flex h-100"
+    className: styles$2["block-circle"] + " " + styles$2["block-item-" + key],
+    style: cssConfig(width, height, background)
   }, React__default.createElement("div", {
-    className: "d-flex justify-content-center align-items-end flex-grow-1"
+    className: styles$2["item-circle"]
+  }, React__default.createElement("h2", {
+    className: styles$2["title-circle"]
+  }, title), React__default.createElement("p", {
+    className: styles$2["number-circle"]
+  }, quality)));
+};
+
+var ItemCircle = function ItemCircle(_ref) {
+  var background = _ref.background,
+      title = _ref.title;
+  var cssBackground = {
+    background: background,
+    width: "16px",
+    height: "16px",
+    borderRadius: "4px",
+    display: "inline-block",
+    marginRight: "10px"
+  };
+  var cssLabel = {
+    color: "#000",
+    fontSize: "16px",
+    display: "inline-block",
+    marginBottom: "0px"
+  };
+  return React__default.createElement("div", {
+    className: "" + styles$2["item-circle"],
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, React__default.createElement("span", {
+    className: styles$2["round-title"],
+    style: cssBackground
+  }), React__default.createElement("h2", {
+    style: cssLabel
+  }, title));
+};
+
+var styles$3 = {"block-chart-circle":"_3DImv","block-view":"_1iPJ6","button-view":"_3lxsP","block-item-chart-circle-1":"_30j_l","block-item-chart-circle-2":"_34Snf","block-item-chart-circle-3":"_2WBPR","block-item-chart-circle-4":"_35giW","list-item-note":"_LR7-A","item-note-1":"_dVojB","item-note-2":"_1ALLM","item-note-3":"_3OII4","item-note-4":"_1t4JS","list-item-note-mobile":"_3Rj17","button-view-mobile":"_3Yvnm","chart-narrow":"_3UN7n"};
+
+var CircleChart = function CircleChart(_ref) {
+  var circleChartItems = _ref.circleChartItems;
+  var isSidebarShow = !!reactRedux.useSelector(function (state) {
+    var _state$common;
+
+    return (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.sidebarShow;
+  });
+  return React__default.createElement("div", {
+    className: styles$3["block-chart-circle"] + " " + (isSidebarShow && styles$3["chart-narrow"])
   }, React__default.createElement("div", {
-    className: styles$1["quantity-table"]
-  }, React__default.createElement(reactstrap.Table, {
-    responsive: true,
-    hover: true,
-    bordered: true,
-    size: "sm"
-  }, React__default.createElement("tbody", null, details.map(function (item) {
-    return React__default.createElement("tr", {
-      key: item.label
-    }, React__default.createElement("td", null, item.label), React__default.createElement("td", {
-      className: "text-center"
-    }, React__default.createElement("div", {
-      className: "custom-checkbox-square",
-      style: {
-        backgroundColor: item.color
-      }
-    })), React__default.createElement("td", null, item.value));
-  }))), React__default.createElement("p", null, "The number of user for each role"))), React__default.createElement("div", {
-    className: "d-flex align-items-end"
-  }, React__default.createElement(ReactApexChart, {
-    options: options,
-    series: series,
-    type: "pie",
-    width: 380
+    className: styles$3["item-chart-circle"]
+  }, !!circleChartItems && circleChartItems.map(function (record) {
+    return React__default.createElement("div", {
+      className: styles$3["block-item-chart-circle-" + record.id],
+      key: record.id
+    }, React__default.createElement(Circle, {
+      title: record.name,
+      quality: record.number,
+      background: record.background,
+      width: record.width,
+      height: record.height,
+      key: record.id
+    }));
+  })), React__default.createElement("div", {
+    className: "" + styles$3["list-item-note"]
+  }, !!circleChartItems && circleChartItems.map(function (record) {
+    return React__default.createElement("div", {
+      className: styles$3["item-note-" + record.id],
+      key: record.id
+    }, React__default.createElement(ItemCircle, {
+      title: record.name,
+      background: record.background
+    }));
   })));
 };
 
+var friendCircleItems = function friendCircleItems(_ref) {
+  var _ref$bestFriends = _ref.bestFriends,
+      bestFriends = _ref$bestFriends === void 0 ? 0 : _ref$bestFriends,
+      _ref$friends = _ref.friends,
+      friends = _ref$friends === void 0 ? 0 : _ref$friends,
+      _ref$couldBeFriends = _ref.couldBeFriends,
+      couldBeFriends = _ref$couldBeFriends === void 0 ? 0 : _ref$couldBeFriends,
+      _ref$supportive = _ref.supportive,
+      supportive = _ref$supportive === void 0 ? 0 : _ref$supportive;
+  return [{
+    id: 1,
+    name: "Best Friends",
+    number: bestFriends,
+    background: "#9DECF9",
+    width: 207,
+    height: 207
+  }, {
+    id: 2,
+    name: "Friend",
+    number: friends,
+    background: "#B2F5EA",
+    width: 145,
+    height: 145
+  }, {
+    id: 3,
+    name: "Supportive",
+    number: supportive,
+    background: "#CEEDFF",
+    width: 140,
+    height: 140
+  }, {
+    id: 4,
+    name: "Could be Friend",
+    number: couldBeFriends,
+    background: "#E2E8F0",
+    width: 150,
+    height: 150
+  }];
+};
+var activityCircleItems = function activityCircleItems(_ref2) {
+  var _ref2$like = _ref2.like,
+      like = _ref2$like === void 0 ? 0 : _ref2$like,
+      _ref2$love = _ref2.love,
+      love = _ref2$love === void 0 ? 0 : _ref2$love,
+      _ref2$interested = _ref2.interested,
+      interested = _ref2$interested === void 0 ? 0 : _ref2$interested,
+      _ref2$curious = _ref2.curious,
+      curious = _ref2$curious === void 0 ? 0 : _ref2$curious;
+  return [{
+    id: 1,
+    name: "Like",
+    number: like,
+    background: "#9DECF9",
+    width: 207,
+    height: 207
+  }, {
+    id: 2,
+    name: "Love",
+    number: love,
+    background: "#B2F5EA",
+    width: 145,
+    height: 145
+  }, {
+    id: 3,
+    name: "Interested",
+    number: interested,
+    background: "#CEEDFF",
+    width: 148,
+    height: 148
+  }, {
+    id: 4,
+    name: "Curious",
+    number: curious,
+    background: "#E2E8F0",
+    width: 150,
+    height: 150
+  }];
+};
+var gradeOptions = function gradeOptions(grades) {
+  return grades.map(function (grade, index) {
+    return {
+      label: grade,
+      value: index
+    };
+  });
+};
+var genderOptions = [{
+  value: LegalGenderType.Male,
+  label: "Male"
+}, {
+  value: LegalGenderType.Female,
+  label: "Female"
+}];
+
+var InputSelector = function InputSelector(_ref) {
+  var onChange = _ref.onChange,
+      placeholder = _ref.placeholder,
+      options = _ref.options,
+      _ref$isMultiSelect = _ref.isMultiSelect,
+      isMultiSelect = _ref$isMultiSelect === void 0 ? false : _ref$isMultiSelect;
+
+  var _useState = React.useState(""),
+      searchString = _useState[0],
+      setSearchString = _useState[1];
+
+  var _useState2 = React.useState(),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var handleChange = function handleChange(option) {
+    onChange(option);
+    setValue(option);
+  };
+
+  var customSelector = {
+    menu: function menu(provided) {
+      return _extends({}, provided, {
+        zIndex: 9
+      });
+    }
+  };
+  return React__default.createElement(marioCore.CustomSelector, {
+    isClearable: true,
+    options: options,
+    inputValue: searchString,
+    onInputChange: function onInputChange(inputValue) {
+      return setSearchString(inputValue);
+    },
+    isLoading: false,
+    placeholder: placeholder,
+    isMulti: isMultiSelect,
+    value: value,
+    onChange: handleChange,
+    styles: customSelector
+  });
+};
+
 var Dashboard = function Dashboard() {
   var _useDashboard = useDashboard(),
-      loginCounting = _useDashboard.loginCounting,
-      quantity = _useDashboard.quantity,
-      highImpact = _useDashboard.highImpact,
-      perceivedImpact = _useDashboard.perceivedImpact;
+      listTotalTime = _useDashboard.listTotalTime,
+      readinessToLearning = _useDashboard.readinessToLearning,
+      topLearningStrategies = _useDashboard.topLearningStrategies,
+      setFilter = _useDashboard.setFilter,
+      filter = _useDashboard.filter,
+      studentByGrade = _useDashboard.studentByGrade,
+      chartOneToOneData = _useDashboard.chartOneToOneData,
+      chartClassReflection = _useDashboard.chartClassReflection,
+      chartConference = _useDashboard.chartConference,
+      learningProgress = _useDashboard.learningProgress,
+      friendCircles = _useDashboard.friendCircles,
+      activityCircles = _useDashboard.activityCircles,
+      studentBySpecialNeed = _useDashboard.studentBySpecialNeed,
+      studentByAge = _useDashboard.studentByAge,
+      studentByGender = _useDashboard.studentByGender,
+      grades = _useDashboard.grades;
 
+  var user = reactRedux.useSelector(function (state) {
+    return state.common.user;
+  });
   var cards = [{
-    label: "High-impact learning strategies of current school year",
-    children: React__default.createElement(HighImpact, {
-      data: highImpact
+    label: "Top learning strategies",
+    children: React__default.createElement(TopLearningStrategy, {
+      data: topLearningStrategies
+    })
+  }, {
+    label: "Readiness to learn",
+    children: React__default.createElement(ReadinessToLearn, {
+      data: readinessToLearning
+    })
+  }];
+  var listChartLeft = [{
+    label: "1-to-1",
+    children: React__default.createElement(CustomBarChart, {
+      data: chartOneToOneData
     })
   }, {
-    label: "Learning strategies perceived impact",
-    children: React__default.createElement(PerceivedImpact, {
-      data: perceivedImpact
+    label: "Class Reflection",
+    children: React__default.createElement(CustomBarChart, {
+      data: chartClassReflection
     })
   }, {
-    label: "Students & teachers logins per day",
-    children: React__default.createElement(LoginCouting, {
-      data: loginCounting
+    label: "Conferences",
+    children: React__default.createElement(CustomBarChart, {
+      data: chartConference
     })
   }, {
-    label: "Number of students, teachers, assistants",
-    children: React__default.createElement(Quantity, {
-      data: quantity
+    label: "Learning Progress",
+    children: React__default.createElement(CustomBarChart, {
+      data: learningProgress
     })
   }];
-  return React__default.createElement("div", null, React__default.createElement("h4", {
-    className: "mb-5"
-  }, "DASHBOARD"), React__default.createElement(reactstrap.Row, {
-    className: "mb-2"
+  var listChartRight = [{
+    label: "Students by Gender",
+    children: React__default.createElement(StudentByGender, {
+      data: studentByGender
+    })
+  }, {
+    label: "Students with Special Needs",
+    children: React__default.createElement(StudentWithSpecialNeeds, {
+      data: studentBySpecialNeed
+    })
+  }, {
+    label: "Students by Grade",
+    children: React__default.createElement(StudentByGrade, {
+      data: studentByGrade
+    })
+  }, {
+    label: "Students by Age",
+    children: React__default.createElement(StudentByAge, {
+      data: studentByAge
+    })
+  }];
+  var listChartBottom = [{
+    label: "Friend Circle",
+    children: friendCircles && React__default.createElement(CircleChart, {
+      circleChartItems: friendCircleItems(friendCircles)
+    })
+  }, {
+    label: "Activity Circle",
+    children: activityCircles && React__default.createElement(CircleChart, {
+      circleChartItems: activityCircleItems(activityCircles)
+    })
+  }];
+  var totalCardData = [{
+    icon: React__default.createElement(bi.BiMessageRoundedDetail, {
+      className: styles$1["size-icon"]
+    }),
+    title: "Total 1-to-1",
+    value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.totalOneToOne,
+    isUp: true,
+    deviant: "2",
+    filter: "this week"
+  }, {
+    icon: React__default.createElement(io.IoMdStopwatch, {
+      className: styles$1["size-icon"]
+    }),
+    title: "Total time 1-to-1",
+    value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.totalTimeOneToOne,
+    isUp: true,
+    deviant: "17 min",
+    filter: "this week"
+  }, {
+    icon: React__default.createElement(bi.BiMessageRoundedDetail, {
+      className: styles$1["size-icon"]
+    }),
+    title: "Total conferences",
+    value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.totalConference,
+    isUp: false,
+    deviant: "-4",
+    filter: "this week"
+  }, {
+    icon: React__default.createElement(md.MdScreenShare, {
+      className: styles$1["size-icon"]
+    }),
+    title: "Total time conferences",
+    value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.totalTimeConference,
+    isUp: true,
+    deviant: "8 min",
+    filter: "this week"
+  }, {
+    icon: React__default.createElement(ai.AiOutlineFileDone, {
+      className: styles$1["size-icon"]
+    }),
+    title: "AVS checkin class reflections",
+    value: listTotalTime === null || listTotalTime === void 0 ? void 0 : listTotalTime.avgClassReflection,
+    isUp: false,
+    deviant: "-15%",
+    filter: "this week"
+  }];
+
+  var handleChangeStartTime = function handleChangeStartTime(date) {
+    setFilter(_extends({}, filter, {
+      startDate: new Date(date).getTime()
+    }));
+  };
+
+  var handleChangeEndTime = function handleChangeEndTime(date) {
+    setFilter(_extends({}, filter, {
+      endDate: new Date(date).getTime()
+    }));
+  };
+
+  var handleFormatDate = function handleFormatDate(date) {
+    var dateTime = new Date(date).toISOString().slice(0, 10);
+    return dateTime;
+  };
+
+  var handleFilterGender = function handleFilterGender(option) {
+    setFilter(_extends({}, filter, {
+      gender: option ? [option.value] : genderOptions.map(function (i) {
+        return i.value;
+      })
+    }));
+  };
+
+  var handleFilterGrades = function handleFilterGrades(options) {
+    setFilter(_extends({}, filter, {
+      grade: options.map(function (i) {
+        return i.label;
+      })
+    }));
+  };
+
+  return React__default.createElement("div", {
+    className: "" + styles$1["block-dashboard"]
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center justify-content-between"
+  }, React__default.createElement("h4", null, "Hey ", user.lastName), React__default.createElement("div", {
+    className: "text-center"
+  }, React__default.createElement("button", {
+    id: "toggler",
+    onClick: function noRefCheck() {},
+    className: styles$1["btn-filter"] + " d-flex align-items-center cursor-pointer"
+  }, React__default.createElement(fi.FiFilter, {
+    className: "" + styles$1["color-filter"]
+  }), React__default.createElement("p", {
+    className: styles$1["color-filter"] + " my-0 mx-2"
+  }, "Filter")))), React__default.createElement("div", {
+    className: "d-flex justify-content-end py-4"
+  }, React__default.createElement(reactstrap.UncontrolledCollapse, {
+    toggler: "#toggler",
+    className: "" + styles$1["block-collapse"]
+  }, React__default.createElement("div", {
+    className: "" + styles$1["bock-filter-left"]
+  }, React__default.createElement("input", {
+    type: "date",
+    className: "" + styles$1["form-date-picker"],
+    onChange: function onChange(e) {
+      return handleChangeStartTime(e.target.value);
+    },
+    value: handleFormatDate(filter.startDate)
+  }), React__default.createElement("input", {
+    type: "date",
+    className: "" + styles$1["form-date-picker"],
+    onChange: function onChange(e) {
+      return handleChangeEndTime(e.target.value);
+    },
+    value: handleFormatDate(filter.endDate)
+  })), React__default.createElement("div", {
+    className: "" + styles$1["bock-filter-right"]
+  }, React__default.createElement("div", {
+    className: "" + styles$1["form-filter-gender"]
+  }, React__default.createElement(InputSelector, {
+    options: genderOptions,
+    onChange: handleFilterGender,
+    placeholder: "All Gender"
+  })), React__default.createElement("div", {
+    className: "" + styles$1["form-filter-grade"]
+  }, React__default.createElement(InputSelector, {
+    options: gradeOptions(grades),
+    onChange: handleFilterGrades,
+    placeholder: "All Grade",
+    isMultiSelect: true
+  }))))), React__default.createElement("div", {
+    className: "d-flex align-items-center flex-wrap py-2 px-3"
+  }, totalCardData.map(function (item) {
+    return React__default.createElement(TotalCard, {
+      icon: item.icon,
+      title: item.title,
+      value: item.value,
+      isUp: item.isUp,
+      deviant: item.deviant,
+      filter: item.filter
+    });
+  })), React__default.createElement(reactstrap.Row, {
+    className: "mb-2 px-3"
   }, cards.map(function (card) {
     return React__default.createElement(reactstrap.Col, {
       key: card.label,
+      xs: 12,
       md: 6,
       className: "mb-4"
     }, React__default.createElement(DashboardCard, {
       label: card.label,
       children: card.children
     }));
+  })), React__default.createElement(reactstrap.Row, {
+    className: "my-2"
+  }, React__default.createElement(reactstrap.Col, {
+    xs: 12,
+    xl: 7
+  }, listChartLeft.map(function (i) {
+    return React__default.createElement(reactstrap.Col, {
+      key: i.label,
+      className: "mb-4"
+    }, React__default.createElement(DashboardCard, {
+      label: i.label,
+      children: i.children
+    }));
+  })), React__default.createElement(reactstrap.Col, {
+    xs: 12,
+    xl: 5
+  }, listChartRight.map(function (i) {
+    return React__default.createElement(reactstrap.Col, {
+      key: i.label,
+      className: "mb-4"
+    }, React__default.createElement(DashboardCard, {
+      label: i.label,
+      children: i.children
+    }));
+  }))), React__default.createElement(reactstrap.Row, {
+    className: "my-2"
+  }, listChartBottom.map(function (i, index) {
+    return React__default.createElement(reactstrap.Col, {
+      xs: 12,
+      xl: index % 2 === 0 ? 7 : 5,
+      key: index
+    }, React__default.createElement(reactstrap.Col, {
+      key: i.label,
+      className: "mb-4"
+    }, React__default.createElement(DashboardCard, {
+      label: i.label,
+      children: i.children
+    })));
   })));
 };