mario-core 2.9.157-level → 2.9.158-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, 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, CustomInput, TabContent, TabPane, 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';
@@ -22,16 +22,18 @@ import { RiLogoutBoxRLine } from 'react-icons/ri';
 import Pusher from 'pusher-js/with-encryption';
 import { BsChevronDown } from 'react-icons/bs';
 import { FaPlus, FaTrashAlt, FaSyncAlt, FaUsersCog, FaRegEdit, FaArrowLeft, FaDownload, FaTrash, FaEdit, FaFolderPlus, FaFileUpload } from 'react-icons/fa';
-import { format } from 'date-fns';
+import { format, differenceInCalendarYears } from 'date-fns';
 import { Editor } from '@tinymce/tinymce-react';
-import differenceInCalendarYears from 'date-fns/differenceInCalendarYears';
+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 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 { AiOutlineEye } from 'react-icons/ai';
 import 'symbol-observable';
 
 var dashboard = "Dashboard";
@@ -2798,7 +2800,7 @@ function _catch(body, recover) {
 	return result;
 }
 
-var styles = {"btn-login-google":"_2HqmH","notification-count":"_2sew7","text-introduction":"_3OgWF","btn-trans-border":"_r9cAh","contact":"_NszFe","learn-more":"_MDjzH","title-quote":"_1Swkw","descriptions-quote":"_gi8vj","box-login":"_38Lo1","block-verification":"_1OzGy","block-login":"_wWIyO","title-login":"_3nuns","title-forgot-password":"_21qb6","btn-close":"_NhW9l","btn-login":"_3IL10","digital-privacy-icon":"_141p1","return-to-login":"_Ce3Kg","recover-account":"_2t6d9","link-to-login":"_3bDsd","remember":"_11FZt","term-and-conditions":"_3LXoI","descriptions-forgot-pass":"_PMcjT","content-icon":"_2rZY6","descriptions-icon":"_3SOdX","title-icon":"_y9lM2","nav-home":"_1TT1q","box-introduction":"_32V6L","icon":"_20YJX","form-user-name":"_39BJD","checkbox-remember":"_2K9b2","block-reset-password":"_23Sua","block-forgot-pass":"_3CWP6","page-not-login":"_3Wmco","content-quote":"_13Rk0","home-page":"_o6HKW","red-background":"_jOY7o","imageAnimation":"_wnn2_","login":"_F-hjL","login-content":"_149oA","logo-home":"_24U3W","img-box":"_2v-L_","img-login":"_3ncTL","img-login-rectangle":"_2kOvJ","c-main":"_39l0X","container-fluid":"_1BMwK","input-file-label":"_1XNpH","delete-avatar-button":"_1z5h9","header-logo":"_Gewcf","box-sidebar":"_2vcmv","sidebar-logo":"_1hXpy","sidebar-nav-links":"_3vb3s","c-active":"_36jSM","sidebar-nav-links-hover":"_DNrus","box-sidebar-header":"_3NEZj","box-logout":"_1wUDG","sidebar-btn-minimized":"_1S7Px","sidebar-logout":"_2P85D","nav-mobile":"_1qjbW","filter-media-file":"_1I62C","div":"_3cLcM","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","logout":"_1_9tV","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","hide-in-mobile":"_1INnO","hamburger-menu":"_2yRc8","box-content-home-page":"_ABUIP","collapse-box":"_WX97m","hide-in-desktop":"_2LIqK","control-input":"_2Zz97","custom-control":"_3-yp5","item-select-role":"_1KcY7","item-role-active":"_dOVso","model-switch-roles":"_3ZqxI","title":"_g-p72"};
+var styles = {"btn-login-google":"_2HqmH","notification-count":"_2sew7","text-introduction":"_3OgWF","btn-trans-border":"_r9cAh","contact":"_NszFe","learn-more":"_MDjzH","title-quote":"_1Swkw","descriptions-quote":"_gi8vj","box-login":"_38Lo1","block-verification":"_1OzGy","block-login":"_wWIyO","title-login":"_3nuns","title-forgot-password":"_21qb6","btn-close":"_NhW9l","btn-login":"_3IL10","digital-privacy-icon":"_141p1","return-to-login":"_Ce3Kg","recover-account":"_2t6d9","link-to-login":"_3bDsd","remember":"_11FZt","term-and-conditions":"_3LXoI","descriptions-forgot-pass":"_PMcjT","content-icon":"_2rZY6","descriptions-icon":"_3SOdX","title-icon":"_y9lM2","nav-home":"_1TT1q","box-introduction":"_32V6L","icon":"_20YJX","form-user-name":"_39BJD","checkbox-remember":"_2K9b2","block-reset-password":"_23Sua","block-forgot-pass":"_3CWP6","page-not-login":"_3Wmco","content-quote":"_13Rk0","home-page":"_o6HKW","red-background":"_jOY7o","imageAnimation":"_wnn2_","login":"_F-hjL","login-content":"_149oA","logo-home":"_24U3W","img-box":"_2v-L_","img-login":"_3ncTL","img-login-rectangle":"_2kOvJ","c-main":"_39l0X","container-fluid":"_1BMwK","input-file-label":"_1XNpH","delete-avatar-button":"_1z5h9","header-logo":"_Gewcf","box-sidebar":"_2vcmv","sidebar-logo":"_1hXpy","sidebar-nav-links":"_3vb3s","c-active":"_36jSM","sidebar-nav-links-hover":"_DNrus","box-sidebar-header":"_3NEZj","box-logout":"_1wUDG","sidebar-btn-minimized":"_1S7Px","sidebar-logout":"_2P85D","nav-mobile":"_1qjbW","filter-media-file":"_1I62C","div":"_3cLcM","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","logout":"_1_9tV","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","popover__sort__item":"_1ocBa","popover__sort__item--active":"_18NhM","popover__search__icon":"_2bquW","popover__search__input":"_3A4G4","popover__options":"_1MsEW","button-export":"_2rTzM","button-content":"_18y0w","button-icon":"_3cZAT","hide-in-mobile":"_1INnO","hamburger-menu":"_2yRc8","box-content-home-page":"_ABUIP","collapse-box":"_WX97m","hide-in-desktop":"_2LIqK","control-input":"_2Zz97","custom-control":"_3-yp5","item-select-role":"_1KcY7","item-role-active":"_dOVso","model-switch-roles":"_3ZqxI","title":"_g-p72"};
 
 var style = {
   fontSize: "0.85rem"
@@ -7302,6 +7304,11 @@ var getRosterUser = function getRosterUser(filter) {
     params: filter
   });
 };
+var getRosterUserExport = function getRosterUserExport(filter) {
+  return api.get(ROSTER_USER_URL + "/export-csv", {
+    params: filter
+  });
+};
 var getRosterUserById = function getRosterUserById(id) {
   return api.get(ROSTER_USER_URL + "/" + id);
 };
@@ -7335,6 +7342,173 @@ var syncRosterStudentsApi = function syncRosterStudentsApi() {
   return api.put(STUDENT_URL + "/sync-students");
 };
 
+var UserOrder;
+
+(function (UserOrder) {
+  UserOrder[UserOrder["Id"] = 0] = "Id";
+  UserOrder[UserOrder["Name"] = 1] = "Name";
+  UserOrder[UserOrder["Email"] = 2] = "Email";
+  UserOrder[UserOrder["Age"] = 3] = "Age";
+  UserOrder[UserOrder["Role"] = 4] = "Role";
+  UserOrder[UserOrder["Status"] = 5] = "Status";
+  UserOrder[UserOrder["CreatedAt"] = 6] = "CreatedAt";
+  UserOrder[UserOrder["RosterUser"] = 7] = "RosterUser";
+})(UserOrder || (UserOrder = {}));
+
+var SearchBy;
+
+(function (SearchBy) {
+  SearchBy[SearchBy["Id"] = 0] = "Id";
+  SearchBy[SearchBy["Name"] = 1] = "Name";
+  SearchBy[SearchBy["Email"] = 2] = "Email";
+  SearchBy[SearchBy["Role"] = 3] = "Role";
+  SearchBy[SearchBy["RosterUser"] = 4] = "RosterUser";
+  SearchBy[SearchBy["Status"] = 5] = "Status";
+})(SearchBy || (SearchBy = {}));
+
+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 = [{
+  name: "name",
+  sortBy: UserOrder.Name,
+  searchBy: SearchBy.Name,
+  className: "align-top",
+  getOption: function getOption(user) {
+    var _user$fullName, _user$fullName$trim;
+
+    return {
+      label: user.fullName || "empty",
+      value: (_user$fullName = user.fullName) === null || _user$fullName === void 0 ? void 0 : (_user$fullName$trim = _user$fullName.trim) === null || _user$fullName$trim === void 0 ? void 0 : _user$fullName$trim.call(_user$fullName)
+    };
+  }
+}, {
+  name: "email",
+  sortBy: UserOrder.Email,
+  searchBy: SearchBy.Email,
+  className: "align-top",
+  getOption: function getOption(user) {
+    var _user$email, _user$email$trim;
+
+    return {
+      label: user.email || "empty",
+      value: (_user$email = user.email) === null || _user$email === void 0 ? void 0 : (_user$email$trim = _user$email.trim) === null || _user$email$trim === void 0 ? void 0 : _user$email$trim.call(_user$email)
+    };
+  }
+}, {
+  name: "age",
+  sortBy: UserOrder.Age,
+  className: "align-top"
+}, {
+  name: "role",
+  sortBy: UserOrder.Role,
+  searchBy: SearchBy.Role,
+  className: "align-top",
+  getOption: function getOption(user) {
+    var _user$roles, _user$roles2, _user$roles3, _user$roles3$join, _user$roles3$join$tri;
+
+    return {
+      label: (_user$roles = user.roles) !== null && _user$roles !== void 0 && _user$roles.length ? (_user$roles2 = user.roles) === null || _user$roles2 === void 0 ? void 0 : _user$roles2.map(function (role) {
+        return role === "SecondaryTeacher" ? "SupportTeacher" : role;
+      }).join(", ") : "empty",
+      value: (_user$roles3 = user.roles) === null || _user$roles3 === void 0 ? void 0 : (_user$roles3$join = _user$roles3.join("")) === null || _user$roles3$join === void 0 ? void 0 : (_user$roles3$join$tri = _user$roles3$join.trim) === null || _user$roles3$join$tri === void 0 ? void 0 : _user$roles3$join$tri.call(_user$roles3$join)
+    };
+  }
+}, {
+  name: "active_status",
+  sortBy: UserOrder.Status,
+  searchBy: SearchBy.Status,
+  className: "align-top",
+  getOption: function getOption(user, t) {
+    return {
+      label: user.isActive ? t("active") : t("inactive"),
+      value: user.isActive
+    };
+  },
+  options: [{
+    label: "Active",
+    value: "true"
+  }, {
+    label: "Inactive",
+    value: "false"
+  }]
+}, {
+  name: "created_time",
+  sortBy: UserOrder.CreatedAt,
+  className: "align-top"
+}, {
+  name: "Information Roster (Sourced Id / Full name / Email)",
+  sortBy: UserOrder.RosterUser,
+  searchBy: SearchBy.RosterUser,
+  className: "align-top",
+  getOption: function getOption(record) {
+    if (!record) return {
+      label: "empty",
+      value: ""
+    };
+    var result = [];
+    var sourcedId = record.sourcedId,
+        rosterUser = record.rosterUser;
+    !!sourcedId && result.push(sourcedId);
+
+    if (rosterUser) {
+      var givenName = rosterUser.givenName,
+          middleName = rosterUser.middleName,
+          familyName = rosterUser.familyName,
+          email = rosterUser.email;
+      var names = [];
+      !!givenName && names.push(givenName);
+      !!middleName && names.push(middleName);
+      !!familyName && names.push(familyName);
+      !!names.length && result.push(names.join(" "));
+      !!email && result.push(email);
+    }
+
+    return {
+      label: result.length ? result.join(" / ") : "empty",
+      value: "" + (sourcedId || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.familyName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.middleName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.givenName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.email) || "")
+    };
+  }
+}, {
+  name: "action",
+  className: "text-center"
+}];
+var DEFAULT_PAGE_SIZE$1 = {
+  label: "10",
+  value: 10
+};
+var DEFAULT_FILTER$1 = {
+  searchString: "",
+  currentPage: 1,
+  pageSize: DEFAULT_PAGE_SIZE$1.value
+};
+var DEFAULT_FILTER_POPOVER = {
+  currentPage: 1,
+  pageSize: 200
+};
+var CSV_PREFIX = "data:text/csv;charset=utf-8,";
+
+var useFilters$1 = function useFilters() {
+  var _useState = useState(DEFAULT_FILTER$1),
+      filters = _useState[0],
+      setFilters = _useState[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);
+  };
+
+  return {
+    filters: filters,
+    setFilters: setFilters,
+    changeFilters: changeFilters
+  };
+};
+
 var USER_URL$1 = "/admin/user";
 var CREATE_USER_URL = "/admin/create-user";
 var TITLE$7 = "User list";
@@ -7356,17 +7530,14 @@ var useUserList = function useUserList() {
     return state.users.totalItems;
   });
 
-  var _useFilters = useFilters(),
+  var _useFilters = useFilters$1(),
       filters = _useFilters.filters,
       changeFilters = _useFilters.changeFilters;
 
-  var _useState = useState(!!queryName ? queryName : ""),
-      fullName = _useState[0],
-      setFullName = _useState[1];
-
+  var fullName = !!queryName ? queryName : "";
   var isDistrict = window.location.host.includes("-district");
   var dispatch = useDispatch();
-  var getData = useCallback(function (fullName) {
+  var getData = useCallback(function () {
     try {
       var _temp3 = function _temp3() {
         dispatch(setLoading(false));
@@ -7375,9 +7546,7 @@ var useUserList = function useUserList() {
       dispatch(setLoading(true));
 
       var _temp4 = _catch(function () {
-        return Promise.resolve(fullName ? getRosterUser(_extends({}, filters, {
-          searchString: fullName
-        })) : getRosterUser(filters)).then(function (res) {
+        return Promise.resolve(getRosterUser(filters)).then(function (res) {
           var _res$data = res.data,
               items = _res$data.items,
               totalItems = _res$data.totalItems;
@@ -7472,13 +7641,13 @@ var useUserList = function useUserList() {
     document.title = TITLE$7;
   }, []);
   useEffect(function () {
-    if (!!fullName) {
-      getData(fullName);
-      setFullName(null);
-    } else {
-      getData();
-    }
-  }, [filters]);
+    changeFilters(_extends({}, filters, {
+      searchString: fullName
+    }));
+  }, [fullName]);
+  useEffect(function () {
+    getData();
+  }, [JSON.stringify(filters)]);
   var removeData = useCallback(function (id) {
     dispatch(setLoading(true));
 
@@ -7620,6 +7789,7 @@ var useUserList = function useUserList() {
     totalItems: totalItems,
     filters: filters,
     queryName: queryName,
+    fullName: fullName,
     getData: getData,
     removeData: removeData,
     changeFilters: changeFilters,
@@ -7728,6 +7898,481 @@ var SyncButtonIcon = function SyncButtonIcon(_ref) {
   }, text));
 };
 
+var useClickOutside = function useClickOutside(wrapperRef, onClickOutside) {
+  useEffect(function () {
+    function handleClickOutside(event) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside();
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [wrapperRef.current]);
+};
+
+var useFilterPopover = function useFilterPopover(props) {
+  var sortBy = props.sortBy,
+      filters = props.filters,
+      users = props.users,
+      searchBy = props.searchBy,
+      defaultOptions = props.defaultOptions,
+      selectedOptions = props.selectedOptions,
+      onOptionsChange = props.onOptionsChange,
+      onSearch = props.onSearch,
+      onClose = props.onClose,
+      onChangeFilters = props.onChangeFilters,
+      getOption = props.getOption;
+
+  var _useState = useState(),
+      sOptions = _useState[0],
+      setSOptions = _useState[1];
+
+  var _useState2 = useState([]),
+      filteredOptions = _useState2[0],
+      setFilteredOptions = _useState2[1];
+
+  var ref = useRef(null);
+  useClickOutside(ref, onClose);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var handleSearch = useCallback(function (e) {
+    var _e$target$value$trim, _e$target$value;
+
+    var value = (_e$target$value$trim = (_e$target$value = e.target.value) === null || _e$target$value === void 0 ? void 0 : _e$target$value.trim()) != null ? _e$target$value$trim : "";
+    searchBy != undefined && !defaultOptions && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, searchBy));
+    searchBy != undefined && !!defaultOptions && setFilteredOptions(defaultOptions.filter(function (i) {
+      return i.label.toLowerCase().includes(value === null || value === void 0 ? void 0 : value.toLowerCase());
+    }));
+  }, [searchBy, JSON.stringify(defaultOptions)]);
+  var handleApplyFilter = useCallback(function () {
+    onOptionsChange === null || onOptionsChange === void 0 ? void 0 : onOptionsChange(sOptions, searchBy);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [JSON.stringify(sOptions)]);
+  var handleOptionSelected = useCallback(function (e) {
+    var value = e.target.value;
+    if (!value) setSOptions(undefined);else {
+      var newOptions = sOptions != null ? sOptions : [];
+      var index = newOptions.indexOf(value);
+
+      if (index > -1) {
+        newOptions.splice(index, 1);
+      } else {
+        newOptions = [].concat(newOptions, [value]);
+      }
+
+      setSOptions(newOptions == undefined ? newOptions : [].concat(newOptions));
+    }
+  }, [JSON.stringify(sOptions)]);
+  var handleOptionSelectedAll = useCallback(function (e) {
+    var value = e.target.checked;
+    if (!value) setSOptions([""]);else setSOptions(undefined);
+  }, []);
+  var handleSortDesc = useCallback(function () {
+    onChangeFilters === null || onChangeFilters === void 0 ? void 0 : onChangeFilters(_extends({}, filters, {
+      sortBy: (filters === null || filters === void 0 ? void 0 : filters.isDescending) === true ? undefined : sortBy,
+      isDescending: (filters === null || filters === void 0 ? void 0 : filters.isDescending) === true ? undefined : true
+    }));
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [JSON.stringify(filters), searchBy, searchBy]);
+  var handleSortAsc = useCallback(function () {
+    onChangeFilters === null || onChangeFilters === void 0 ? void 0 : onChangeFilters(_extends({}, filters, {
+      sortBy: (filters === null || filters === void 0 ? void 0 : filters.isDescending) === false ? undefined : sortBy,
+      isDescending: (filters === null || filters === void 0 ? void 0 : filters.isDescending) === false ? undefined : false
+    }));
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [JSON.stringify(filters), searchBy, searchBy]);
+  var options = useMemo(function () {
+    if (!getOption) return [];
+    return users.reduce(function (i, current) {
+      var _extends2;
+
+      var option = getOption(current, t);
+      return _extends({}, i, (_extends2 = {}, _extends2[option.label] = option.value, _extends2));
+    }, {});
+  }, [JSON.stringify(users), JSON.stringify(getOption)]);
+  var isAscending = (filters === null || filters === void 0 ? void 0 : filters.isDescending) == false && filters.sortBy === sortBy;
+  var isDescending = !!(filters !== null && filters !== void 0 && filters.isDescending) && filters.sortBy === sortBy;
+  useEffect(function () {
+    if ((filters === null || filters === void 0 ? void 0 : filters.searchBy) !== searchBy) setSOptions(undefined);else setSOptions(selectedOptions);
+  }, [JSON.stringify(selectedOptions), filters === null || filters === void 0 ? void 0 : filters.searchBy]);
+  useEffect(function () {
+    setFilteredOptions(defaultOptions || []);
+  }, [JSON.stringify(defaultOptions)]);
+  return {
+    ref: ref,
+    options: options,
+    sOptions: sOptions,
+    isAscending: isAscending,
+    isDescending: isDescending,
+    filteredOptions: filteredOptions,
+    handleSearch: handleSearch,
+    handleApplyFilter: handleApplyFilter,
+    handleOptionSelected: handleOptionSelected,
+    handleOptionSelectedAll: handleOptionSelectedAll,
+    handleSortDesc: handleSortDesc,
+    handleSortAsc: handleSortAsc
+  };
+};
+
+var FilterPopover = function FilterPopover(props) {
+  var searchString = props.searchString,
+      defaultOptions = props.defaultOptions,
+      onClose = props.onClose,
+      getOption = props.getOption;
+
+  var _useFilterPopover = useFilterPopover(props),
+      ref = _useFilterPopover.ref,
+      options = _useFilterPopover.options,
+      sOptions = _useFilterPopover.sOptions,
+      isAscending = _useFilterPopover.isAscending,
+      isDescending = _useFilterPopover.isDescending,
+      filteredOptions = _useFilterPopover.filteredOptions,
+      handleSearch = _useFilterPopover.handleSearch,
+      handleApplyFilter = _useFilterPopover.handleApplyFilter,
+      handleOptionSelected = _useFilterPopover.handleOptionSelected,
+      handleOptionSelectedAll = _useFilterPopover.handleOptionSelectedAll,
+      handleSortDesc = _useFilterPopover.handleSortDesc,
+      handleSortAsc = _useFilterPopover.handleSortAsc;
+
+  return React.createElement(Popover, Object.assign({}, props, {
+    hideArrow: true
+  }), React.createElement(PopoverBody, {
+    className: "pb-3"
+  }, React.createElement("div", {
+    ref: ref,
+    className: styles["popover"]
+  }, React.createElement("div", {
+    className: "d-flex flex-column " + styles["popover__sort"]
+  }, React.createElement(Label, {
+    className: "font-weight-bold"
+  }, "Sort"), React.createElement("div", {
+    className: "px-1 " + styles["popover__sort__item"] + " " + (isAscending && styles["popover__sort__item--active"]),
+    onClick: handleSortAsc
+  }, React.createElement(AiOutlineSortAscending, {
+    className: "mr-1"
+  }), "Ascending"), React.createElement("div", {
+    className: "px-1 mt-1 " + styles["popover__sort__item"] + " " + (isDescending && styles["popover__sort__item--active"]),
+    onClick: handleSortDesc
+  }, React.createElement(AiOutlineSortDescending, {
+    className: "mr-1"
+  }), "Descending")), typeof getOption != 'undefined' && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "border border-top-1 border-bottom-0 mx-1 my-2"
+  }), React.createElement("div", {
+    className: "d-flex flex-column"
+  }, React.createElement(Label, {
+    className: "font-weight-bold"
+  }, "Filter"), React.createElement("div", {
+    className: "position-relative px-1 " + styles["popover__search"]
+  }, React.createElement(BiSearchAlt2, {
+    className: "position-absolute " + styles["popover__search__icon"]
+  }), React.createElement(Input, {
+    className: styles["popover__search__input"],
+    value: searchString,
+    onChange: handleSearch
+  })), React.createElement("div", {
+    className: "mx-1 mt-2 p-2 bg-light " + styles["popover__options"]
+  }, React.createElement(FormGroup, {
+    className: "d-flex align-items-center",
+    check: true
+  }, React.createElement(Input, {
+    type: "checkbox",
+    onChange: handleOptionSelectedAll,
+    checked: sOptions == undefined
+  }), " ", React.createElement(Label, {
+    check: true
+  }, "(Select all)")), !!getOption && !defaultOptions && Object.keys(options).map(function (i) {
+    return React.createElement(FormGroup, {
+      key: i.id,
+      className: "d-flex align-items-center",
+      check: true
+    }, React.createElement(Input, {
+      type: "checkbox",
+      value: options["" + i],
+      onChange: handleOptionSelected,
+      checked: (sOptions === null || sOptions === void 0 ? void 0 : sOptions.includes(options["" + i])) || sOptions == undefined
+    }), " ", React.createElement(Label, {
+      check: true
+    }, i));
+  }), !!defaultOptions && filteredOptions.map(function (i) {
+    return React.createElement(FormGroup, {
+      key: i.value,
+      className: "d-flex align-items-center",
+      check: true
+    }, React.createElement(Input, {
+      type: "checkbox",
+      value: i.value,
+      onChange: handleOptionSelected,
+      checked: (sOptions === null || sOptions === void 0 ? void 0 : sOptions.includes(i.value)) || sOptions == undefined
+    }), " ", React.createElement(Label, {
+      check: true
+    }, i.label));
+  }))), React.createElement("div", {
+    className: "d-flex justify-content-end mt-3"
+  }, React.createElement(Button, {
+    color: "primary",
+    className: "mr-2",
+    size: "sm",
+    onClick: handleApplyFilter
+  }, "Apply Filter"), React.createElement(Button, {
+    color: "secondary",
+    size: "sm",
+    onClick: onClose
+  }, "Cancel"))))));
+};
+
+var HeaderCell = function HeaderCell(_ref) {
+  var _filters$searchByStri;
+
+  var data = _ref.data,
+      popoverId = _ref.popoverId,
+      filters = _ref.filters,
+      onChangeFilters = _ref.onChangeFilters,
+      onOpenFilter = _ref.onOpenFilter,
+      onClose = _ref.onClose,
+      rest = _objectWithoutPropertiesLoose(_ref, ["data", "popoverId", "filters", "onChangeFilters", "onOpenFilter", "onClose"]);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var id = useMemo(function () {
+    return data.sortBy != undefined ? userOrders[data.sortBy] : "";
+  }, [data.sortBy]);
+  var isOpen = useMemo(function () {
+    return popoverId === id;
+  }, [id, popoverId]);
+
+  var handleOpenFilter = function handleOpenFilter() {
+    onOpenFilter === null || onOpenFilter === void 0 ? void 0 : onOpenFilter(id);
+  };
+
+  return React.createElement("th", {
+    className: data.className
+  }, !!id && data.sortBy !== undefined ? React.createElement("div", {
+    className: "w-100 d-flex justify-content-between align-items-center " + styles["table-filter-icon"]
+  }, t(data.name), React.createElement("div", {
+    className: "ml-2 p-1",
+    id: id,
+    onClick: handleOpenFilter,
+    style: {
+      cursor: "pointer"
+    }
+  }, data.sortBy !== undefined && data.sortBy === (filters === null || filters === void 0 ? void 0 : filters.sortBy) && React.createElement("span", null, filters.isDescending ? React.createElement(AiOutlineSortDescending, null) : React.createElement(AiOutlineSortAscending, null)), !!(filters !== null && filters !== void 0 && (_filters$searchByStri = filters.searchByStrings) !== null && _filters$searchByStri !== void 0 && _filters$searchByStri.length) && data.searchBy === (filters === null || filters === void 0 ? void 0 : filters.searchBy) ? React.createElement(HiFilter, null) : React.createElement(BiFilterAlt, null)), React.createElement(FilterPopover, Object.assign({
+    target: id,
+    placement: "bottom-end",
+    isOpen: isOpen,
+    filters: filters,
+    onClose: onClose,
+    onChangeFilters: onChangeFilters,
+    sortBy: data.sortBy,
+    searchBy: data.searchBy,
+    getOption: data.getOption,
+    defaultOptions: data.options
+  }, rest))) : t(data.name));
+};
+
+var useTableHeader = function useTableHeader(props) {
+  var filters = props.filters,
+      onChangeFilters = props.onChangeFilters;
+
+  var _useState = useState(),
+      popoverId = _useState[0],
+      setPopoverId = _useState[1];
+
+  var _useState2 = useState([]),
+      users = _useState2[0],
+      setUsers = _useState2[1];
+
+  var _useState3 = useState(_extends({}, DEFAULT_FILTER_POPOVER, {
+    sortBy: filters.sortBy,
+    isDescending: filters.isDescending,
+    searchString: filters.searchString
+  })),
+      popoverFilters = _useState3[0],
+      setPopoverFilters = _useState3[1];
+
+  var dispatch = useDispatch();
+  var getData = useCallback(function () {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(getRosterUser(popoverFilters)).then(function (res) {
+          var items = res.data.items;
+
+          for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
+            var user = _step.value;
+            user.roles = user.roles.includes("EduTeacher") ? [ROLES.EDUTEACHER] : user.roles;
+          }
+
+          setUsers(items);
+        });
+      }, 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);
+    }
+  }, [JSON.stringify(popoverFilters)]);
+
+  var handleFilterIcon = function handleFilterIcon(id) {
+    setPopoverId(id);
+  };
+
+  var handleCloseFilter = function handleCloseFilter() {
+    setPopoverId("");
+  };
+
+  useEffect(function () {
+    setPopoverFilters(_extends({}, popoverFilters, {
+      sortBy: filters.sortBy,
+      isDescending: filters.isDescending
+    }));
+  }, [filters.sortBy, filters.isDescending]);
+  var handleSearch = useCallback(function (search, searchBy) {
+    setPopoverFilters(_extends({}, popoverFilters, {
+      searchStringBy: search,
+      searchBy: searchBy
+    }));
+  }, [JSON.stringify(popoverFilters)]);
+  var handleChangeFilters = useCallback(function (value, searchBy) {
+    onChangeFilters === null || onChangeFilters === void 0 ? void 0 : onChangeFilters(_extends({}, filters, {
+      searchByStrings: value,
+      searchBy: searchBy
+    }));
+  }, [JSON.stringify(filters)]);
+  useEffect(function () {
+    getData();
+  }, [JSON.stringify(popoverFilters)]);
+  useEffect(function () {
+    setPopoverFilters(_extends({}, DEFAULT_FILTER_POPOVER, {
+      sortBy: filters.sortBy,
+      isDescending: filters.isDescending,
+      searchString: filters.searchString
+    }));
+  }, [JSON.stringify(filters)]);
+  return {
+    popoverFilters: popoverFilters,
+    popoverId: popoverId,
+    users: users,
+    handleFilterIcon: handleFilterIcon,
+    handleCloseFilter: handleCloseFilter,
+    handleSearch: handleSearch,
+    handleChangeFilters: handleChangeFilters
+  };
+};
+
+var TableHeader = function TableHeader(_ref) {
+  var headers = _ref.headers,
+      filters = _ref.filters,
+      onChangeFilters = _ref.onChangeFilters;
+
+  var _useTableHeader = useTableHeader({
+    filters: filters,
+    onChangeFilters: onChangeFilters
+  }),
+      popoverFilters = _useTableHeader.popoverFilters,
+      popoverId = _useTableHeader.popoverId,
+      users = _useTableHeader.users,
+      handleFilterIcon = _useTableHeader.handleFilterIcon,
+      handleCloseFilter = _useTableHeader.handleCloseFilter,
+      handleSearch = _useTableHeader.handleSearch,
+      handleChangeFilters = _useTableHeader.handleChangeFilters;
+
+  return React.createElement("tr", null, headers.map(function (header) {
+    return React.createElement(HeaderCell, {
+      key: header.name,
+      data: header,
+      popoverId: popoverId,
+      filters: filters,
+      users: users,
+      searchString: popoverFilters.searchStringBy,
+      selectedOptions: filters.searchByStrings,
+      onSearch: handleSearch,
+      onChangeFilters: onChangeFilters,
+      onClose: handleCloseFilter,
+      onOpenFilter: handleFilterIcon,
+      onOptionsChange: handleChangeFilters
+    });
+  }));
+};
+
+var useExportUsersCsv = function useExportUsersCsv() {
+  var dispatch = useDispatch();
+  var schoolName = useSelector(function (state) {
+    var _state$common, _state$common$user;
+
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.schoolName;
+  }) || "";
+
+  var exportUsers = function exportUsers(filters) {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      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(", ")) + "," + (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() {
@@ -7736,6 +8381,7 @@ var UserList = function UserList() {
       userList = _useUserList.userList,
       totalItems = _useUserList.totalItems,
       filters = _useUserList.filters,
+      fullName = _useUserList.fullName,
       removeData = _useUserList.removeData,
       changeFilters = _useUserList.changeFilters,
       reDirectDetailPage = _useUserList.reDirectDetailPage,
@@ -7743,11 +8389,18 @@ var UserList = function UserList() {
       handleSyncRosterStudents = _useUserList.handleSyncRosterStudents,
       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"
+    className: "fadeIn animated h-100"
   }, React.createElement("h5", {
     className: "mb-2"
   }, t("" + header$2)), React.createElement(Row, {
@@ -7775,33 +8428,34 @@ var UserList = function UserList() {
   }, React.createElement(SyncButtonIcon, {
     text: "Sync Roster students",
     onClick: handleSyncRosterStudents
-  }))), React.createElement(Row, {
+  }), 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
-  }, userList && userList.length > 0 ? React.createElement("div", null, React.createElement(Table, {
+  }, React.createElement("div", null, React.createElement(Table, {
     bordered: true,
     hover: true,
     striped: true,
     responsive: true,
     size: "sm"
-  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
-    className: "align-top"
-  }, t("name")), React.createElement("th", {
-    className: "align-top"
-  }, t("email")), React.createElement("th", {
-    className: "align-top"
-  }, t("age")), React.createElement("th", {
-    className: "align-top"
-  }, t("role")), React.createElement("th", {
-    className: "align-top"
-  }, t("active_status")), React.createElement("th", {
-    className: "align-top"
-  }, t("created_time")), React.createElement("th", {
-    className: "align-top"
-  }, "Information Roster (Sourced Id / Full name / Email)"), React.createElement("th", {
-    className: "text-center"
-  }, t("action")))), React.createElement("tbody", null, userList.map(function (record) {
+  }, 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", {
@@ -7815,7 +8469,7 @@ var UserList = function UserList() {
       className: "align-middle"
     }, record.email), React.createElement("td", {
       className: "align-middle"
-    }, differenceInCalendarYears(new Date(), new Date(record.dateOfBirth))), React.createElement("td", {
+    }, 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;
@@ -7839,9 +8493,13 @@ var UserList = function UserList() {
         return removeData(record.id);
       }
     })));
-  })))) : React.createElement(EmptyDataAlert, {
+  }), (!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(Col, {
     md: 12
   }, React.createElement(CustomPagination, {
     filters: filters,