mario-core 2.9.157-survey → 2.9.159-survey

package/dist/components/Buttons/SyncButton.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from "react";
+interface Props {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    className?: string;
+    text: string;
+}
+declare const SyncButtonIcon: FC<Props>;
+export default SyncButtonIcon;

package/dist/containers/User/constants/types.d.ts

@@ -0,0 +1,13 @@
+export declare type RosterStudent = {
+    sourcedId: string;
+    givenName: string;
+    middleName: string;
+    familyName: string;
+    email: string;
+    grades: string;
+    role: string;
+};
+export declare type Option = {
+    label: string;
+    value: string;
+};

package/dist/containers/User/hooks/useStudentSelector.d.ts

@@ -0,0 +1,8 @@
+import { Option } from "../constants/types";
+declare const useStudentSelector: (value?: string | undefined) => {
+    students: Option[];
+    isLoading: boolean;
+    student: Option | undefined;
+    handleInputChange: (value: string) => void;
+};
+export default useStudentSelector;

package/dist/containers/User/hooks/useUserDetail.d.ts

@@ -8,6 +8,7 @@ declare type UserDetail = {
     roles: string[];
     isActive: boolean;
     profileImageFileName: string;
+    sourcedId?: string;
 };
 declare const useUserDetail: (id?: string | undefined) => {
     userDetail: UserDetail;

package/dist/containers/User/hooks/useUserList.d.ts

@@ -8,5 +8,7 @@ declare const useUserList: () => {
     changeFilters: (updatedFilters: any) => void;
     reDirectDetailPage: (id?: number | undefined) => void;
     swicthUser: (id: string) => Promise<void>;
+    handleSyncRosterStudents: () => Promise<void>;
+    rosterUserInfo: (record: any) => string;
 };
 export default useUserList;

package/dist/containers/User/views/RosterStudentSelector.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface Props {
+    onChange: (e: any) => void;
+    value?: string;
+}
+declare const RosterStudentSelector: FC<Props>;
+export default RosterStudentSelector;

package/dist/index.js

@@ -716,6 +716,7 @@ var number_of_responses = "Number of Responses";
 var number_of_not_responses = "Number of Not Responses";
 var question_rating = "Question Rating";
 var no_response_yet = "No response yet";
+var external_survey_is_highlight_in_the_table = "External Survey is highlighted in the table";
 var lang_us = {
 	dashboard: dashboard,
 	user: user,
@@ -1410,7 +1411,8 @@ var lang_us = {
 	number_of_responses: number_of_responses,
 	number_of_not_responses: number_of_not_responses,
 	question_rating: question_rating,
-	no_response_yet: no_response_yet
+	no_response_yet: no_response_yet,
+	external_survey_is_highlight_in_the_table: external_survey_is_highlight_in_the_table
 };
 
 var dashboard$1 = "Dashboard";
@@ -2095,6 +2097,7 @@ var number_of_responses$1 = "Number of Responses";
 var number_of_not_responses$1 = "Number of Not Responses";
 var question_rating$1 = "Question Rating";
 var no_response_yet$1 = "No response yet";
+var external_survey_is_highlight_in_the_table$1 = "External Survey is highlighted in the table";
 var lang_uk = {
 	dashboard: dashboard$1,
 	user: user$1,
@@ -2789,7 +2792,8 @@ var lang_uk = {
 	number_of_responses: number_of_responses$1,
 	number_of_not_responses: number_of_not_responses$1,
 	question_rating: question_rating$1,
-	no_response_yet: no_response_yet$1
+	no_response_yet: no_response_yet$1,
+	external_survey_is_highlight_in_the_table: external_survey_is_highlight_in_the_table$1
 };
 
 var DEFAULT_LANGUAGE = localStorage.getItem("language") !== null ? localStorage.getItem("language") : "uk";
@@ -7050,23 +7054,25 @@ var UploadFileButton = function UploadFileButton(_ref) {
   }, React__default.createElement(fa.FaTrashAlt, null)))), imagePreviewContainer);
 };
 
-var USER_URL$1 = BASE_URL + "/api/user";
+var STUDENT_URL = BASE_URL + "/api/student";
 var CHANGE_PASSWORD = BASE_URL + "/api/Account/changePassword";
 var ACCOUNT_URL$1 = BASE_URL + "/api/account";
 var EDU_USER_URL = BASE_URL + "/api/User";
-var get$5 = function get(filter) {
-  return api.get("" + USER_URL$1, {
+var ONE_ROSTER_USER_URL = BASE_URL + "/api/usersOneRoster";
+var ROSTER_USER_URL = BASE_URL + "/api/user/roster";
+var getRosterUser = function getRosterUser(filter) {
+  return api.get("" + ROSTER_USER_URL, {
     params: filter
   });
 };
-var getById$3 = function getById(id) {
-  return api.get(USER_URL$1 + "/" + id);
+var getRosterUserById = function getRosterUserById(id) {
+  return api.get(ROSTER_USER_URL + "/" + id);
 };
-var create$5 = function create(data) {
-  return api.post("" + USER_URL$1, data);
+var createRosterUser = function createRosterUser(data) {
+  return api.post("" + ROSTER_USER_URL, data);
 };
-var update$5 = function update(data) {
-  return api.put(USER_URL$1 + "/" + data.id, data);
+var updateRosterUser = function updateRosterUser(data) {
+  return api.put(ROSTER_USER_URL + "/" + data.id, data);
 };
 var remove$3 = function remove(id) {
   return api["delete"](EDU_USER_URL + "/delete-item-user/" + id);
@@ -7080,6 +7086,17 @@ var forgotChangePassword = function forgotChangePassword(data) {
 var switchAccountUser = function switchAccountUser(id) {
   return api.post(EDU_USER_URL + "/switch-user/" + id);
 };
+var getRosterStudentsApi = function getRosterStudentsApi(filter) {
+  return api.get("" + ONE_ROSTER_USER_URL, {
+    params: filter
+  });
+};
+var getRosterStudentBySourcedIdApi = function getRosterStudentBySourcedIdApi(sourcedId) {
+  return api.get(ONE_ROSTER_USER_URL + "/" + sourcedId);
+};
+var syncRosterStudentsApi = function syncRosterStudentsApi() {
+  return api.put(STUDENT_URL + "/sync-students");
+};
 
 var initValue$3 = {
   id: "",
@@ -7132,7 +7149,7 @@ var useUserDetail = function useUserDetail(id) {
       };
       dispatch(setLoading(true));
       var _temp = _catch(function () {
-        return Promise.resolve(getById$3(id)).then(function (res) {
+        return Promise.resolve(getRosterUserById(id)).then(function (res) {
           var _res$data$roles, _res$data, _res$data2;
           setUserDetail(_extends({}, res.data, {
             dateOfBirth: dateFns.format(new Date(res.data.dateOfBirth), DATE_FORMAT),
@@ -7164,11 +7181,11 @@ var useUserDetail = function useUserDetail(id) {
       dispatch(setLoading(true));
       var _temp5 = _catch(function () {
         function _temp4() {
-          var next = !!id ? update$5 : create$5;
+          var next = !!id ? updateRosterUser : createRosterUser;
           !id && delete data.id;
           return Promise.resolve(next(data)).then(function (result) {
             if (!!result) {
-              getById$3(result.data.id).then(function (e) {
+              getRosterUserById(result.data.id).then(function (e) {
                 backToList(e.data.fullName);
               });
             }
@@ -7289,6 +7306,142 @@ var changePasswordSchema = yup.object({
   confirmedNewPassword: yup.string().required("Confirm password is required")
 });
 
+var defaultFilter = {
+  currentPage: 1,
+  pageSize: 100,
+  role: "student"
+};
+var useStudentSelector = function useStudentSelector(value) {
+  var _useState = React.useState([]),
+    students = _useState[0],
+    setStudents = _useState[1];
+  var _useState2 = React.useState(false),
+    isLoading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = React.useState(defaultFilter),
+    filter = _useState3[0],
+    setFilter = _useState3[1];
+  var _useState4 = React.useState(),
+    student = _useState4[0],
+    setStudent = _useState4[1];
+  var dispatch = reactRedux.useDispatch();
+  var getRosterStudents = React.useCallback(function () {
+    try {
+      var _temp2 = function _temp2() {
+        setLoading(false);
+      };
+      setLoading(true);
+      var _temp = _catch(function () {
+        return Promise.resolve(getRosterStudentsApi(filter)).then(function (res) {
+          var _res$data;
+          var students = ((_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.items) || [];
+          setStudents(mapStudentsToOptions(students));
+        });
+      }, function (err) {
+        console.log("err:", err);
+        dispatch(setAlert({
+          type: "error",
+          message: "Cannot get roster students"
+        }));
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [JSON.stringify(filter)]);
+  var getStudentBySourcedId = React.useCallback(function () {
+    try {
+      var _temp4 = function _temp4() {
+        setLoading(false);
+      };
+      if (!value) return Promise.resolve();
+      var v = students.find(function (i) {
+        return i.value === value;
+      });
+      if (v) {
+        setStudent(v);
+        return Promise.resolve();
+      }
+      setLoading(true);
+      var _temp3 = _catch(function () {
+        return Promise.resolve(getRosterStudentBySourcedIdApi(value)).then(function (res) {
+          var student = res.data;
+          setStudent({
+            label: student.sourcedId + " - " + student.givenName + " - " + student.email,
+            value: student.sourcedId
+          });
+        });
+      }, function (err) {
+        console.log("err:", err);
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [value]);
+  var mapStudentsToOptions = function mapStudentsToOptions(students) {
+    return students.map(function (i) {
+      return {
+        label: rosterUserInfo(i),
+        value: i.sourcedId
+      };
+    });
+  };
+  var rosterUserInfo = function rosterUserInfo(rosterUser) {
+    var result = [];
+    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 result.join(" - ");
+  };
+  var handleInputChange = function handleInputChange(value) {
+    setFilter(function (state) {
+      return _extends({}, state, {
+        searchString: value
+      });
+    });
+  };
+  React.useEffect(function () {
+    getRosterStudents();
+  }, [JSON.stringify(filter)]);
+  React.useEffect(function () {
+    getStudentBySourcedId();
+  }, [value]);
+  return {
+    students: students,
+    isLoading: isLoading,
+    student: student,
+    handleInputChange: handleInputChange
+  };
+};
+
+var RosterStudentSelector = function RosterStudentSelector(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useStudentSelector = useStudentSelector(value),
+    students = _useStudentSelector.students,
+    isLoading = _useStudentSelector.isLoading,
+    student = _useStudentSelector.student,
+    handleInputChange = _useStudentSelector.handleInputChange;
+  return React__default.createElement(CustomSelector, {
+    options: students,
+    value: student,
+    placeholder: t("Select student"),
+    onChange: onChange,
+    isLoading: isLoading,
+    onInputChange: handleInputChange
+  });
+};
+
 var CREATE_USER = "create_user";
 var EDIT_USER_HEADER = "edit_user";
 var CHANGE_PASSWORD$1 = "change_password";
@@ -7505,7 +7658,12 @@ var UserDetail = function UserDetail() {
       }
     })))))), !!id && React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
       md: 6
-    }), React__default.createElement(reactstrap.Col, {
+    }, values.roles.includes("Student") && React__default.createElement(reactstrap.FormGroup, null, React__default.createElement(reactstrap.Label, null, "Map student from Roster"), React__default.createElement(RosterStudentSelector, {
+      value: values.sourcedId,
+      onChange: function onChange(e) {
+        return setFieldValue("sourcedId", e.value);
+      }
+    }))), React__default.createElement(reactstrap.Col, {
       md: 6
     }, React__default.createElement(reactstrap.Button, {
       color: "primary",
@@ -7856,7 +8014,7 @@ var QuestionTypeSelector = function QuestionTypeSelector(props) {
 };
 
 var CATEGORY_URL = BASE_URL + "/api/SuggestionCategory";
-var get$6 = function get() {
+var get$5 = function get() {
   return api.get(CATEGORY_URL);
 };
 
@@ -7870,7 +8028,7 @@ var SuggestionCategorySelector = function SuggestionCategorySelector(props) {
   var fetchCategory = function fetchCategory() {
     try {
       var _temp = _catch(function () {
-        return Promise.resolve(get$6()).then(function (res) {
+        return Promise.resolve(get$5()).then(function (res) {
           setCategoryList(res.data.items);
         });
       }, function (err) {
@@ -7899,7 +8057,7 @@ var SuggestionCategorySelector = function SuggestionCategorySelector(props) {
 };
 
 var CATEGORY_URL$1 = BASE_URL + "/api/QuestionCategory";
-var get$7 = function get(parentCategoryId) {
+var get$6 = function get(parentCategoryId) {
   return api.get(CATEGORY_URL$1, {
     params: {
       parentCategoryId: parentCategoryId
@@ -7924,7 +8082,7 @@ var QuestionCategorySelector = function QuestionCategorySelector(props) {
   var fetchCategory = function fetchCategory() {
     try {
       var _temp = _catch(function () {
-        return Promise.resolve(get$7(parentCategoryId)).then(function (res) {
+        return Promise.resolve(get$6(parentCategoryId)).then(function (res) {
           setCategoryList(res.data.items);
         });
       }, function (err) {
@@ -8883,14 +9041,14 @@ var setGallery = toolkit.createAction("gallery/setGallery");
 var setTargetMedia = toolkit.createAction("gallery/setTargetMedia");
 
 var GALLERY_URL = BASE_URL + "/api/file";
-var get$8 = function get(filter) {
+var get$7 = function get(filter) {
   return api.get("" + GALLERY_URL, {
     params: filter
   });
 };
 
 var TITLE$9 = "Gallery";
-var defaultFilter = {
+var defaultFilter$1 = {
   searchString: ""
 };
 var useGalleryList = function useGalleryList(isLibrary) {
@@ -8910,7 +9068,7 @@ var useGalleryList = function useGalleryList(isLibrary) {
   var _useState = React.useState(),
     formDataMediaType = _useState[0],
     handleSelectFile = _useState[1];
-  var _useState2 = React.useState(Object.assign(_extends({}, defaultFilter), isLibrary ? {
+  var _useState2 = React.useState(Object.assign(_extends({}, defaultFilter$1), isLibrary ? {
       isLibrary: true
     } : {})),
     filters = _useState2[0],
@@ -9079,7 +9237,7 @@ var useGalleryList = function useGalleryList(isLibrary) {
       };
       dispatch(setLoading(true));
       var _temp5 = _catch(function () {
-        return Promise.resolve(get$8(filters)).then(function (res) {
+        return Promise.resolve(get$7(filters)).then(function (res) {
           dispatch(setGallery({
             mediaList: res.data,
             totalItems: res.data.length || 0
@@ -9304,7 +9462,7 @@ var GalleryList = function GalleryList(_ref) {
 };
 
 var CLASS_URL = BASE_URL + "/api/academicclass";
-var get$9 = function get() {
+var get$8 = function get() {
   return api.get(CLASS_URL);
 };
 
@@ -9318,7 +9476,7 @@ var AcademicClassSelector = function AcademicClassSelector(props) {
   var getData = function getData() {
     try {
       var _temp = _catch(function () {
-        return Promise.resolve(get$9()).then(function (res) {
+        return Promise.resolve(get$8()).then(function (res) {
           setClasses(res.data.items);
         });
       }, function (err) {
@@ -10561,7 +10719,7 @@ var generateRandomString = (function () {
 
 var amplitudeClient = amplitude.getInstance();
 
-var USER_URL$2 = "/admin/user";
+var USER_URL$1 = "/admin/user";
 var CREATE_USER_URL = "/admin/create-user";
 var TITLE$a = "User list";
 var HOMEPAGE_TEACHER$1 = "/home";
@@ -10595,9 +10753,9 @@ var useUserList = function useUserList() {
       };
       dispatch(setLoading(true));
       var _temp = _catch(function () {
-        return Promise.resolve(fullName ? get$5(_extends({}, filters, {
+        return Promise.resolve(fullName ? getRosterUser(_extends({}, filters, {
           searchString: fullName
-        })) : get$5(filters)).then(function (res) {
+        })) : getRosterUser(filters)).then(function (res) {
           var _res$data = res.data,
             items = _res$data.items,
             totalItems = _res$data.totalItems;
@@ -10622,6 +10780,59 @@ var useUserList = function useUserList() {
       return Promise.reject(e);
     }
   }, [dispatch, filters]);
+  var handleSyncRosterStudents = function handleSyncRosterStudents() {
+    try {
+      var _temp4 = function _temp4() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp3 = _catch(function () {
+        return Promise.resolve(syncRosterStudentsApi()).then(function (res) {
+          if (res.data) {
+            dispatch(setAlert({
+              type: "success",
+              message: res.data + " student" + (res.data > 1 ? "s have" : " has") + " been synchronized"
+            }));
+            getData();
+          } else {
+            dispatch(setAlert({
+              type: "success",
+              message: "Every student synchronized"
+            }));
+          }
+        });
+      }, function (err) {
+        var _err$response2, _err$response2$data;
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+        }));
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var rosterUserInfo = function rosterUserInfo(record) {
+    if (!record) return '';
+    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 result.join(" / ");
+  };
   React.useEffect(function () {
     document.title = TITLE$a;
   }, []);
@@ -10657,10 +10868,10 @@ var useUserList = function useUserList() {
         }
       }));
     } catch (err) {
-      var _err$response2, _err$response2$data;
+      var _err$response3, _err$response3$data;
       dispatch(setAlert({
         type: "danger",
-        message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+        message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message
       }));
     }
     dispatch(setLoading(false));
@@ -10702,7 +10913,7 @@ var useUserList = function useUserList() {
   };
   var swicthUser = React.useCallback(function (id) {
     try {
-      var _temp3 = _catch(function () {
+      var _temp5 = _catch(function () {
         return Promise.resolve(switchAccountUser(id)).then(function (res) {
           var data = res.data;
           dispatch(setModal({
@@ -10711,11 +10922,11 @@ var useUserList = function useUserList() {
             message: "Do you want to impersonate this user?",
             onConfirm: function () {
               try {
-                var _temp5 = function _temp5() {
+                var _temp7 = function _temp7() {
                   dispatch(setLoading(false));
                 };
                 dispatch(setLoading(true));
-                var _temp4 = _catch(function () {
+                var _temp6 = _catch(function () {
                   var req = {
                     email: data.email,
                     password: "default",
@@ -10726,13 +10937,13 @@ var useUserList = function useUserList() {
                     redirectLoginUser(res);
                   });
                 }, function (err) {
-                  var _err$response3, _err$response3$data;
+                  var _err$response4, _err$response4$data;
                   setAlert({
                     type: "danger",
-                    message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message
+                    message: ((_err$response4 = err.response) === null || _err$response4 === void 0 ? void 0 : (_err$response4$data = _err$response4.data) === null || _err$response4$data === void 0 ? void 0 : _err$response4$data.title) || err.message
                   });
                 });
-                return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+                return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6));
               } catch (e) {
                 return Promise.reject(e);
               }
@@ -10740,19 +10951,19 @@ var useUserList = function useUserList() {
           }));
         });
       }, function (err) {
-        var _err$response4, _err$response4$data;
+        var _err$response5, _err$response5$data;
         dispatch(setAlert({
           type: "danger",
-          message: ((_err$response4 = err.response) === null || _err$response4 === void 0 ? void 0 : (_err$response4$data = _err$response4.data) === null || _err$response4$data === void 0 ? void 0 : _err$response4$data.title) || err.message
+          message: ((_err$response5 = err.response) === null || _err$response5 === void 0 ? void 0 : (_err$response5$data = _err$response5.data) === null || _err$response5$data === void 0 ? void 0 : _err$response5$data.title) || err.message
         }));
       });
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   }, [filters]);
   var reDirectDetailPage = function reDirectDetailPage(id) {
-    var url = !!id ? USER_URL$2 + "/" + id : CREATE_USER_URL;
+    var url = !!id ? USER_URL$1 + "/" + id : CREATE_USER_URL;
     history.push(url);
   };
   return {
@@ -10764,10 +10975,34 @@ var useUserList = function useUserList() {
     removeData: removeData,
     changeFilters: changeFilters,
     reDirectDetailPage: reDirectDetailPage,
-    swicthUser: swicthUser
+    swicthUser: swicthUser,
+    handleSyncRosterStudents: handleSyncRosterStudents,
+    rosterUserInfo: rosterUserInfo
   };
 };
 
+var buttonTextStyle$1 = {
+  fontWeight: 500
+};
+var buttonStyle$1 = {
+  height: 38
+};
+var SyncButtonIcon = function SyncButtonIcon(_ref) {
+  var text = _ref.text,
+    onClick = _ref.onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return React__default.createElement(reactstrap.Button, {
+    onClick: onClick,
+    color: 'primary',
+    style: buttonStyle$1,
+    className: "d-flex align-items-center " + className
+  }, React__default.createElement(fa.FaSyncAlt, null), React__default.createElement("span", {
+    className: 'ml-2',
+    style: buttonTextStyle$1
+  }, text));
+};
+
 var header$4 = "User";
 var UserList = function UserList() {
   var _useUserList = useUserList(),
@@ -10778,7 +11013,9 @@ var UserList = function UserList() {
     removeData = _useUserList.removeData,
     changeFilters = _useUserList.changeFilters,
     reDirectDetailPage = _useUserList.reDirectDetailPage,
-    swicthUser = _useUserList.swicthUser;
+    swicthUser = _useUserList.swicthUser,
+    handleSyncRosterStudents = _useUserList.handleSyncRosterStudents,
+    rosterUserInfo = _useUserList.rosterUserInfo;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   return React__default.createElement("div", {
@@ -10804,7 +11041,13 @@ var UserList = function UserList() {
   })), React__default.createElement(reactstrap.Col, {
     md: 4,
     className: "d-flex justify-content-end align-items-center"
-  }, t("total_of_users"), " : ", totalItems)), React__default.createElement(reactstrap.Row, {
+  }, t("total_of_users"), " : ", totalItems), React__default.createElement(reactstrap.Col, {
+    md: 12,
+    className: "d-flex justify-content-end my-2"
+  }, React__default.createElement(SyncButtonIcon, {
+    text: "Sync Roster students",
+    onClick: handleSyncRosterStudents
+  }))), React__default.createElement(reactstrap.Row, {
     className: "mb-2"
   }, React__default.createElement(reactstrap.Col, {
     md: 12
@@ -10827,6 +11070,8 @@ var UserList = function UserList() {
   }, t("active_status")), React__default.createElement("th", {
     className: "align-top"
   }, t("created_time")), React__default.createElement("th", {
+    className: "align-top"
+  }, "Information Roster (Sourced Id / Full name / Email)"), React__default.createElement("th", {
     className: "text-center"
   }, t("action")))), React__default.createElement("tbody", null, userList.map(function (record) {
     return React__default.createElement("tr", {
@@ -10850,7 +11095,7 @@ var UserList = function UserList() {
       className: "align-middle"
     }, record.isActive ? t("active") : t("inactive")), React__default.createElement("td", {
       className: "align-middle"
-    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React__default.createElement("td", {
+    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React__default.createElement("td", null, rosterUserInfo(record)), React__default.createElement("td", {
       className: "text-center align-middle"
     }, React__default.createElement(fa.FaUsersCog, {
       style: {