mario-core 2.9.166-level → 2.9.168-level

package/dist/index.modern.js

@@ -3,7 +3,7 @@ import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 export { I18nextProvider, useTranslation } from 'react-i18next';
 import React, { useState, useCallback, useEffect, forwardRef, useRef, Suspense, useMemo, memo, Fragment, useImperativeHandle } from 'react';
-import { Input, Modal, ModalHeader, ModalBody, ModalFooter, Button, Row, Col, Form, FormGroup, Label, Navbar, NavbarBrand, Collapse, Nav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Alert, Pagination, PaginationItem, PaginationLink, Table, Popover, PopoverBody, CustomInput, TabContent, TabPane, Card, CardImg, CardBody, CardTitle, CardHeader, CardText } from 'reactstrap';
+import { Input, Modal, ModalHeader, ModalBody, ModalFooter, Button, Row, Col, Form, FormGroup, Label, Navbar, NavbarBrand, Collapse, Nav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Alert, Pagination, PaginationItem, PaginationLink, Table, Popover, PopoverBody, TabContent, TabPane, CustomInput, Card, CardImg, CardBody, CardTitle, CardHeader, CardText } from 'reactstrap';
 import { useHistory, Link, useLocation, Switch, Route, Prompt, useParams } from 'react-router-dom';
 import { Formik } from 'formik';
 import { object, string, boolean, number, array } from 'yup';
@@ -28,10 +28,10 @@ import differenceInCalendarYears$1 from 'date-fns/differenceInCalendarYears';
 import { BiSearchAlt2, BiFilterAlt } from 'react-icons/bi';
 import { HiFilter } from 'react-icons/hi';
 import { AiOutlineSortAscending, AiOutlineSortDescending, AiOutlineEye } from 'react-icons/ai';
+import CreatableSelect from 'react-select/creatable';
 import DatePicker from 'react-datepicker';
 import toDate from 'date-fns/toDate';
 import { MdAttachFile } from 'react-icons/md';
-import Creatable from 'react-select/creatable';
 import ReactNotification$1 from 'react-notifications-component';
 import 'react-notifications-component/dist/theme.css';
 import 'symbol-observable';
@@ -4291,7 +4291,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";
@@ -7355,6 +7355,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;
 
@@ -7380,6 +7402,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 = [{
@@ -7461,6 +7492,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
@@ -8333,190 +8370,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 ? 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 = useTranslation(),
+      t = _useTranslation.t;
+
+  var handleExportUsers = function handleExportUsers() {
+    return exportUsers(filters);
+  };
+
+  return React.createElement("div", {
+    className: "fadeIn animated h-100 pt-3"
+  }, React.createElement("h5", {
+    className: "mb-2"
+  }, t("" + header$2)), React.createElement(Row, {
+    className: "my-2"
+  }, React.createElement(Col, {
+    md: 8
+  }, React.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.createElement(Col, {
+    md: 4,
+    className: "d-flex justify-content-end align-items-center"
+  }, t("total_of_users"), " : ", totalItems), React.createElement(Col, {
+    md: 12,
+    className: "d-flex justify-content-end my-2"
+  }, React.createElement(SyncButtonIcon, {
+    text: "Sync Roster users",
+    onClick: handleSyncRosterUsers
+  }), React.createElement("button", {
+    className: "btn btn-success d-flex align-items-center border-0 p-0 ml-2",
+    style: buttonStyle$2,
+    onClick: handleExportUsers
+  }, React.createElement("div", {
+    className: "" + styles["button-icon"]
+  }, React.createElement("img", {
+    src: "images/export-icon.svg",
+    alt: ""
+  })), React.createElement("p", {
+    className: styles["button-content"] + " mb-0",
+    style: buttonTextStyle$2
+  }, "Export to CSV")))), React.createElement(Row, {
+    className: "mb-2"
+  }, React.createElement(Col, {
+    md: 12
+  }, React.createElement("div", null, React.createElement(Table, {
+    bordered: true,
+    hover: true,
+    striped: true,
+    responsive: true,
+    size: "sm"
+  }, React.createElement("thead", null, React.createElement(TableHeader, {
+    headers: UserColumns,
+    filters: filters,
+    fullName: fullName,
+    onChangeFilters: changeFilters
+  })), React.createElement("tbody", null, userList && userList.length > 0 && userList.map(function (record) {
+    return React.createElement("tr", {
+      key: record.id
+    }, React.createElement("td", {
+      className: "align-middle"
+    }, React.createElement(LinkEditButton, {
+      label: "" + record.fullName,
+      onClick: function onClick() {
+        return reDirectDetailPage(record.id);
+      }
+    })), React.createElement("td", {
+      className: "align-middle"
+    }, record.email), React.createElement("td", {
+      className: "align-middle"
+    }, record.dateOfBirth !== DATE_MIN_VALUE && differenceInCalendarYears$1(new Date(), new Date(record.dateOfBirth))), React.createElement("td", {
+      className: "align-middle"
+    }, !!record.roles && record.roles.map(function (role) {
+      return role === "SecondaryTeacher" ? "SupportTeacher" : role;
+    }).join(", ")), React.createElement("td", {
+      className: "align-middle"
+    }, record.isActive ? t("active") : t("inactive")), React.createElement("td", {
+      className: "align-middle"
+    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React.createElement("td", null, rosterUserInfo(record)), React.createElement("td", {
+      className: "text-center align-middle"
+    }, React.createElement(FaUsersCog, {
+      style: {
+        fontSize: "18px",
+        marginRight: "10px",
+        cursor: "pointer"
+      },
+      onClick: function onClick() {
+        return swicthUser(record.id);
+      }
+    }), React.createElement(DeleteButtonIcon, {
+      onClick: function onClick() {
+        return removeData(record.id);
+      }
+    })));
+  }), (!userList || !userList.length) && React.createElement("tr", null, React.createElement("td", {
+    colSpan: 12,
+    className: "p-0"
+  }, React.createElement(EmptyDataAlert, {
+    className: "mb-0",
+    label: t("user")
+  }))))))), React.createElement(Col, {
+    md: 12
+  }, React.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 = useHistory();
+  var location = 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.createElement(NotFound, null);
+    }
+
+    return React.createElement(Row, null, React.createElement(Col, {
+      md: 12
+    }, React.createElement("h5", null, title)), React.createElement(Col, {
+      xl: 12
+    }, React.createElement(Nav, {
+      tabs: true
+    }, tabs.map(function (i) {
+      return React.createElement(NavItem, {
+        key: i.path
+      }, React.createElement(NavLink, {
+        className: (i.path === pathname ? "active" : "") + " cursor-pointer",
+        onClick: function onClick() {
+          toggle(i.path);
+        }
+      }, i.title));
+    })), React.createElement(TabContent, {
+      activeTab: pathname,
+      className: "border-bottom-0 border-left-0 border-right-0"
+    }, tabs.map(function (i) {
+      return React.createElement(TabPane, {
+        key: i.path,
+        tabId: i.path
+      }, React.createElement(Route, {
+        path: i.path,
+        exact: true,
+        component: i.component
+      }));
+    }))));
+  };
+
+  return React.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 = 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.createElement("div", {
+    className: "w-100"
+  }, React.createElement("div", {
+    className: "w-100"
+  }, React.createElement(CreatableSelect, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    onCreateOption: handleCreateTeacherOption,
+    onFocus: handleFocus
+  }, rest))), !!errorMessage && React.createElement("p", {
+    className: "text-danger mb-0 mt-1"
+  }, errorMessage));
+};
+
+var useAssignStudentList = function useAssignStudentList() {
+  var dispatch = useDispatch();
+
+  var _useState = useState([]),
+      userList = _useState[0],
+      setUserList = _useState[1];
+
+  var _useState2 = useState(DEFAULT_STUDENT_FILTER),
+      filters = _useState2[0],
+      setFilters = _useState2[1];
+
+  var _useState3 = useState(0),
+      totalItem = _useState3[0],
+      setTotalItem = _useState3[1];
+
+  var _useState4 = useState(false),
+      isCheckAll = _useState4[0],
+      setIsCheckAll = _useState4[1];
+
+  var _useState5 = 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 = 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 = useCallback(function () {
+    if (filters.currentPage == 1) getDataUserList();else changeFilters({
+      currentPage: 1
+    });
+    setIsCheck([]);
+    setIsCheckAll(false);
+  }, [JSON.stringify(filters)]);
+  useEffect(function () {
+    getDataUserList();
+  }, [JSON.stringify(filters)]);
+  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 = useDispatch();
+
+  var _useState = useState([]),
+      counselorOptions = _useState[0],
+      setCounselorOptions = _useState[1];
+
+  var _useState2 = 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 = 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 = useCallback(function (newCounselor, studentUserId) {
+    var _extends3;
+
+    setCounselorOptions([].concat(counselorOptions, [newCounselor]));
+    setSelectedCounselors(_extends({}, selectedCounselors, (_extends3 = {}, _extends3[studentUserId] = newCounselor, _extends3)));
+  }, [JSON.stringify(counselorOptions), JSON.stringify(selectedCounselors)]);
+  useEffect(function () {
+    getDataCounselors();
+  }, []);
+  return {
+    selectedCounselors: selectedCounselors,
+    counselorOptions: counselorOptions,
+    handleSelectCounselor: handleSelectCounselor,
+    handleCreateCounselorOption: handleCreateCounselorOption,
+    setSelectedCounselors: setSelectedCounselors
+  };
+};
+
+var useAssistantList = function useAssistantList() {
+  var dispatch = useDispatch();
+
+  var _useState = useState([]),
+      assistantOptions = _useState[0],
+      setAssistantOptions = _useState[1];
+
+  var _useState2 = 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 = 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 = useCallback(function (newAssistant, studentUserId) {
+    var _extends3;
+
+    setAssistantOptions([].concat(assistantOptions, [newAssistant]));
+    setSelectedAssistants(_extends({}, selectedAssistants, (_extends3 = {}, _extends3[studentUserId] = newAssistant, _extends3)));
+  }, [JSON.stringify(assistantOptions), JSON.stringify(selectedAssistants)]);
+  useEffect(function () {
+    getDataAssistants();
+  }, []);
+  return {
+    selectedAssistants: selectedAssistants,
+    assistantOptions: assistantOptions,
+    handleSelectAssistant: handleSelectAssistant,
+    handleCreateAssistantOption: handleCreateAssistantOption,
+    setSelectedAssistants: setSelectedAssistants
+  };
+};
+
+var useSecondaryTeacherList = function useSecondaryTeacherList() {
+  var dispatch = useDispatch();
+
+  var _useState = useState([]),
+      secondaryTeacherOptions = _useState[0],
+      setSecondaryTeacherOptions = _useState[1];
+
+  var _useState2 = 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 = 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 = useCallback(function (newSecondaryTeacher, studentUserId) {
+    var _extends3;
+
+    setSecondaryTeacherOptions([].concat(secondaryTeacherOptions, [newSecondaryTeacher]));
+    setSelectedSecondaryTeachers(_extends({}, selectedSecondaryTeachers, (_extends3 = {}, _extends3[studentUserId] = newSecondaryTeacher, _extends3)));
+  }, [JSON.stringify(secondaryTeacherOptions), JSON.stringify(selectedSecondaryTeachers)]);
+  useEffect(function () {
+    getDataSecondaryTeachers();
+  }, []);
+  return {
+    selectedSecondaryTeachers: selectedSecondaryTeachers,
+    secondaryTeacherOptions: secondaryTeacherOptions,
+    handleSelectSecondaryTeacher: handleSelectSecondaryTeacher,
+    handleCreateSecondaryTeacherOption: handleCreateSecondaryTeacherOption,
+    setSelectedSecondaryTeachers: setSelectedSecondaryTeachers
+  };
+};
+
+var useTeacherList = function useTeacherList() {
+  var dispatch = useDispatch();
+
+  var _useState = useState([]),
+      teacherOptions = _useState[0],
+      setTeacherOptions = _useState[1];
+
+  var _useState2 = 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 = 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 = useCallback(function (newTeacher, studentUserId) {
+    var _extends3;
+
+    setTeacherOptions([].concat(teacherOptions, [newTeacher]));
+    setSelectedTeachers(_extends({}, selectedTeachers, (_extends3 = {}, _extends3[studentUserId] = newTeacher, _extends3)));
+  }, [JSON.stringify(teacherOptions), JSON.stringify(selectedTeachers)]);
+  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 = 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 = 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 = 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 ? 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 = 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.createElement("div", {
-    className: "fadeIn animated h-100"
+    className: "fadeIn animated"
   }, React.createElement("h5", {
-    className: "mb-2"
-  }, t("" + header$2)), React.createElement(Row, {
+    className: "mt-4 mb-2"
+  }, "Assign Student"), React.createElement(Row, {
     className: "my-2"
   }, React.createElement(Col, {
     md: 8
-  }, React.createElement(SearchBoxContainer, {
-    text: t("create_user"),
-    onClick: function onClick() {
-      return reDirectDetailPage();
-    },
-    initValue: !!queryName ? queryName : "",
+  }, React.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.createElement(Col, {
     md: 4,
     className: "d-flex justify-content-end align-items-center"
-  }, t("total_of_users"), " : ", totalItems), React.createElement(Col, {
-    md: 12,
-    className: "d-flex justify-content-end my-2"
-  }, React.createElement(SyncButtonIcon, {
-    text: "Sync Roster users",
-    onClick: handleSyncRosterUsers
-  }), React.createElement("button", {
-    className: "btn btn-success d-flex align-items-center border-0 p-0 ml-2",
-    style: buttonStyle$2,
-    onClick: handleExportUsers
-  }, React.createElement("div", {
-    className: "" + styles["button-icon"]
-  }, React.createElement("img", {
-    src: "images/export-icon.svg",
-    alt: ""
-  })), React.createElement("p", {
-    className: styles["button-content"] + " mb-0",
-    style: buttonTextStyle$2
-  }, "Export to CSV")))), React.createElement(Row, {
+  }, t("total_of_users"), ": ", totalItem)), React.createElement(Row, {
+    className: "mb-2"
+  }, React.createElement(Col, null, React.createElement(Button, {
+    onClick: function onClick() {
+      return handleAssignMultiStudent(isCheck);
+    },
+    color: "primary"
+  }, "Assign for Selected Students"))), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 12
-  }, React.createElement("div", null, React.createElement(Table, {
+  }, !!userList && userList.length > 0 ? React.createElement("div", null, React.createElement(Table, {
     bordered: true,
     hover: true,
     striped: true,
     responsive: true,
     size: "sm"
-  }, React.createElement("thead", null, React.createElement(TableHeader, {
-    headers: UserColumns,
-    filters: filters,
-    fullName: fullName,
-    onChangeFilters: changeFilters
-  })), React.createElement("tbody", null, userList && userList.length > 0 && userList.map(function (record) {
+  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+    className: "align-middle text-center"
+  }, React.createElement("input", {
+    type: "checkbox",
+    onChange: handleSelectAll,
+    checked: isCheckAll
+  })), React.createElement("th", {
+    className: "align-top " + styles["pointer"],
+    onClick: function onClick() {
+      return handelSort(UserOrder.Name);
+    }
+  }, "Student Name", filters.sortBy === UserOrder.Name && React.createElement(React.Fragment, null, filters.orderBy === "DESC" ? React.createElement(AiOutlineSortDescending, {
+    className: "ml-1"
+  }) : React.createElement(AiOutlineSortAscending, {
+    className: "ml-1"
+  }))), React.createElement("th", {
+    className: "align-top " + styles["pointer"],
+    onClick: function onClick() {
+      return handelSort(UserOrder.Email);
+    }
+  }, "Student Email", filters.sortBy === UserOrder.Email && React.createElement(React.Fragment, null, filters.orderBy === "DESC" ? React.createElement(AiOutlineSortDescending, {
+    className: "ml-1"
+  }) : React.createElement(AiOutlineSortAscending, {
+    className: "ml-1"
+  }))), React.createElement("th", {
+    style: {
+      width: "15%"
+    }
+  }, t("teacher_email")), React.createElement("th", {
+    style: {
+      width: "15%"
+    }
+  }, "Assistant Email"), React.createElement("th", {
+    style: {
+      width: "15%"
+    }
+  }, "Counselor Email"), React.createElement("th", {
+    style: {
+      width: "15%"
+    }
+  }, "Support Teacher Email"), React.createElement("th", {
+    className: "align-top"
+  }, t("action")))), React.createElement("tbody", null, userList.map(function (item) {
     return React.createElement("tr", {
-      key: record.id
+      key: item.id
     }, React.createElement("td", {
-      className: "align-middle"
-    }, React.createElement(LinkEditButton, {
-      label: "" + record.fullName,
-      onClick: function onClick() {
-        return reDirectDetailPage(record.id);
-      }
+      className: "align-middle text-center"
+    }, React.createElement("input", {
+      id: item.id,
+      type: "checkbox",
+      onChange: handleClickCheck,
+      checked: isCheck.includes(item.id)
     })), React.createElement("td", {
       className: "align-middle"
-    }, record.email), React.createElement("td", {
+    }, item.fullName), React.createElement("td", {
       className: "align-middle"
-    }, record.dateOfBirth !== DATE_MIN_VALUE && differenceInCalendarYears$1(new Date(), new Date(record.dateOfBirth))), React.createElement("td", {
+    }, item.email), React.createElement("td", {
       className: "align-middle"
-    }, !!record.roles && record.roles.map(function (role) {
-      return role === "SecondaryTeacher" ? "SupportTeacher" : role;
-    }).join(", ")), React.createElement("td", {
+    }, !!item.mainTeacherEmail ? React.createElement(React.Fragment, null, React.createElement("p", {
+      className: "mb-0"
+    }, item.mainTeacherEmail), React.createElement("p", {
+      className: "mb-0"
+    }, item.mainTeacherName)) : React.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.createElement("td", {
       className: "align-middle"
-    }, record.isActive ? t("active") : t("inactive")), React.createElement("td", {
+    }, !!item.assistantEmail ? React.createElement(React.Fragment, null, React.createElement("p", {
+      className: "mb-0"
+    }, item.assistantEmail), React.createElement("p", {
+      className: "mb-0"
+    }, item.assistantName)) : React.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.createElement("td", {
       className: "align-middle"
-    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React.createElement("td", null, rosterUserInfo(record)), React.createElement("td", {
-      className: "text-center align-middle"
-    }, React.createElement(FaUsersCog, {
-      style: {
-        fontSize: "18px",
-        marginRight: "10px",
-        cursor: "pointer"
+    }, !!item.counselorEmail ? React.createElement(React.Fragment, null, React.createElement("p", {
+      className: "mb-0"
+    }, item.counselorEmail), React.createElement("p", {
+      className: "mb-0"
+    }, item.counselorName)) : React.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.createElement("td", {
+      className: "align-middle"
+    }, !!item.secondaryTeacherEmail ? React.createElement(React.Fragment, null, React.createElement("p", {
+      className: "mb-0"
+    }, item.secondaryTeacherEmail), React.createElement("p", {
+      className: "mb-0"
+    }, item.secondaryTeacherName)) : React.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.createElement("td", {
+      className: "align-middle"
+    }, React.createElement("div", {
+      className: "d-flex"
+    }, React.createElement(LinkEditButton, {
+      label: "Assign",
       onClick: function onClick() {
-        return swicthUser(record.id);
-      }
-    }), React.createElement(DeleteButtonIcon, {
-      onClick: function onClick() {
-        return removeData(record.id);
+        return handleAssignSingleStudent(item.id);
       }
-    })));
-  }), (!userList || !userList.length) && React.createElement("tr", null, React.createElement("td", {
-    colSpan: 12,
-    className: "p-0"
-  }, React.createElement(EmptyDataAlert, {
-    className: "mb-0",
-    label: t("user")
-  }))))))), React.createElement(Col, {
+    }))));
+  })))) : React.createElement(EmptyDataAlert, {
+    label: "student"
+  })), React.createElement(Col, {
     md: 12
   }, React.createElement(CustomPagination, {
     filters: filters,
-    totalRecordCount: totalItems,
+    totalRecordCount: totalItem,
     changePageSize: function changePageSize(pageSize) {
       return changeFilters({
         pageSize: pageSize
@@ -8530,6 +9447,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.createElement(CustomTabs, {
+    tabs: tabs
+  });
+};
+
 var MAX_FILE_SIZE = 20097152;
 
 var UploadFileButton = function UploadFileButton(_ref) {
@@ -8624,7 +9557,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) {
@@ -9552,7 +10485,7 @@ var CreatableSelector = function CreatableSelector(props) {
       handleChange = props.handleChange,
       handleInputChange = props.handleInputChange,
       handleKeyDown = props.handleKeyDown;
-  return React.createElement(Creatable, {
+  return React.createElement(CreatableSelect, {
     components: components,
     placeholder: placeholder || "Type something to create option",
     isClearable: true,
@@ -10275,61 +11208,6 @@ var NotificationList = function NotificationList() {
   }))));
 };
 
-var CustomTabs = function CustomTabs(props) {
-  var history = useHistory();
-  var location = 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.createElement(NotFound, null);
-    }
-
-    return React.createElement(Row, null, React.createElement(Col, {
-      md: 12
-    }, React.createElement("h5", null, title)), React.createElement(Col, {
-      xl: 12
-    }, React.createElement(Nav, {
-      tabs: true
-    }, tabs.map(function (i) {
-      return React.createElement(NavItem, {
-        key: i.path
-      }, React.createElement(NavLink, {
-        className: (i.path === pathname ? "active" : "") + " cursor-pointer",
-        onClick: function onClick() {
-          toggle(i.path);
-        }
-      }, i.title));
-    })), React.createElement(TabContent, {
-      activeTab: pathname,
-      className: "border-bottom-0 border-left-0 border-right-0"
-    }, tabs.map(function (i) {
-      return React.createElement(TabPane, {
-        key: i.path,
-        tabId: i.path
-      }, React.createElement(Route, {
-        path: i.path,
-        exact: true,
-        component: i.component
-      }));
-    }))));
-  };
-
-  return React.createElement("div", {
-    className: "animated fadeIn"
-  }, renderContent());
-};
-
 var CommonAlert = function CommonAlert() {
   var _alert$message2;
 
@@ -12416,5 +13294,5 @@ var generateRandomString = (function () {
 
 var amplitudeClient = amplitude.getInstance();
 
-export { ACCESS_TOKEN, ANSWER_EDITOR_HEIGHT, AcademicClassSelector, AddButton, BASE_URL, CHAT_CHANNEL, CategorySelector, CommonAlert, CommonHeader, CommonModal$1 as CommonModal, CreatableSelector, CustomPagination, CustomSelector, CustomTabs as CustomTab, DATE_FORMAT, DATE_RESULT, DEFAULT_FILTER, Dashboard, DeleteButtonIcon, DetailActionButtons, EMOTIONS, EditButtonIcon, EmailTemplateDetail, EmailTemplateList, EmptyDataAlert, ErrorHandler, FULL_DATE_RESULT, FaqList, InputFile as FileInput, GOOGLE_RECAPTCHA_KEY, GalleryList, INIT_AMPLITUDE_KEY_PROD, INIT_AMPLITUDE_KEY_STAGE, Images, LICENSE_AGGRID, LinkEditButton, Loading, Login, MediaList, NOTIFICATION_ALERT_KEY, NOTIFICATION_CHANNEL, NotFound, NotificationList, NotificationLogoutModal, NotificationModal, QUESTION_TYPES, QUESTION_TYPES_OPTIONS, QuestionCategorySelector, QuestionTypeSelector, QuitPrompt, ReactNotification, RequiredLabel$1 as RequiredLabel, SchoolList, ScrollToTop, SearchBox$1 as SearchBox, SearchBoxContainer, SkillList, StarRatingSelector, SuggestionCategorySelector, TAB_COLORS, TINY_MCE_API_KEY, TheContent$1 as TheContent, TheLayout, ToggleButton, UploadFileButton, UserDetail, UserList, addTab, amplitudeClient, answerQuestion, answerQuestionDataPlayer, api, apiUpload, canAccess as canAccessRoute, changeNote, changeTags, clearTab, closeTab, debounce, editTab, editorConfig, firstCheckToken, generateRandomString, getFileUrl, getInfo, getStaticFileUrl, getTextFromHTML, i18n, initAmplitude, isInViewport, isLocalhost, reset, setAlert, setAssessmentList, setAssignmentList, setAssistantList, setBadgeList, setBandScoreList, setCertificateList, setClassList, setConferenceRubricList, setConversationOneToOne, setCurrentStudentId, setCurrentStudentName, setCurrentStudentUserId, setCustomAlertList, setDataPlayer, setEditItemQuesion, setEnableIEP, setEnableSurvey, setFeedbackList, setFilterWidget, setGoalExampleList, setImproveMyClass, setLanguage, setLearningSupportCategoryList, setLoading, setMailCategory, setModal, setMoveItemQuestion, setMyStudent, setQuestionByCategory, setQuestionCateList, setQuestionList, setReflectionList, setReflectionResultList, setResetQuestionList, setSchoolBlankDayList, setSelectQuestion, setSemesterList, setSessionPlayer, setSessionTemplateGeneralClassList, setSessionTemplateList, setStartTime, setStrategyList, setStudentIdSelectedByTeacher, setStudentList, setSubjectList, setSuggestionList, setTurnOffPassWhenChangeMode, setTutorialScreenList, setUser, setUserList, showFontSize, showMenuBar, store, systemCertificateUpload, systemStudentBadge, uploadFile, useFilters, useGalleryList, utcToLocalTime };
+export { ACCESS_TOKEN, ANSWER_EDITOR_HEIGHT, AcademicClassSelector, AddButton, BASE_URL, CHAT_CHANNEL, CategorySelector, CommonAlert, CommonHeader, CommonModal$1 as CommonModal, CreatableSelector, CustomPagination, CustomSelector, CustomTabs as CustomTab, DATE_FORMAT, DATE_RESULT, DEFAULT_FILTER, Dashboard, DeleteButtonIcon, DetailActionButtons, EMOTIONS, EditButtonIcon, EmailTemplateDetail, EmailTemplateList, EmptyDataAlert, ErrorHandler, FULL_DATE_RESULT, FaqList, InputFile as FileInput, GOOGLE_RECAPTCHA_KEY, GalleryList, INIT_AMPLITUDE_KEY_PROD, INIT_AMPLITUDE_KEY_STAGE, Images, LICENSE_AGGRID, LinkEditButton, Loading, Login, MediaList, NOTIFICATION_ALERT_KEY, NOTIFICATION_CHANNEL, NotFound, NotificationList, NotificationLogoutModal, NotificationModal, QUESTION_TYPES, QUESTION_TYPES_OPTIONS, QuestionCategorySelector, QuestionTypeSelector, QuitPrompt, ReactNotification, RequiredLabel$1 as RequiredLabel, SchoolList, ScrollToTop, SearchBox$1 as SearchBox, SearchBoxContainer, SkillList, StarRatingSelector, SuggestionCategorySelector, TAB_COLORS, TINY_MCE_API_KEY, TheContent$1 as TheContent, TheLayout, ToggleButton, UploadFileButton, UserContainer, UserDetail, UserList, addTab, amplitudeClient, answerQuestion, answerQuestionDataPlayer, api, apiUpload, canAccess as canAccessRoute, changeNote, changeTags, clearTab, closeTab, debounce, editTab, editorConfig, firstCheckToken, generateRandomString, getFileUrl, getInfo, getStaticFileUrl, getTextFromHTML, i18n, initAmplitude, isInViewport, isLocalhost, reset, setAlert, setAssessmentList, setAssignmentList, setAssistantList, setBadgeList, setBandScoreList, setCertificateList, setClassList, setConferenceRubricList, setConversationOneToOne, setCurrentStudentId, setCurrentStudentName, setCurrentStudentUserId, setCustomAlertList, setDataPlayer, setEditItemQuesion, setEnableIEP, setEnableSurvey, setFeedbackList, setFilterWidget, setGoalExampleList, setImproveMyClass, setLanguage, setLearningSupportCategoryList, setLoading, setMailCategory, setModal, setMoveItemQuestion, setMyStudent, setQuestionByCategory, setQuestionCateList, setQuestionList, setReflectionList, setReflectionResultList, setResetQuestionList, setSchoolBlankDayList, setSelectQuestion, setSemesterList, setSessionPlayer, setSessionTemplateGeneralClassList, setSessionTemplateList, setStartTime, setStrategyList, setStudentIdSelectedByTeacher, setStudentList, setSubjectList, setSuggestionList, setTurnOffPassWhenChangeMode, setTutorialScreenList, setUser, setUserList, showFontSize, showMenuBar, store, systemCertificateUpload, systemStudentBadge, uploadFile, useFilters, useGalleryList, utcToLocalTime };
 //# sourceMappingURL=index.modern.js.map