mario-core 2.9.166-level → 2.9.168-level

package/dist/index.js

@@ -30,10 +30,10 @@ var differenceInCalendarYears = _interopDefault(require('date-fns/differenceInCa
 var bi = require('react-icons/bi');
 var hi = require('react-icons/hi');
 var ai = require('react-icons/ai');
+var CreatableSelect = _interopDefault(require('react-select/creatable'));
 var DatePicker = _interopDefault(require('react-datepicker'));
 var toDate = _interopDefault(require('date-fns/toDate'));
 var md = require('react-icons/md');
-var Creatable = _interopDefault(require('react-select/creatable'));
 var ReactNotification$1 = _interopDefault(require('react-notifications-component'));
 require('react-notifications-component/dist/theme.css');
 require('symbol-observable');
@@ -4293,7 +4293,7 @@ var ContentHomePage = function ContentHomePage(_ref) {
   })));
 };
 
-var HOME_ADMIN = "/admin/user";
+var HOME_ADMIN = "/admin/users/user-list";
 var HOME_TEACHER = "/home";
 var HOME_STUDENT = "/home";
 var DASHBOARD_TITLE = "Dashboard";
@@ -7357,6 +7357,28 @@ var getRosterUserBySourcedIdApi = function getRosterUserBySourcedIdApi(sourcedId
 var syncRosterUsersApi = function syncRosterUsersApi() {
   return api.put(EDU_USER_URL + "/sync-roster-user");
 };
+var getAssignStudentApi = function getAssignStudentApi(filter) {
+  return api.get(EDU_USER_URL + "/student-assign", {
+    params: filter
+  });
+};
+var getCounselors = function getCounselors() {
+  return api.get(BASE_URL + "/api/counselor");
+};
+var getAssistants = function getAssistants() {
+  return api.get(BASE_URL + "/api/assistant");
+};
+var getSecondaryTeachers = function getSecondaryTeachers() {
+  return api.get(BASE_URL + "/api/secondaryTeacher");
+};
+var getTeachers = function getTeachers(filters) {
+  return api.get(USER_URL$1 + "/all/teacher", {
+    params: filters
+  });
+};
+var assignStudentsApi = function assignStudentsApi(data) {
+  return api.post(USER_URL$1 + "/student-assign", data);
+};
 
 var UserOrder;
 
@@ -7382,6 +7404,15 @@ var SearchBy;
   SearchBy[SearchBy["Status"] = 5] = "Status";
 })(SearchBy || (SearchBy = {}));
 
+var TeacherType;
+
+(function (TeacherType) {
+  TeacherType[TeacherType["Teacher"] = 0] = "Teacher";
+  TeacherType[TeacherType["Assistant"] = 1] = "Assistant";
+  TeacherType[TeacherType["Counselor"] = 2] = "Counselor";
+  TeacherType[TeacherType["SecondaryTeacher"] = 3] = "SecondaryTeacher";
+})(TeacherType || (TeacherType = {}));
+
 var _userOrders;
 var userOrders = (_userOrders = {}, _userOrders[UserOrder.Id] = "filter-id", _userOrders[UserOrder.Name] = "filter-name", _userOrders[UserOrder.Email] = "filter-email", _userOrders[UserOrder.Age] = "filter-age", _userOrders[UserOrder.Role] = "filter-role", _userOrders[UserOrder.Status] = "filter-status", _userOrders[UserOrder.CreatedAt] = "filter-createdAt", _userOrders[UserOrder.RosterUser] = "filter-roster", _userOrders);
 var UserColumns = [{
@@ -7463,6 +7494,12 @@ var DEFAULT_FILTER$1 = {
   currentPage: 1,
   pageSize: DEFAULT_PAGE_SIZE$1.value
 };
+var DEFAULT_STUDENT_FILTER = {
+  searchString: "",
+  currentPage: 1,
+  pageSize: DEFAULT_PAGE_SIZE$1.value,
+  isAssigned: false
+};
 var DEFAULT_FILTER_POPOVER = {
   currentPage: 1,
   pageSize: 200
@@ -8335,190 +8372,1070 @@ var useExportUsersCsv = function useExportUsersCsv() {
         dispatch(setLoading(false));
       };
 
-      dispatch(setLoading(true));
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(getRosterUserExport(filters)).then(function (res) {
+          var data = res.data;
+          var encodedUri = convertDataExportUser(data);
+          var link = document.createElement("a");
+          link.href = encodedUri;
+          link.download = schoolName + "_Users_Report.csv";
+          link.click();
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var convertDataExportUser = function convertDataExportUser(data) {
+    var headers = "First Name,Last Name,Email,Phone,Age,Role,Active Status,Create Time,Roster Sourced Id,Roster Status,Roster Family Name,Roster Middle Name,Roster Given Name,Roster Email,Roster Role,Roster Grades\n";
+    var content = data.map(function (user) {
+      var _user$rosterUser, _user$rosterUser2, _user$rosterUser3, _user$rosterUser4, _user$rosterUser5, _user$rosterUser6, _user$rosterUser7;
+
+      var age = user.dateOfBirth !== DATE_MIN_VALUE ? dateFns.differenceInCalendarYears(moment().toDate(), moment.utc(user.dateOfBirth).local().toDate()) : "";
+      return escapeCell(user.firstName) + "," + escapeCell(user.lastName) + "," + escapeCell(user.email) + "," + escapeCell(user.phoneNumber) + "," + age + "," + escapeCell(user.roles.join(", ").replace("SecondaryTeacher", "SupportTeacher")) + "," + (user.isActive ? "Active" : "Inactive") + "," + utcToLocalTime(user === null || user === void 0 ? void 0 : user.createTime, "yyyy-MM-DD HH:mm") + "," + escapeCell(user.sourcedId) + "," + escapeCell((_user$rosterUser = user.rosterUser) === null || _user$rosterUser === void 0 ? void 0 : _user$rosterUser.status) + "," + escapeCell((_user$rosterUser2 = user.rosterUser) === null || _user$rosterUser2 === void 0 ? void 0 : _user$rosterUser2.familyName) + "," + escapeCell((_user$rosterUser3 = user.rosterUser) === null || _user$rosterUser3 === void 0 ? void 0 : _user$rosterUser3.middleName) + "," + escapeCell((_user$rosterUser4 = user.rosterUser) === null || _user$rosterUser4 === void 0 ? void 0 : _user$rosterUser4.givenName) + "," + escapeCell((_user$rosterUser5 = user.rosterUser) === null || _user$rosterUser5 === void 0 ? void 0 : _user$rosterUser5.email) + "," + escapeCell((_user$rosterUser6 = user.rosterUser) === null || _user$rosterUser6 === void 0 ? void 0 : _user$rosterUser6.role) + "," + escapeCell((_user$rosterUser7 = user.rosterUser) === null || _user$rosterUser7 === void 0 ? void 0 : _user$rosterUser7.grades);
+    }).join('\n');
+    return "" + CSV_PREFIX + headers + encodeURIComponent(content);
+  };
+
+  var escapeCell = function escapeCell(value) {
+    if (!value) return "";
+    return "\"" + value.replace(/"/g, '""').replaceAll(/\n/g, " ") + "\"";
+  };
+
+  return {
+    exportUsers: exportUsers
+  };
+};
+
+var buttonTextStyle$2 = {
+  fontWeight: 500
+};
+var buttonStyle$2 = {
+  height: 38
+};
+var header$2 = "User";
+
+var UserList = function UserList() {
+  var _useUserList = useUserList(),
+      queryName = _useUserList.queryName,
+      userList = _useUserList.userList,
+      totalItems = _useUserList.totalItems,
+      filters = _useUserList.filters,
+      fullName = _useUserList.fullName,
+      removeData = _useUserList.removeData,
+      changeFilters = _useUserList.changeFilters,
+      reDirectDetailPage = _useUserList.reDirectDetailPage,
+      swicthUser = _useUserList.swicthUser,
+      handleSyncRosterUsers = _useUserList.handleSyncRosterUsers,
+      rosterUserInfo = _useUserList.rosterUserInfo;
+
+  var _useExportUsersCsv = useExportUsersCsv(),
+      exportUsers = _useExportUsersCsv.exportUsers;
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
+  var handleExportUsers = function handleExportUsers() {
+    return exportUsers(filters);
+  };
+
+  return React__default.createElement("div", {
+    className: "fadeIn animated h-100 pt-3"
+  }, React__default.createElement("h5", {
+    className: "mb-2"
+  }, t("" + header$2)), React__default.createElement(reactstrap.Row, {
+    className: "my-2"
+  }, React__default.createElement(reactstrap.Col, {
+    md: 8
+  }, React__default.createElement(SearchBoxContainer, {
+    text: t("create_user"),
+    onClick: function onClick() {
+      return reDirectDetailPage();
+    },
+    initValue: !!queryName ? queryName : "",
+    onSearch: function onSearch(searchString) {
+      return changeFilters({
+        searchString: searchString
+      });
+    },
+    placeholder: t("type_something_to_search_by_user_name")
+  })), React__default.createElement(reactstrap.Col, {
+    md: 4,
+    className: "d-flex justify-content-end align-items-center"
+  }, t("total_of_users"), " : ", totalItems), React__default.createElement(reactstrap.Col, {
+    md: 12,
+    className: "d-flex justify-content-end my-2"
+  }, React__default.createElement(SyncButtonIcon, {
+    text: "Sync Roster users",
+    onClick: handleSyncRosterUsers
+  }), React__default.createElement("button", {
+    className: "btn btn-success d-flex align-items-center border-0 p-0 ml-2",
+    style: buttonStyle$2,
+    onClick: handleExportUsers
+  }, React__default.createElement("div", {
+    className: "" + styles["button-icon"]
+  }, React__default.createElement("img", {
+    src: "images/export-icon.svg",
+    alt: ""
+  })), React__default.createElement("p", {
+    className: styles["button-content"] + " mb-0",
+    style: buttonTextStyle$2
+  }, "Export to CSV")))), React__default.createElement(reactstrap.Row, {
+    className: "mb-2"
+  }, React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, 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(TableHeader, {
+    headers: UserColumns,
+    filters: filters,
+    fullName: fullName,
+    onChangeFilters: changeFilters
+  })), 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(LinkEditButton, {
+      label: "" + record.fullName,
+      onClick: function onClick() {
+        return reDirectDetailPage(record.id);
+      }
+    })), React__default.createElement("td", {
+      className: "align-middle"
+    }, record.email), React__default.createElement("td", {
+      className: "align-middle"
+    }, record.dateOfBirth !== DATE_MIN_VALUE && differenceInCalendarYears(new Date(), new Date(record.dateOfBirth))), React__default.createElement("td", {
+      className: "align-middle"
+    }, !!record.roles && record.roles.map(function (role) {
+      return role === "SecondaryTeacher" ? "SupportTeacher" : role;
+    }).join(", ")), React__default.createElement("td", {
+      className: "align-middle"
+    }, record.isActive ? t("active") : t("inactive")), React__default.createElement("td", {
+      className: "align-middle"
+    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React__default.createElement("td", null, rosterUserInfo(record)), React__default.createElement("td", {
+      className: "text-center align-middle"
+    }, React__default.createElement(fa.FaUsersCog, {
+      style: {
+        fontSize: "18px",
+        marginRight: "10px",
+        cursor: "pointer"
+      },
+      onClick: function onClick() {
+        return swicthUser(record.id);
+      }
+    }), React__default.createElement(DeleteButtonIcon, {
+      onClick: function onClick() {
+        return removeData(record.id);
+      }
+    })));
+  }), (!userList || !userList.length) && React__default.createElement("tr", null, React__default.createElement("td", {
+    colSpan: 12,
+    className: "p-0"
+  }, React__default.createElement(EmptyDataAlert, {
+    className: "mb-0",
+    label: t("user")
+  }))))))), React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, React__default.createElement(CustomPagination, {
+    filters: filters,
+    totalRecordCount: totalItems,
+    changePageSize: function changePageSize(pageSize) {
+      return changeFilters({
+        pageSize: pageSize
+      });
+    },
+    changePage: function changePage(currentPage) {
+      return changeFilters({
+        currentPage: currentPage
+      });
+    }
+  }))));
+};
+
+var CustomTabs = function CustomTabs(props) {
+  var history = reactRouterDom.useHistory();
+  var location = reactRouterDom.useLocation();
+  var pathname = location.pathname;
+  var tabs = props.tabs,
+      title = props.title;
+
+  var toggle = function toggle(path) {
+    history.push(path);
+  };
+
+  var renderContent = function renderContent() {
+    var activeTab = tabs.map(function (t) {
+      return t.path;
+    }).indexOf(pathname);
+
+    if (activeTab === -1) {
+      return React__default.createElement(NotFound, null);
+    }
+
+    return React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+      md: 12
+    }, React__default.createElement("h5", null, title)), React__default.createElement(reactstrap.Col, {
+      xl: 12
+    }, React__default.createElement(reactstrap.Nav, {
+      tabs: true
+    }, tabs.map(function (i) {
+      return React__default.createElement(reactstrap.NavItem, {
+        key: i.path
+      }, React__default.createElement(reactstrap.NavLink, {
+        className: (i.path === pathname ? "active" : "") + " cursor-pointer",
+        onClick: function onClick() {
+          toggle(i.path);
+        }
+      }, i.title));
+    })), React__default.createElement(reactstrap.TabContent, {
+      activeTab: pathname,
+      className: "border-bottom-0 border-left-0 border-right-0"
+    }, tabs.map(function (i) {
+      return React__default.createElement(reactstrap.TabPane, {
+        key: i.path,
+        tabId: i.path
+      }, React__default.createElement(reactRouterDom.Route, {
+        path: i.path,
+        exact: true,
+        component: i.component
+      }));
+    }))));
+  };
+
+  return React__default.createElement("div", {
+    className: "animated fadeIn"
+  }, renderContent());
+};
+
+var TeacherSelector = function TeacherSelector(_ref) {
+  var options = _ref.options,
+      isDisabled = _ref.isDisabled,
+      scrollBottom = _ref.scrollBottom,
+      onCreateOption = _ref.onCreateOption,
+      rest = _objectWithoutPropertiesLoose(_ref, ["options", "isDisabled", "scrollBottom", "onCreateOption"]);
+
+  var _useState = React.useState(),
+      errorMessage = _useState[0],
+      setErrorMessage = _useState[1];
+
+  var validateEmail = function validateEmail(email) {
+    return String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+  };
+
+  var handleCreateTeacherOption = function handleCreateTeacherOption(newTeacherEmail) {
+    if (!validateEmail(newTeacherEmail)) {
+      setErrorMessage("Invalid email format for email: " + newTeacherEmail);
+      return;
+    } else {
+      setErrorMessage(undefined);
+    }
+
+    var newTeacher = {
+      label: newTeacherEmail,
+      value: -new Date().getTime()
+    };
+    onCreateOption === null || onCreateOption === void 0 ? void 0 : onCreateOption(newTeacher);
+  };
+
+  var handleFocus = function handleFocus() {
+    setErrorMessage(undefined);
+  };
+
+  return React__default.createElement("div", {
+    className: "w-100"
+  }, React__default.createElement("div", {
+    className: "w-100"
+  }, React__default.createElement(CreatableSelect, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    onCreateOption: handleCreateTeacherOption,
+    onFocus: handleFocus
+  }, rest))), !!errorMessage && React__default.createElement("p", {
+    className: "text-danger mb-0 mt-1"
+  }, errorMessage));
+};
+
+var useAssignStudentList = function useAssignStudentList() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState([]),
+      userList = _useState[0],
+      setUserList = _useState[1];
+
+  var _useState2 = React.useState(DEFAULT_STUDENT_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 handelSort = React.useCallback(function (sortBy) {
+    if (sortBy !== filters.sortBy) {
+      changeFilters({
+        sortBy: sortBy,
+        orderBy: "ASC",
+        currentPage: 1
+      });
+    } else {
+      changeFilters({
+        sortBy: sortBy,
+        orderBy: filters.orderBy !== "DESC" ? "DESC" : "ASC",
+        currentPage: 1
+      });
+    }
+  }, [JSON.stringify(filters)]);
+
+  var getDataUserList = function getDataUserList() {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(getAssignStudentApi(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(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;
+      }));
+    }
+  };
+
+  var handleRetrievedData = React.useCallback(function () {
+    if (filters.currentPage == 1) getDataUserList();else changeFilters({
+      currentPage: 1
+    });
+    setIsCheck([]);
+    setIsCheckAll(false);
+  }, [JSON.stringify(filters)]);
+  React.useEffect(function () {
+    getDataUserList();
+  }, [JSON.stringify(filters)]);
+  React.useEffect(function () {
+    document.title = "User | Assign student";
+  }, []);
+  return {
+    handelSort: handelSort,
+    handleRetrievedData: handleRetrievedData,
+    totalItem: totalItem,
+    userList: userList,
+    filters: filters,
+    changeFilters: changeFilters,
+    handleSelectAll: handleSelectAll,
+    handleClickCheck: handleClickCheck,
+    isCheckAll: isCheckAll,
+    isCheck: isCheck
+  };
+};
+
+var useCounselorList = function useCounselorList() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState([]),
+      counselorOptions = _useState[0],
+      setCounselorOptions = _useState[1];
+
+  var _useState2 = React.useState(),
+      selectedCounselors = _useState2[0],
+      setSelectedCounselors = _useState2[1];
+
+  var getDataCounselors = function getDataCounselors() {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(getCounselors()).then(function (res) {
+          var _res$data$items$map, _res$data$items;
+
+          res.data.items && setCounselorOptions(((_res$data$items$map = (_res$data$items = res.data.items).map) === null || _res$data$items$map === void 0 ? void 0 : _res$data$items$map.call(_res$data$items, function (record) {
+            return {
+              label: record.email,
+              value: record.id
+            };
+          })) || []);
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var handleSelectCounselor = React.useCallback(function (counselorId, studentUserId) {
+    var _extends2;
+
+    var selectedCounselor = counselorOptions.find(function (t) {
+      return t.value === counselorId;
+    });
+    setSelectedCounselors(_extends({}, selectedCounselors, (_extends2 = {}, _extends2[studentUserId] = selectedCounselor, _extends2)));
+  }, [JSON.stringify(selectedCounselors), JSON.stringify(counselorOptions)]);
+  var handleCreateCounselorOption = React.useCallback(function (newCounselor, studentUserId) {
+    var _extends3;
+
+    setCounselorOptions([].concat(counselorOptions, [newCounselor]));
+    setSelectedCounselors(_extends({}, selectedCounselors, (_extends3 = {}, _extends3[studentUserId] = newCounselor, _extends3)));
+  }, [JSON.stringify(counselorOptions), JSON.stringify(selectedCounselors)]);
+  React.useEffect(function () {
+    getDataCounselors();
+  }, []);
+  return {
+    selectedCounselors: selectedCounselors,
+    counselorOptions: counselorOptions,
+    handleSelectCounselor: handleSelectCounselor,
+    handleCreateCounselorOption: handleCreateCounselorOption,
+    setSelectedCounselors: setSelectedCounselors
+  };
+};
+
+var useAssistantList = function useAssistantList() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState([]),
+      assistantOptions = _useState[0],
+      setAssistantOptions = _useState[1];
+
+  var _useState2 = React.useState(),
+      selectedAssistants = _useState2[0],
+      setSelectedAssistants = _useState2[1];
+
+  var getDataAssistants = function getDataAssistants() {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(getAssistants()).then(function (res) {
+          var _res$data$items$map, _res$data$items;
+
+          res.data.items && setAssistantOptions(((_res$data$items$map = (_res$data$items = res.data.items).map) === null || _res$data$items$map === void 0 ? void 0 : _res$data$items$map.call(_res$data$items, function (record) {
+            return {
+              label: record.email,
+              value: record.id
+            };
+          })) || []);
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var handleSelectAssistant = React.useCallback(function (assistantId, studentUserId) {
+    var _extends2;
+
+    var selectedAssistant = assistantOptions.find(function (t) {
+      return t.value === assistantId;
+    });
+    setSelectedAssistants(_extends({}, selectedAssistants, (_extends2 = {}, _extends2[studentUserId] = selectedAssistant, _extends2)));
+  }, [JSON.stringify(selectedAssistants), JSON.stringify(assistantOptions)]);
+  var handleCreateAssistantOption = React.useCallback(function (newAssistant, studentUserId) {
+    var _extends3;
+
+    setAssistantOptions([].concat(assistantOptions, [newAssistant]));
+    setSelectedAssistants(_extends({}, selectedAssistants, (_extends3 = {}, _extends3[studentUserId] = newAssistant, _extends3)));
+  }, [JSON.stringify(assistantOptions), JSON.stringify(selectedAssistants)]);
+  React.useEffect(function () {
+    getDataAssistants();
+  }, []);
+  return {
+    selectedAssistants: selectedAssistants,
+    assistantOptions: assistantOptions,
+    handleSelectAssistant: handleSelectAssistant,
+    handleCreateAssistantOption: handleCreateAssistantOption,
+    setSelectedAssistants: setSelectedAssistants
+  };
+};
+
+var useSecondaryTeacherList = function useSecondaryTeacherList() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState([]),
+      secondaryTeacherOptions = _useState[0],
+      setSecondaryTeacherOptions = _useState[1];
+
+  var _useState2 = React.useState(),
+      selectedSecondaryTeachers = _useState2[0],
+      setSelectedSecondaryTeachers = _useState2[1];
+
+  var getDataSecondaryTeachers = function getDataSecondaryTeachers() {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(getSecondaryTeachers()).then(function (res) {
+          var _res$data$items$map, _res$data$items;
+
+          res.data.items && setSecondaryTeacherOptions(((_res$data$items$map = (_res$data$items = res.data.items).map) === null || _res$data$items$map === void 0 ? void 0 : _res$data$items$map.call(_res$data$items, function (record) {
+            return {
+              label: record.email,
+              value: record.id
+            };
+          })) || []);
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var handleSelectSecondaryTeacher = React.useCallback(function (secondaryTeacherId, studentUserId) {
+    var _extends2;
+
+    var selectedSecondaryTeacher = secondaryTeacherOptions.find(function (t) {
+      return t.value === secondaryTeacherId;
+    });
+    setSelectedSecondaryTeachers(_extends({}, selectedSecondaryTeachers, (_extends2 = {}, _extends2[studentUserId] = selectedSecondaryTeacher, _extends2)));
+  }, [JSON.stringify(selectedSecondaryTeachers), JSON.stringify(secondaryTeacherOptions)]);
+  var handleCreateSecondaryTeacherOption = React.useCallback(function (newSecondaryTeacher, studentUserId) {
+    var _extends3;
+
+    setSecondaryTeacherOptions([].concat(secondaryTeacherOptions, [newSecondaryTeacher]));
+    setSelectedSecondaryTeachers(_extends({}, selectedSecondaryTeachers, (_extends3 = {}, _extends3[studentUserId] = newSecondaryTeacher, _extends3)));
+  }, [JSON.stringify(secondaryTeacherOptions), JSON.stringify(selectedSecondaryTeachers)]);
+  React.useEffect(function () {
+    getDataSecondaryTeachers();
+  }, []);
+  return {
+    selectedSecondaryTeachers: selectedSecondaryTeachers,
+    secondaryTeacherOptions: secondaryTeacherOptions,
+    handleSelectSecondaryTeacher: handleSelectSecondaryTeacher,
+    handleCreateSecondaryTeacherOption: handleCreateSecondaryTeacherOption,
+    setSelectedSecondaryTeachers: setSelectedSecondaryTeachers
+  };
+};
+
+var useTeacherList = function useTeacherList() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState([]),
+      teacherOptions = _useState[0],
+      setTeacherOptions = _useState[1];
+
+  var _useState2 = React.useState(),
+      selectedTeachers = _useState2[0],
+      setSelectedTeachers = _useState2[1];
+
+  var getDataTeachers = function getDataTeachers() {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(getTeachers({
+          sortBy: "Email"
+        })).then(function (res) {
+          var _res$data$map, _res$data;
+
+          res.data && setTeacherOptions(((_res$data$map = (_res$data = res.data).map) === null || _res$data$map === void 0 ? void 0 : _res$data$map.call(_res$data, function (record) {
+            return {
+              label: record.email,
+              value: record.id
+            };
+          })) || []);
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var handleSelectTeacher = React.useCallback(function (teacherId, studentUserId) {
+    var _extends2;
+
+    var selectedTeacher = teacherOptions.find(function (t) {
+      return t.value === teacherId;
+    });
+    setSelectedTeachers(_extends({}, selectedTeachers, (_extends2 = {}, _extends2[studentUserId] = selectedTeacher, _extends2)));
+  }, [JSON.stringify(selectedTeachers), JSON.stringify(teacherOptions)]);
+  var handleCreateTeacherOption = React.useCallback(function (newTeacher, studentUserId) {
+    var _extends3;
+
+    setTeacherOptions([].concat(teacherOptions, [newTeacher]));
+    setSelectedTeachers(_extends({}, selectedTeachers, (_extends3 = {}, _extends3[studentUserId] = newTeacher, _extends3)));
+  }, [JSON.stringify(teacherOptions), JSON.stringify(selectedTeachers)]);
+  React.useEffect(function () {
+    getDataTeachers();
+  }, []);
+  return {
+    selectedTeachers: selectedTeachers,
+    teacherOptions: teacherOptions,
+    handleSelectTeacher: handleSelectTeacher,
+    handleCreateTeacherOption: handleCreateTeacherOption,
+    setSelectedTeachers: setSelectedTeachers
+  };
+};
+
+var useAssignStudent = function useAssignStudent(teacherSelected, assistantSelected, counselorSelected, secondaryTeacherSelected, callback) {
+  var dispatch = reactRedux.useDispatch();
+
+  var assignStudents = function assignStudents(users) {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(assignStudentsApi(users)).then(function () {
+          dispatch(setAlert({
+            type: "success",
+            message: "Create Successfully"
+          }));
+          callback === null || callback === void 0 ? void 0 : callback();
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var handleAssignMultiStudent = React.useCallback(function (listUserIds) {
+    if (listUserIds.length === 0) {
+      dispatch(setAlert({
+        type: "danger",
+        message: "Not found selected student."
+      }));
+      return;
+    }
+
+    var isMissingTeacher = listUserIds.some(function (i) {
+      var teacher = teacherSelected === null || teacherSelected === void 0 ? void 0 : teacherSelected[i];
+      var assistant = assistantSelected === null || assistantSelected === void 0 ? void 0 : assistantSelected[i];
+      var counselor = counselorSelected === null || counselorSelected === void 0 ? void 0 : counselorSelected[i];
+      var secondaryTeacher = secondaryTeacherSelected === null || secondaryTeacherSelected === void 0 ? void 0 : secondaryTeacherSelected[i];
+      return !teacher && !assistant && !counselor && !secondaryTeacher;
+    });
+
+    if (isMissingTeacher) {
+      dispatch(setAlert({
+        type: "danger",
+        message: "Please select/add teacher for all selected student first."
+      }));
+      return;
+    }
+
+    var users = listUserIds.map(function (i) {
+      var teacher = teacherSelected === null || teacherSelected === void 0 ? void 0 : teacherSelected[i];
+      var assistant = assistantSelected === null || assistantSelected === void 0 ? void 0 : assistantSelected[i];
+      var counselor = counselorSelected === null || counselorSelected === void 0 ? void 0 : counselorSelected[i];
+      var secondaryTeacher = secondaryTeacherSelected === null || secondaryTeacherSelected === void 0 ? void 0 : secondaryTeacherSelected[i];
+      var value = {
+        id: i
+      };
+
+      if (!!teacher) {
+        value.mainTeacherUserId = !!(teacher !== null && teacher !== void 0 && teacher.value) && typeof (teacher === null || teacher === void 0 ? void 0 : teacher.value) === 'string' ? teacher === null || teacher === void 0 ? void 0 : teacher.value : undefined;
+        value.mainTeacherEmail = !!(teacher !== null && teacher !== void 0 && teacher.value) && typeof (teacher === null || teacher === void 0 ? void 0 : teacher.value) === 'number' ? teacher === null || teacher === void 0 ? void 0 : teacher.label : undefined;
+      }
+
+      if (!!assistant) {
+        value.assistantUserId = !!(assistant !== null && assistant !== void 0 && assistant.value) && typeof (assistant === null || assistant === void 0 ? void 0 : assistant.value) === 'string' ? assistant === null || assistant === void 0 ? void 0 : assistant.value : undefined;
+        value.assistantEmail = !!(assistant !== null && assistant !== void 0 && assistant.value) && typeof (assistant === null || assistant === void 0 ? void 0 : assistant.value) === 'number' ? assistant === null || assistant === void 0 ? void 0 : assistant.label : undefined;
+      }
 
-      var _temp4 = _catch(function () {
-        return Promise.resolve(getRosterUserExport(filters)).then(function (res) {
-          var data = res.data;
-          var encodedUri = convertDataExportUser(data);
-          var link = document.createElement("a");
-          link.href = encodedUri;
-          link.download = schoolName + "_Users_Report.csv";
-          link.click();
-        });
-      }, function (err) {
-        var _err$response, _err$response$data;
+      if (!!counselor) {
+        value.counselorUserId = !!(counselor !== null && counselor !== void 0 && counselor.value) && typeof (counselor === null || counselor === void 0 ? void 0 : counselor.value) === 'string' ? counselor === null || counselor === void 0 ? void 0 : counselor.value : undefined;
+        value.counselorEmail = !!(counselor !== null && counselor !== void 0 && counselor.value) && typeof (counselor === null || counselor === void 0 ? void 0 : counselor.value) === 'number' ? counselor === null || counselor === void 0 ? void 0 : counselor.label : undefined;
+      }
 
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
-        }));
-      });
+      if (!!secondaryTeacher) {
+        value.secondaryTeacherUserId = !!(secondaryTeacher !== null && secondaryTeacher !== void 0 && secondaryTeacher.value) && typeof (secondaryTeacher === null || secondaryTeacher === void 0 ? void 0 : secondaryTeacher.value) === 'string' ? secondaryTeacher === null || secondaryTeacher === void 0 ? void 0 : secondaryTeacher.value : undefined;
+        value.secondaryTeacherEmail = !!(secondaryTeacher !== null && secondaryTeacher !== void 0 && secondaryTeacher.value) && typeof (secondaryTeacher === null || secondaryTeacher === void 0 ? void 0 : secondaryTeacher.value) === 'number' ? secondaryTeacher === null || secondaryTeacher === void 0 ? void 0 : secondaryTeacher.label : undefined;
+      }
 
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
-    } catch (e) {
-      return Promise.reject(e);
+      return value;
+    });
+    assignStudents([].concat(users));
+  }, [JSON.stringify(teacherSelected), JSON.stringify(assistantSelected), JSON.stringify(counselorSelected), JSON.stringify(secondaryTeacherSelected)]);
+  var handleAssignSingleStudent = React.useCallback(function (id) {
+    var teacher = teacherSelected === null || teacherSelected === void 0 ? void 0 : teacherSelected[id];
+    var assistant = assistantSelected === null || assistantSelected === void 0 ? void 0 : assistantSelected[id];
+    var counselor = counselorSelected === null || counselorSelected === void 0 ? void 0 : counselorSelected[id];
+    var secondaryTeacher = secondaryTeacherSelected === null || secondaryTeacherSelected === void 0 ? void 0 : secondaryTeacherSelected[id];
+
+    if (!teacher && !assistant && !counselor && !secondaryTeacher) {
+      dispatch(setAlert({
+        type: "danger",
+        message: "Please select/add teacher for selected student first."
+      }));
+      return;
     }
-  };
 
-  var convertDataExportUser = function convertDataExportUser(data) {
-    var headers = "First Name,Last Name,Email,Phone,Age,Role,Active Status,Create Time,Roster Sourced Id,Roster Status,Roster Family Name,Roster Middle Name,Roster Given Name,Roster Email,Roster Role,Roster Grades\n";
-    var content = data.map(function (user) {
-      var _user$rosterUser, _user$rosterUser2, _user$rosterUser3, _user$rosterUser4, _user$rosterUser5, _user$rosterUser6, _user$rosterUser7;
+    var studentRequest = {
+      id: id
+    };
 
-      var age = user.dateOfBirth !== DATE_MIN_VALUE ? dateFns.differenceInCalendarYears(moment().toDate(), moment.utc(user.dateOfBirth).local().toDate()) : "";
-      return escapeCell(user.firstName) + "," + escapeCell(user.lastName) + "," + escapeCell(user.email) + "," + escapeCell(user.phoneNumber) + "," + age + "," + escapeCell(user.roles.join(", ").replace("SecondaryTeacher", "SupportTeacher")) + "," + (user.isActive ? "Active" : "Inactive") + "," + utcToLocalTime(user === null || user === void 0 ? void 0 : user.createTime, "yyyy-MM-DD HH:mm") + "," + escapeCell(user.sourcedId) + "," + escapeCell((_user$rosterUser = user.rosterUser) === null || _user$rosterUser === void 0 ? void 0 : _user$rosterUser.status) + "," + escapeCell((_user$rosterUser2 = user.rosterUser) === null || _user$rosterUser2 === void 0 ? void 0 : _user$rosterUser2.familyName) + "," + escapeCell((_user$rosterUser3 = user.rosterUser) === null || _user$rosterUser3 === void 0 ? void 0 : _user$rosterUser3.middleName) + "," + escapeCell((_user$rosterUser4 = user.rosterUser) === null || _user$rosterUser4 === void 0 ? void 0 : _user$rosterUser4.givenName) + "," + escapeCell((_user$rosterUser5 = user.rosterUser) === null || _user$rosterUser5 === void 0 ? void 0 : _user$rosterUser5.email) + "," + escapeCell((_user$rosterUser6 = user.rosterUser) === null || _user$rosterUser6 === void 0 ? void 0 : _user$rosterUser6.role) + "," + escapeCell((_user$rosterUser7 = user.rosterUser) === null || _user$rosterUser7 === void 0 ? void 0 : _user$rosterUser7.grades);
-    }).join('\n');
-    return "" + CSV_PREFIX + headers + encodeURIComponent(content);
-  };
+    if (!!teacher) {
+      studentRequest.mainTeacherUserId = !!(teacher !== null && teacher !== void 0 && teacher.value) && typeof (teacher === null || teacher === void 0 ? void 0 : teacher.value) === 'string' ? teacher === null || teacher === void 0 ? void 0 : teacher.value : undefined;
+      studentRequest.mainTeacherEmail = !!(teacher !== null && teacher !== void 0 && teacher.value) && typeof (teacher === null || teacher === void 0 ? void 0 : teacher.value) === 'number' ? teacher === null || teacher === void 0 ? void 0 : teacher.label : undefined;
+    }
 
-  var escapeCell = function escapeCell(value) {
-    if (!value) return "";
-    return "\"" + value.replace(/"/g, '""').replaceAll(/\n/g, " ") + "\"";
-  };
+    if (!!assistant) {
+      studentRequest.assistantUserId = !!(assistant !== null && assistant !== void 0 && assistant.value) && typeof (assistant === null || assistant === void 0 ? void 0 : assistant.value) === 'string' ? assistant === null || assistant === void 0 ? void 0 : assistant.value : undefined;
+      studentRequest.assistantEmail = !!(assistant !== null && assistant !== void 0 && assistant.value) && typeof (assistant === null || assistant === void 0 ? void 0 : assistant.value) === 'number' ? assistant === null || assistant === void 0 ? void 0 : assistant.label : undefined;
+    }
+
+    if (!!counselor) {
+      studentRequest.counselorUserId = !!(counselor !== null && counselor !== void 0 && counselor.value) && typeof (counselor === null || counselor === void 0 ? void 0 : counselor.value) === 'string' ? counselor === null || counselor === void 0 ? void 0 : counselor.value : undefined;
+      studentRequest.counselorEmail = !!(counselor !== null && counselor !== void 0 && counselor.value) && typeof (counselor === null || counselor === void 0 ? void 0 : counselor.value) === 'number' ? counselor === null || counselor === void 0 ? void 0 : counselor.label : undefined;
+    }
 
+    if (!!secondaryTeacher) {
+      studentRequest.secondaryTeacherUserId = !!(secondaryTeacher !== null && secondaryTeacher !== void 0 && secondaryTeacher.value) && typeof (secondaryTeacher === null || secondaryTeacher === void 0 ? void 0 : secondaryTeacher.value) === 'string' ? secondaryTeacher === null || secondaryTeacher === void 0 ? void 0 : secondaryTeacher.value : undefined;
+      studentRequest.secondaryTeacherEmail = !!(secondaryTeacher !== null && secondaryTeacher !== void 0 && secondaryTeacher.value) && typeof (secondaryTeacher === null || secondaryTeacher === void 0 ? void 0 : secondaryTeacher.value) === 'number' ? secondaryTeacher === null || secondaryTeacher === void 0 ? void 0 : secondaryTeacher.label : undefined;
+    }
+
+    assignStudents([studentRequest]);
+  }, [JSON.stringify(teacherSelected), JSON.stringify(assistantSelected), JSON.stringify(counselorSelected), JSON.stringify(secondaryTeacherSelected)]);
   return {
-    exportUsers: exportUsers
+    handleAssignSingleStudent: handleAssignSingleStudent,
+    handleAssignMultiStudent: handleAssignMultiStudent
   };
 };
 
-var buttonTextStyle$2 = {
-  fontWeight: 500
-};
-var buttonStyle$2 = {
-  height: 38
-};
-var header$2 = "User";
-
-var UserList = function UserList() {
-  var _useUserList = useUserList(),
-      queryName = _useUserList.queryName,
-      userList = _useUserList.userList,
-      totalItems = _useUserList.totalItems,
-      filters = _useUserList.filters,
-      fullName = _useUserList.fullName,
-      removeData = _useUserList.removeData,
-      changeFilters = _useUserList.changeFilters,
-      reDirectDetailPage = _useUserList.reDirectDetailPage,
-      swicthUser = _useUserList.swicthUser,
-      handleSyncRosterUsers = _useUserList.handleSyncRosterUsers,
-      rosterUserInfo = _useUserList.rosterUserInfo;
-
-  var _useExportUsersCsv = useExportUsersCsv(),
-      exportUsers = _useExportUsersCsv.exportUsers;
-
+var AssignStudentList = function AssignStudentList() {
   var _useTranslation = reactI18next.useTranslation(),
       t = _useTranslation.t;
 
-  var handleExportUsers = function handleExportUsers() {
-    return exportUsers(filters);
+  var _useTeacherList = useTeacherList(),
+      selectedTeachers = _useTeacherList.selectedTeachers,
+      teacherOptions = _useTeacherList.teacherOptions,
+      handleCreateTeacherOption = _useTeacherList.handleCreateTeacherOption,
+      handleSelectTeacher = _useTeacherList.handleSelectTeacher,
+      setSelectedTeachers = _useTeacherList.setSelectedTeachers;
+
+  var _useAssistantList = useAssistantList(),
+      selectedAssistants = _useAssistantList.selectedAssistants,
+      assistantOptions = _useAssistantList.assistantOptions,
+      handleCreateAssistantOption = _useAssistantList.handleCreateAssistantOption,
+      handleSelectAssistant = _useAssistantList.handleSelectAssistant,
+      setSelectedAssistants = _useAssistantList.setSelectedAssistants;
+
+  var _useCounselorList = useCounselorList(),
+      selectedCounselors = _useCounselorList.selectedCounselors,
+      counselorOptions = _useCounselorList.counselorOptions,
+      handleCreateCounselorOption = _useCounselorList.handleCreateCounselorOption,
+      handleSelectCounselor = _useCounselorList.handleSelectCounselor,
+      setSelectedCounselors = _useCounselorList.setSelectedCounselors;
+
+  var _useSecondaryTeacherL = useSecondaryTeacherList(),
+      selectedSecondaryTeachers = _useSecondaryTeacherL.selectedSecondaryTeachers,
+      secondaryTeacherOptions = _useSecondaryTeacherL.secondaryTeacherOptions,
+      handleCreateSecondaryTeacherOption = _useSecondaryTeacherL.handleCreateSecondaryTeacherOption,
+      handleSelectSecondaryTeacher = _useSecondaryTeacherL.handleSelectSecondaryTeacher,
+      setSelectedSecondaryTeachers = _useSecondaryTeacherL.setSelectedSecondaryTeachers;
+
+  var _useAssignStudentList = useAssignStudentList(),
+      isCheck = _useAssignStudentList.isCheck,
+      isCheckAll = _useAssignStudentList.isCheckAll,
+      userList = _useAssignStudentList.userList,
+      filters = _useAssignStudentList.filters,
+      totalItem = _useAssignStudentList.totalItem,
+      handleClickCheck = _useAssignStudentList.handleClickCheck,
+      handleSelectAll = _useAssignStudentList.handleSelectAll,
+      changeFilters = _useAssignStudentList.changeFilters,
+      handelSort = _useAssignStudentList.handelSort,
+      handleRetrievedData = _useAssignStudentList.handleRetrievedData;
+
+  var handleResetData = function handleResetData() {
+    handleRetrievedData();
+    setSelectedTeachers(undefined);
+    setSelectedAssistants(undefined);
+    setSelectedCounselors(undefined);
+    setSelectedSecondaryTeachers(undefined);
   };
 
+  var _useAssignStudent = useAssignStudent(selectedTeachers, selectedAssistants, selectedCounselors, selectedSecondaryTeachers, handleResetData),
+      handleAssignSingleStudent = _useAssignStudent.handleAssignSingleStudent,
+      handleAssignMultiStudent = _useAssignStudent.handleAssignMultiStudent;
+
   return React__default.createElement("div", {
-    className: "fadeIn animated h-100"
+    className: "fadeIn animated"
   }, React__default.createElement("h5", {
-    className: "mb-2"
-  }, t("" + header$2)), React__default.createElement(reactstrap.Row, {
+    className: "mt-4 mb-2"
+  }, "Assign Student"), React__default.createElement(reactstrap.Row, {
     className: "my-2"
   }, React__default.createElement(reactstrap.Col, {
     md: 8
-  }, React__default.createElement(SearchBoxContainer, {
-    text: t("create_user"),
-    onClick: function onClick() {
-      return reDirectDetailPage();
-    },
-    initValue: !!queryName ? queryName : "",
+  }, React__default.createElement(SearchBox$1, {
+    initValue: (filters === null || filters === void 0 ? void 0 : filters.searchString) || "",
     onSearch: function onSearch(searchString) {
       return changeFilters({
         searchString: searchString
       });
     },
-    placeholder: t("type_something_to_search_by_user_name")
+    placeholder: "Type something to search students"
   })), React__default.createElement(reactstrap.Col, {
     md: 4,
     className: "d-flex justify-content-end align-items-center"
-  }, t("total_of_users"), " : ", totalItems), React__default.createElement(reactstrap.Col, {
-    md: 12,
-    className: "d-flex justify-content-end my-2"
-  }, React__default.createElement(SyncButtonIcon, {
-    text: "Sync Roster users",
-    onClick: handleSyncRosterUsers
-  }), React__default.createElement("button", {
-    className: "btn btn-success d-flex align-items-center border-0 p-0 ml-2",
-    style: buttonStyle$2,
-    onClick: handleExportUsers
-  }, React__default.createElement("div", {
-    className: "" + styles["button-icon"]
-  }, React__default.createElement("img", {
-    src: "images/export-icon.svg",
-    alt: ""
-  })), React__default.createElement("p", {
-    className: styles["button-content"] + " mb-0",
-    style: buttonTextStyle$2
-  }, "Export to CSV")))), React__default.createElement(reactstrap.Row, {
+  }, t("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 handleAssignMultiStudent(isCheck);
+    },
+    color: "primary"
+  }, "Assign for Selected Students"))), React__default.createElement(reactstrap.Row, {
     className: "mb-2"
   }, React__default.createElement(reactstrap.Col, {
     md: 12
-  }, React__default.createElement("div", null, React__default.createElement(reactstrap.Table, {
+  }, !!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(TableHeader, {
-    headers: UserColumns,
-    filters: filters,
-    fullName: fullName,
-    onChangeFilters: changeFilters
-  })), React__default.createElement("tbody", null, userList && userList.length > 0 && userList.map(function (record) {
+  }, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+    className: "align-middle text-center"
+  }, React__default.createElement("input", {
+    type: "checkbox",
+    onChange: handleSelectAll,
+    checked: isCheckAll
+  })), React__default.createElement("th", {
+    className: "align-top " + styles["pointer"],
+    onClick: function onClick() {
+      return handelSort(UserOrder.Name);
+    }
+  }, "Student Name", filters.sortBy === UserOrder.Name && React__default.createElement(React__default.Fragment, null, filters.orderBy === "DESC" ? React__default.createElement(ai.AiOutlineSortDescending, {
+    className: "ml-1"
+  }) : React__default.createElement(ai.AiOutlineSortAscending, {
+    className: "ml-1"
+  }))), React__default.createElement("th", {
+    className: "align-top " + styles["pointer"],
+    onClick: function onClick() {
+      return handelSort(UserOrder.Email);
+    }
+  }, "Student Email", filters.sortBy === UserOrder.Email && React__default.createElement(React__default.Fragment, null, filters.orderBy === "DESC" ? React__default.createElement(ai.AiOutlineSortDescending, {
+    className: "ml-1"
+  }) : React__default.createElement(ai.AiOutlineSortAscending, {
+    className: "ml-1"
+  }))), React__default.createElement("th", {
+    style: {
+      width: "15%"
+    }
+  }, t("teacher_email")), React__default.createElement("th", {
+    style: {
+      width: "15%"
+    }
+  }, "Assistant Email"), React__default.createElement("th", {
+    style: {
+      width: "15%"
+    }
+  }, "Counselor Email"), React__default.createElement("th", {
+    style: {
+      width: "15%"
+    }
+  }, "Support Teacher Email"), React__default.createElement("th", {
+    className: "align-top"
+  }, t("action")))), React__default.createElement("tbody", null, userList.map(function (item) {
     return React__default.createElement("tr", {
-      key: record.id
+      key: item.id
     }, React__default.createElement("td", {
-      className: "align-middle"
-    }, React__default.createElement(LinkEditButton, {
-      label: "" + record.fullName,
-      onClick: function onClick() {
-        return reDirectDetailPage(record.id);
-      }
+      className: "align-middle text-center"
+    }, React__default.createElement("input", {
+      id: item.id,
+      type: "checkbox",
+      onChange: handleClickCheck,
+      checked: isCheck.includes(item.id)
     })), React__default.createElement("td", {
       className: "align-middle"
-    }, record.email), React__default.createElement("td", {
+    }, item.fullName), React__default.createElement("td", {
       className: "align-middle"
-    }, record.dateOfBirth !== DATE_MIN_VALUE && differenceInCalendarYears(new Date(), new Date(record.dateOfBirth))), React__default.createElement("td", {
+    }, item.email), React__default.createElement("td", {
       className: "align-middle"
-    }, !!record.roles && record.roles.map(function (role) {
-      return role === "SecondaryTeacher" ? "SupportTeacher" : role;
-    }).join(", ")), React__default.createElement("td", {
+    }, !!item.mainTeacherEmail ? React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
+      className: "mb-0"
+    }, item.mainTeacherEmail), React__default.createElement("p", {
+      className: "mb-0"
+    }, item.mainTeacherName)) : React__default.createElement(TeacherSelector, {
+      value: selectedTeachers === null || selectedTeachers === void 0 ? void 0 : selectedTeachers[item.id],
+      options: teacherOptions,
+      onChange: function onChange(e) {
+        return handleSelectTeacher(e.value, item.id);
+      },
+      onCreateOption: function onCreateOption(value) {
+        return handleCreateTeacherOption(value, item.id);
+      },
+      placeholder: t("select_teacher"),
+      className: "flex-grow-1 mr-2"
+    })), React__default.createElement("td", {
       className: "align-middle"
-    }, record.isActive ? t("active") : t("inactive")), React__default.createElement("td", {
+    }, !!item.assistantEmail ? React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
+      className: "mb-0"
+    }, item.assistantEmail), React__default.createElement("p", {
+      className: "mb-0"
+    }, item.assistantName)) : React__default.createElement(TeacherSelector, {
+      value: selectedAssistants === null || selectedAssistants === void 0 ? void 0 : selectedAssistants[item.id],
+      options: assistantOptions,
+      onChange: function onChange(e) {
+        return handleSelectAssistant(e.value, item.id);
+      },
+      onCreateOption: function onCreateOption(value) {
+        return handleCreateAssistantOption(value, item.id);
+      },
+      placeholder: t("select_assistant"),
+      className: "flex-grow-1 mr-2"
+    })), React__default.createElement("td", {
       className: "align-middle"
-    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React__default.createElement("td", null, rosterUserInfo(record)), React__default.createElement("td", {
-      className: "text-center align-middle"
-    }, React__default.createElement(fa.FaUsersCog, {
-      style: {
-        fontSize: "18px",
-        marginRight: "10px",
-        cursor: "pointer"
+    }, !!item.counselorEmail ? React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
+      className: "mb-0"
+    }, item.counselorEmail), React__default.createElement("p", {
+      className: "mb-0"
+    }, item.counselorName)) : React__default.createElement(TeacherSelector, {
+      value: selectedCounselors === null || selectedCounselors === void 0 ? void 0 : selectedCounselors[item.id],
+      options: counselorOptions,
+      onChange: function onChange(e) {
+        return handleSelectCounselor(e.value, item.id);
       },
+      onCreateOption: function onCreateOption(value) {
+        return handleCreateCounselorOption(value, item.id);
+      },
+      placeholder: t("select_counselor"),
+      className: "flex-grow-1 mr-2"
+    })), React__default.createElement("td", {
+      className: "align-middle"
+    }, !!item.secondaryTeacherEmail ? React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
+      className: "mb-0"
+    }, item.secondaryTeacherEmail), React__default.createElement("p", {
+      className: "mb-0"
+    }, item.secondaryTeacherName)) : React__default.createElement(TeacherSelector, {
+      value: selectedSecondaryTeachers === null || selectedSecondaryTeachers === void 0 ? void 0 : selectedSecondaryTeachers[item.id],
+      options: secondaryTeacherOptions,
+      onChange: function onChange(e) {
+        return handleSelectSecondaryTeacher(e.value, item.id);
+      },
+      onCreateOption: function onCreateOption(value) {
+        return handleCreateSecondaryTeacherOption(value, item.id);
+      },
+      placeholder: t("select_support_teacher"),
+      className: "flex-grow-1 mr-2"
+    })), React__default.createElement("td", {
+      className: "align-middle"
+    }, React__default.createElement("div", {
+      className: "d-flex"
+    }, React__default.createElement(LinkEditButton, {
+      label: "Assign",
       onClick: function onClick() {
-        return swicthUser(record.id);
-      }
-    }), React__default.createElement(DeleteButtonIcon, {
-      onClick: function onClick() {
-        return removeData(record.id);
+        return handleAssignSingleStudent(item.id);
       }
-    })));
-  }), (!userList || !userList.length) && React__default.createElement("tr", null, React__default.createElement("td", {
-    colSpan: 12,
-    className: "p-0"
-  }, React__default.createElement(EmptyDataAlert, {
-    className: "mb-0",
-    label: t("user")
-  }))))))), React__default.createElement(reactstrap.Col, {
+    }))));
+  })))) : React__default.createElement(EmptyDataAlert, {
+    label: "student"
+  })), React__default.createElement(reactstrap.Col, {
     md: 12
   }, React__default.createElement(CustomPagination, {
     filters: filters,
-    totalRecordCount: totalItems,
+    totalRecordCount: totalItem,
     changePageSize: function changePageSize(pageSize) {
       return changeFilters({
         pageSize: pageSize
@@ -8532,6 +9449,22 @@ var UserList = function UserList() {
   }))));
 };
 
+var tabs = [{
+  path: "/admin/users/user-list",
+  title: "User List",
+  component: UserList
+}, {
+  path: "/admin/users/assign-student",
+  title: "Assign Student",
+  component: AssignStudentList
+}];
+
+var UserContainer = function UserContainer() {
+  return React__default.createElement(CustomTabs, {
+    tabs: tabs
+  });
+};
+
 var MAX_FILE_SIZE = 20097152;
 
 var UploadFileButton = function UploadFileButton(_ref) {
@@ -8626,7 +9559,7 @@ var initValue$3 = {
   isActive: true,
   profileImageFileName: ""
 };
-var USER_LIST_URL = "/admin/user";
+var USER_LIST_URL = "/admin/users/user-list";
 var TITLE$8 = "User detail";
 
 var useUserDetail = function useUserDetail(id) {
@@ -9554,7 +10487,7 @@ var CreatableSelector = function CreatableSelector(props) {
       handleChange = props.handleChange,
       handleInputChange = props.handleInputChange,
       handleKeyDown = props.handleKeyDown;
-  return React__default.createElement(Creatable, {
+  return React__default.createElement(CreatableSelect, {
     components: components,
     placeholder: placeholder || "Type something to create option",
     isClearable: true,
@@ -10277,61 +11210,6 @@ var NotificationList = function NotificationList() {
   }))));
 };
 
-var CustomTabs = function CustomTabs(props) {
-  var history = reactRouterDom.useHistory();
-  var location = reactRouterDom.useLocation();
-  var pathname = location.pathname;
-  var tabs = props.tabs,
-      title = props.title;
-
-  var toggle = function toggle(path) {
-    history.push(path);
-  };
-
-  var renderContent = function renderContent() {
-    var activeTab = tabs.map(function (t) {
-      return t.path;
-    }).indexOf(pathname);
-
-    if (activeTab === -1) {
-      return React__default.createElement(NotFound, null);
-    }
-
-    return React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
-      md: 12
-    }, React__default.createElement("h5", null, title)), React__default.createElement(reactstrap.Col, {
-      xl: 12
-    }, React__default.createElement(reactstrap.Nav, {
-      tabs: true
-    }, tabs.map(function (i) {
-      return React__default.createElement(reactstrap.NavItem, {
-        key: i.path
-      }, React__default.createElement(reactstrap.NavLink, {
-        className: (i.path === pathname ? "active" : "") + " cursor-pointer",
-        onClick: function onClick() {
-          toggle(i.path);
-        }
-      }, i.title));
-    })), React__default.createElement(reactstrap.TabContent, {
-      activeTab: pathname,
-      className: "border-bottom-0 border-left-0 border-right-0"
-    }, tabs.map(function (i) {
-      return React__default.createElement(reactstrap.TabPane, {
-        key: i.path,
-        tabId: i.path
-      }, React__default.createElement(reactRouterDom.Route, {
-        path: i.path,
-        exact: true,
-        component: i.component
-      }));
-    }))));
-  };
-
-  return React__default.createElement("div", {
-    className: "animated fadeIn"
-  }, renderContent());
-};
-
 var CommonAlert = function CommonAlert() {
   var _alert$message2;
 
@@ -12495,6 +13373,7 @@ exports.TheContent = TheContent$1;
 exports.TheLayout = TheLayout;
 exports.ToggleButton = ToggleButton;
 exports.UploadFileButton = UploadFileButton;
+exports.UserContainer = UserContainer;
 exports.UserDetail = UserDetail;
 exports.UserList = UserList;
 exports.addTab = addTab;