touchstudy-core 0.1.168 → 0.1.169

package/dist/index.js

@@ -57,19 +57,20 @@ var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
 var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var fa6 = require('react-icons/fa6');
 var cg = require('react-icons/cg');
+var hi = require('react-icons/hi');
+var TableCell = _interopDefault(require('@mui/material/TableCell'));
+var TableRow = _interopDefault(require('@mui/material/TableRow'));
 var html2pdf = _interopDefault(require('html2pdf.js'));
 var Slider = _interopDefault(require('react-slick'));
 var gr = require('react-icons/gr');
-var hi = require('react-icons/hi');
 var Table = _interopDefault(require('@mui/material/Table'));
 var TableBody = _interopDefault(require('@mui/material/TableBody'));
-var TableCell = _interopDefault(require('@mui/material/TableCell'));
 var TableHead = _interopDefault(require('@mui/material/TableHead'));
-var TableRow = _interopDefault(require('@mui/material/TableRow'));
 var reactHookForm = require('react-hook-form');
 var yup$1 = require('@hookform/resolvers/yup');
 var pi = require('react-icons/pi');
 var Container = _interopDefault(require('@mui/material/Container'));
+var bs = require('react-icons/bs');
 var Popover = _interopDefault(require('@mui/material/Popover'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
 var go = require('react-icons/go');
@@ -278,7 +279,7 @@ var setLanguage = toolkit.createAction("common/setLanguage");
 var reset = toolkit.createAction("common/reset");
 var setReFetchUserAcademies = toolkit.createAction("common/setReFetchUserAcademies");
 var setConcurrentConnectionPusher = toolkit.createAction("common/setConcurrentConnectionPusher");
-var setReadyRegisterPusher = toolkit.createAction("common/setReadyRegisterPusher");
+var setTotalUnreadMessages = toolkit.createAction("common/setTotalUnreadMessages");
 
 var initialState = {
   isLoading: false,
@@ -288,8 +289,8 @@ var initialState = {
   },
   user: null,
   academy: null,
+  totalUnreadMessages: 0,
   isReFetchUserAcademies: false,
-  isReadyRegisterPusher: false,
   concurrentConnectionPusher: {
     pusher: null,
     academyDomain: "",
@@ -315,8 +316,8 @@ var commonReducer = toolkit.createReducer(initialState, function (builder) {
     state.concurrentConnectionPusher.pusher = action.payload.pusher;
     state.concurrentConnectionPusher.academyDomain = action.payload.academyDomain;
     state.concurrentConnectionPusher.isRegistered = action.payload.isRegistered;
-  }).addCase(setReadyRegisterPusher, function (state, action) {
-    state.isReadyRegisterPusher = action.payload;
+  }).addCase(setTotalUnreadMessages, function (state, action) {
+    state.totalUnreadMessages = action.payload;
   });
 });
 
@@ -1340,6 +1341,12 @@ var please_reload_this_page_to_continue_using_this_tab_or_close_it = "이 탭을
 var reload_page = "페이지 새로고침";
 var last_attendance_date = "마지막 출석일자";
 var less_than_a_day = "하루 미만";
+var less_than_a_min = "1분 미만";
+var just_now = "방금 전";
+var n_mins_ago = "{{min}}분 전";
+var n_hours_ago = "{{hour}}시간 전";
+var one_min_ago = "1분 전";
+var one_hour_ago = "1시간 전";
 var n_days_ago = "{{day}}일 전";
 var n_months_ago = "{{month}}개월 전";
 var n_years_ago = "{{year}}년 전";
@@ -1509,6 +1516,22 @@ var next_status = "다음 상태";
 var arrival_time = "도착 시간";
 var current_arrival_time = "현재 도착 시간";
 var uppdate_attendance = "출석 현황 수정";
+var you_have_n_unread_messages = "읽지 않은 메시지가 {{ n }}개 있습니다";
+var receivers = "수신자";
+var total_receivers = "총 수신자";
+var sender = "보내는 사람";
+var manage_notes = "메모 관리";
+var notes = "노트";
+var new_note = "새 노트";
+var mark_as_read = "읽은 것으로 표시";
+var view_notes = "노트 보기";
+var admin_n = "{{admin}} 관리자";
+var teacher_n = "{{teacher}} 교사";
+var sent_a_memo = "메모를 보냈습니다";
+var admin_to_admin = "관리자에서 관리자에게";
+var teacher_to_admin = "교사에서 관리자에게";
+var admin_to_teachers = "관리자에서 교사들에게";
+var teacher_to_teachers = "교사에서 교사들에게";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -2490,6 +2513,12 @@ var lang_ko = {
 	reload_page: reload_page,
 	last_attendance_date: last_attendance_date,
 	less_than_a_day: less_than_a_day,
+	less_than_a_min: less_than_a_min,
+	just_now: just_now,
+	n_mins_ago: n_mins_ago,
+	n_hours_ago: n_hours_ago,
+	one_min_ago: one_min_ago,
+	one_hour_ago: one_hour_ago,
 	n_days_ago: n_days_ago,
 	n_months_ago: n_months_ago,
 	n_years_ago: n_years_ago,
@@ -2654,7 +2683,23 @@ var lang_ko = {
 	next_status: next_status,
 	arrival_time: arrival_time,
 	current_arrival_time: current_arrival_time,
-	uppdate_attendance: uppdate_attendance
+	uppdate_attendance: uppdate_attendance,
+	you_have_n_unread_messages: you_have_n_unread_messages,
+	receivers: receivers,
+	total_receivers: total_receivers,
+	sender: sender,
+	manage_notes: manage_notes,
+	notes: notes,
+	new_note: new_note,
+	mark_as_read: mark_as_read,
+	view_notes: view_notes,
+	admin_n: admin_n,
+	teacher_n: teacher_n,
+	sent_a_memo: sent_a_memo,
+	admin_to_admin: admin_to_admin,
+	teacher_to_admin: teacher_to_admin,
+	admin_to_teachers: admin_to_teachers,
+	teacher_to_teachers: teacher_to_teachers
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -3653,6 +3698,12 @@ var please_reload_this_page_to_continue_using_this_tab_or_close_it$1 = "Please r
 var reload_page$1 = "Reload page";
 var last_attendance_date$1 = "Last attendance date";
 var less_than_a_day$1 = "Less than a day";
+var less_than_a_min$1 = "Less than a minute";
+var just_now$1 = "Just now";
+var n_mins_ago$1 = "{{min}} minutes ago";
+var n_hours_ago$1 = "{{hour}} hours ago";
+var one_min_ago$1 = "one minute ago";
+var one_hour_ago$1 = "one hour ago";
 var n_days_ago$1 = "{{day}} days ago";
 var n_months_ago$1 = "{{month}} months ago";
 var n_years_ago$1 = "{{year}} years ago";
@@ -3823,6 +3874,22 @@ var next_status$1 = "Next status";
 var arrival_time$1 = "Arrival time";
 var current_arrival_time$1 = "Current arrival time";
 var uppdate_attendance$1 = "Update attendance";
+var you_have_n_unread_messages$1 = "You have {{ n }} unread message(s)";
+var receivers$1 = "Receivers";
+var total_receivers$1 = "Total receivers";
+var sender$1 = "Sender";
+var manage_notes$1 = "Manage notes";
+var notes$1 = "Notes";
+var new_note$1 = "New note";
+var mark_as_read$1 = "Mark as read";
+var view_notes$1 = "View notes";
+var admin_n$1 = "Admin {{admin}}";
+var teacher_n$1 = "Teacher {{teacher}}";
+var sent_a_memo$1 = "sent a memo";
+var admin_to_admin$1 = "Admin to admin";
+var teacher_to_admin$1 = "Teacher to admin";
+var admin_to_teachers$1 = "Admin to teachers";
+var teacher_to_teachers$1 = "Teacher to teachers";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -4805,6 +4872,12 @@ var lang_en = {
 	reload_page: reload_page$1,
 	last_attendance_date: last_attendance_date$1,
 	less_than_a_day: less_than_a_day$1,
+	less_than_a_min: less_than_a_min$1,
+	just_now: just_now$1,
+	n_mins_ago: n_mins_ago$1,
+	n_hours_ago: n_hours_ago$1,
+	one_min_ago: one_min_ago$1,
+	one_hour_ago: one_hour_ago$1,
 	n_days_ago: n_days_ago$1,
 	n_months_ago: n_months_ago$1,
 	n_years_ago: n_years_ago$1,
@@ -4970,7 +5043,23 @@ var lang_en = {
 	next_status: next_status$1,
 	arrival_time: arrival_time$1,
 	current_arrival_time: current_arrival_time$1,
-	uppdate_attendance: uppdate_attendance$1
+	uppdate_attendance: uppdate_attendance$1,
+	you_have_n_unread_messages: you_have_n_unread_messages$1,
+	receivers: receivers$1,
+	total_receivers: total_receivers$1,
+	sender: sender$1,
+	manage_notes: manage_notes$1,
+	notes: notes$1,
+	new_note: new_note$1,
+	mark_as_read: mark_as_read$1,
+	view_notes: view_notes$1,
+	admin_n: admin_n$1,
+	teacher_n: teacher_n$1,
+	sent_a_memo: sent_a_memo$1,
+	admin_to_admin: admin_to_admin$1,
+	teacher_to_admin: teacher_to_admin$1,
+	admin_to_teachers: admin_to_teachers$1,
+	teacher_to_teachers: teacher_to_teachers$1
 };
 
 i18n__default.use(reactI18next.initReactI18next).init({
@@ -6134,8 +6223,12 @@ var NoteSortColumn;
   NoteSortColumn["Question"] = "Question";
 })(NoteSortColumn || (NoteSortColumn = {}));
 (function (NoteType) {
-  NoteType[NoteType["Default"] = 0] = "Default";
-  NoteType[NoteType["StudentReadable"] = 1] = "StudentReadable";
+  NoteType[NoteType["ToAcademy"] = 0] = "ToAcademy";
+  NoteType[NoteType["ToStudent"] = 1] = "ToStudent";
+  NoteType[NoteType["AdminToAllAdmin"] = 2] = "AdminToAllAdmin";
+  NoteType[NoteType["AdminToAllTeacher"] = 3] = "AdminToAllTeacher";
+  NoteType[NoteType["TeacherToAllAdmin"] = 4] = "TeacherToAllAdmin";
+  NoteType[NoteType["TeacherToTeachers"] = 5] = "TeacherToTeachers";
 })(exports.NoteType || (exports.NoteType = {}));
 
 var SchoolType;
@@ -6305,16 +6398,35 @@ var pushTo = function pushTo(history, data, isReplace) {
   });
 };
 
-var timAgo = function timAgo(date, t) {
-  if (date === DATE_MIN_VALUE || date === DATE_TIME_MIN_VALUE) return '';
+var timAgo = function timAgo(date, t, day) {
+  if (!date || date === DATE_MIN_VALUE || date === DATE_TIME_MIN_VALUE) return '';
   var time = moment.utc(date).local();
+  var years = moment().diff(time, 'years');
+  if (years >= 1) return years >= 2 ? t('n_years_ago', {
+    year: years
+  }) : t("one_year_ago");
+  var months = moment().diff(time, 'months');
+  if (months >= 1) return months >= 2 ? t('n_months_ago', {
+    month: months
+  }) : t("one_month_ago");
   var days = moment().diff(time, 'days');
-  if (days === 0) return t('less_than_a_day');
-  var months = days / 30;
-  var years = months / 12;
-  if (years > 0) return years > 1 ? t('n_years_ago') : t("one_year_ago");
-  if (months > 0) return months > 1 ? t('n_months_ago') : t("one_month_ago");
-  return days > 1 ? t('n_days_ago') : t("one_day_ago");
+  if (days < 1 && !day) return t('less_than_a_day');
+  if (days < 1 && day) {
+    var hours = moment().diff(time, 'hours');
+    if (hours >= 1) return hours >= 2 ? t('n_hours_ago', {
+      hour: hours
+    }) : t("one_hour_ago");
+    var mins = moment().diff(time, 'minutes');
+    if (mins >= 1) return mins >= 2 ? t('n_mins_ago', {
+      min: mins
+    }) : t("one_min_ago");
+    var secs = moment().diff(time, 'seconds');
+    if (secs > 10) return t('less_than_a_min');
+    return t("just_now");
+  }
+  return days >= 2 ? t('n_days_ago', {
+    day: days
+  }) : t("one_day_ago");
 };
 
 var toISOString = (function (time) {
@@ -6904,7 +7016,10 @@ var useLanguage = function useLanguage(history, init) {
   };
 };
 
-var useList = function useList(fetchData, defaultQuery) {
+var useList = function useList(fetchData, defaultQuery, showLoading) {
+  if (showLoading === void 0) {
+    showLoading = true;
+  }
   var dispatch = reactRedux.useDispatch();
   var _useState = React.useState(defaultQuery),
     filter = _useState[0],
@@ -6918,6 +7033,9 @@ var useList = function useList(fetchData, defaultQuery) {
   var _useState4 = React.useState(),
     selectedItem = _useState4[0],
     setSelectedItem = _useState4[1];
+  var _useState5 = React.useState(false),
+    isLoading = _useState5[0],
+    setIsLoading = _useState5[1];
   var textSearchRef = React.useRef(null);
   var isFirstLoadRef = React.useRef(true);
   var _useTranslation = reactI18next.useTranslation(),
@@ -6931,11 +7049,13 @@ var useList = function useList(fetchData, defaultQuery) {
     }
     try {
       var _temp2 = function _temp2() {
-        isLoading && dispatch(setLoading(false));
+        isLoading && showLoading && dispatch(setLoading(false));
+        setIsLoading(false);
       };
       if (!fetchData) return Promise.resolve();
       if (isFirstLoadRef.current) isFirstLoadRef.current = false;
-      isLoading && dispatch(setLoading(true));
+      isLoading && showLoading && dispatch(setLoading(true));
+      setIsLoading(true);
       var _temp = _catch(function () {
         return Promise.resolve(fetchData(filter)).then(function (res) {
           var _res$data$items = res.data.items,
@@ -6960,10 +7080,6 @@ var useList = function useList(fetchData, defaultQuery) {
   };
   var handleSort = function handleSort(sortColumnName) {
     var sortColumnDirection = exports.OrderType.ASC;
-    console.log({
-      sortColumnName: typeof sortColumnName,
-      filter: typeof filter.sortColumnName
-    });
     if (filter.sortColumnName == sortColumnName && filter.sortColumnDirection === exports.OrderType.ASC) sortColumnDirection = exports.OrderType.DESC;
     setFilter(_extends({}, filter, {
       sortColumnName: sortColumnName,
@@ -6996,6 +7112,7 @@ var useList = function useList(fetchData, defaultQuery) {
     getData(isFirstLoadRef.current);
   }, [JSON.stringify(filter)]);
   return {
+    isLoading: isLoading,
     filter: filter,
     textSearchRef: textSearchRef,
     paging: paging,
@@ -7098,36 +7215,26 @@ var useLogin = function useLogin(history, homeAcademyUrl, homeUrl, registerUrl,
       }
       var isAcademy = !!academyDomain || isLearningSpace;
       return Promise.resolve(handleLogin(function () {
-        return new Promise(function (resolve, reject) {
-          try {
-            var _temp3 = _catch(function () {
-              return Promise.resolve(isAcademy ? apiLoginGoogle(data, isLearningSpace) : apiLoginGoogleSuperAdmin(data)).then(function (loginResponse) {
-                function _temp2() {
-                  resolve(result);
-                }
-                var result = loginResponse.data;
-                var _temp = function () {
-                  if (loginResponse.status === 204 && academyDomain) {
-                    localStorage.removeItem(ACADEMY_DOMAIN);
-                    localStorage.removeItem(LEARNING_SPACE);
-                    return Promise.resolve(apiLoginGoogleSuperAdmin(data)).then(function (_apiLoginGoogleSuperA) {
-                      loginResponse = _apiLoginGoogleSuperA;
-                      result = loginResponse.data;
-                    });
-                  }
-                }();
-                return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-              });
-            }, function (error) {
-              !!academyDomain && localStorage.removeItem(ACADEMY_DOMAIN);
-              localStorage.removeItem(LEARNING_SPACE);
-              reject(error);
-            });
-            return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        });
+        try {
+          return Promise.resolve(isAcademy ? apiLoginGoogle(data, isLearningSpace) : apiLoginGoogleSuperAdmin(data)).then(function (loginResponse) {
+            var result = loginResponse.data;
+            var _temp = function () {
+              if (loginResponse.status === 204 && academyDomain) {
+                localStorage.removeItem(ACADEMY_DOMAIN);
+                localStorage.removeItem(LEARNING_SPACE);
+                return Promise.resolve(apiLoginGoogleSuperAdmin(data)).then(function (_apiLoginGoogleSuperA) {
+                  loginResponse = _apiLoginGoogleSuperA;
+                  result = loginResponse.data;
+                });
+              }
+            }();
+            return _temp && _temp.then ? _temp.then(function () {
+              return result;
+            }) : result;
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
       }, isStudent, isLogout)).then(function () {});
     } catch (e) {
       return Promise.reject(e);
@@ -7140,21 +7247,14 @@ var useLogin = function useLogin(history, homeAcademyUrl, homeUrl, registerUrl,
     try {
       var isStudent = data.role === exports.Role.Student;
       return Promise.resolve(handleLogin(function () {
-        return new Promise(function (resolve, reject) {
-          try {
-            var _temp4 = _catch(function () {
-              return Promise.resolve(!isLearningSpace && !domain ? apiLoginSuperAdminWithAccessToken(data) : apiLoginWithAccessToken(data, isLearningSpace, domain)).then(function (loginResponse) {
-                var result = loginResponse.data;
-                resolve(result);
-              });
-            }, function (error) {
-              reject(error);
-            });
-            return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        });
+        try {
+          return Promise.resolve(!isLearningSpace && !domain ? apiLoginSuperAdminWithAccessToken(data) : apiLoginWithAccessToken(data, isLearningSpace, domain)).then(function (loginResponse) {
+            var result = loginResponse.data;
+            return result;
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
       }, isStudent, isLogout, superAdminRedirectPath)).then(function () {});
     } catch (e) {
       return Promise.reject(e);
@@ -7165,13 +7265,13 @@ var useLogin = function useLogin(history, homeAcademyUrl, homeUrl, registerUrl,
       isLogout = true;
     }
     try {
-      var _temp6 = function _temp6(_result) {
+      var _temp3 = function _temp3(_result) {
         if (_exit) return _result;
         dispatch(setLoading(false));
       };
       var _exit = false;
       dispatch(setLoading(true));
-      var _temp5 = _catch(function () {
+      var _temp2 = _catch(function () {
         return Promise.resolve(apiLogin()).then(function (loginResponse) {
           var isFirstLogin = loginResponse.isFirstLogin,
             token = loginResponse.token,
@@ -7195,7 +7295,7 @@ var useLogin = function useLogin(history, homeAcademyUrl, homeUrl, registerUrl,
         alert(getErrorMessage(t, error));
         isLogout && handleSignOut();
       });
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -8002,7 +8102,8 @@ var getStudentsApi = function getStudentsApi(textSearch) {
   return api.get("" + STUDENT_URL, {
     params: {
       textSearch: textSearch,
-      roles: [exports.Role.Admin]
+      roles: [exports.Role.Admin],
+      pageSize: 100
     }
   });
 };
@@ -8013,7 +8114,10 @@ var StudentSelector = function StudentSelector(_ref) {
     externalStudentIds = _ref.externalStudentIds,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    title = _ref.title;
+    title = _ref.title,
+    _ref$isMulti = _ref.isMulti,
+    isMulti = _ref$isMulti === void 0 ? true : _ref$isMulti,
+    minSearchLength = _ref.minSearchLength;
   var _useState = React.useState([]),
     students = _useState[0],
     setStudents = _useState[1];
@@ -8048,7 +8152,7 @@ var StudentSelector = function StudentSelector(_ref) {
   }, [searchString]);
   React.useEffect(function () {
     timeout && timeout.current && clearTimeout(timeout.current);
-    if (!searchString || searchString.trim().length < 2) {
+    if (minSearchLength && (!searchString || searchString.trim().length < minSearchLength)) {
       setStudents([]);
     } else {
       timeout.current = setTimeout(loadData, 300);
@@ -8074,8 +8178,8 @@ var StudentSelector = function StudentSelector(_ref) {
     },
     isDisabled: disabled,
     isLoading: isLoading,
-    placeholder: t('placeholder_student_selector'),
-    isMulti: true,
+    placeholder: t(minSearchLength ? 'placeholder_student_selector' : 'select_placeholder'),
+    isMulti: isMulti,
     value: value,
     onChange: onChange
   }));
@@ -14162,7 +14266,7 @@ var DrawerHeader = function DrawerHeader(_ref) {
       fontSize: "13px",
       fontWeight: 500
     }
-  }, student.schoolName), React__default.createElement(material.Typography, {
+  }, student.schoolName), !!student.grade && React__default.createElement(material.Typography, {
     sx: {
       color: grey[500],
       fontSize: "13px",
@@ -15470,6 +15574,9 @@ var getNotesApi = function getNotesApi(query) {
     params: query
   });
 };
+var getNoteByIdApi = function getNoteByIdApi(id) {
+  return api.get(NOTES_URL + "/" + id);
+};
 var createNoteApi = function createNoteApi(note) {
   return api.post("" + NOTES_URL, note);
 };
@@ -15478,6 +15585,9 @@ var updateNoteApi = function updateNoteApi(id, content) {
     content: content
   });
 };
+var updateNoteDataApi = function updateNoteDataApi(id, data) {
+  return api.put(NOTES_URL + "/" + id, data);
+};
 var deleteNoteApi = function deleteNoteApi(id) {
   return api["delete"](NOTES_URL + "/" + id);
 };
@@ -15752,6 +15862,121 @@ var NotesContainer = function NotesContainer(_ref) {
   });
 };
 
+var getNoteType = function getNoteType(t, type) {
+  switch (type) {
+    case exports.NoteType.ToAcademy:
+      return t("academy");
+    case exports.NoteType.ToStudent:
+      return t("student_parents");
+    case exports.NoteType.AdminToAllAdmin:
+      return t("admin_to_admin");
+    case exports.NoteType.AdminToAllTeacher:
+      return t("admin_to_teachers");
+    case exports.NoteType.TeacherToAllAdmin:
+      return t("teacher_to_admin");
+    case exports.NoteType.TeacherToTeachers:
+      return t("teacher_to_teachers");
+    default:
+      return "";
+  }
+};
+
+var NoteItemList = function NoteItemList(_ref) {
+  var _data$reciever, _data$reciever2, _data$recievers;
+  var data = _ref.data,
+    index = _ref.index,
+    role = _ref.role,
+    calcOrderNumber = _ref.calcOrderNumber,
+    onDelete = _ref.onDelete,
+    onUpdate = _ref.onUpdate,
+    onView = _ref.onView;
+  var isAdminUser = reactRedux.useSelector(function (state) {
+    var _state$common, _state$common$user, _state$common$user$ro;
+    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$ro = _state$common$user.roles) === null || _state$common$user$ro === void 0 ? void 0 : _state$common$user$ro.includes(exports.Role.Admin);
+  });
+  var userId = reactRedux.useSelector(function (state) {
+    var _state$common2, _state$common2$user;
+    return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.id;
+  });
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isAdmin = role === exports.Role.Admin;
+  var order = calcOrderNumber(index);
+  var createdAt = utcToLocalTime(data.createdAt, t("date_time_format"));
+  var handleDelete = function handleDelete() {
+    onDelete(data);
+  };
+  var handleUpdate = function handleUpdate() {
+    onUpdate(data);
+  };
+  var handleView = function handleView() {
+    onView(data);
+  };
+  var disabled = !data.isOwned && (!isAdminUser || data.type == undefined || data.type == exports.NoteType.TeacherToAllAdmin || data.type == exports.NoteType.TeacherToTeachers);
+  React.useEffect(function () {
+    if (window.MathJax) {
+      var _window$MathJax;
+      (_window$MathJax = window.MathJax) === null || _window$MathJax === void 0 ? void 0 : _window$MathJax.typeset();
+    }
+  }, [data.content]);
+  var noteType = data.type === undefined ? "" : getNoteType(t, data.type);
+  return React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, order), React__default.createElement(TableCell, null, data.type === exports.NoteType.AdminToAllTeacher && !isAdmin && !isAdminUser ? React__default.createElement(material.Typography, {
+    color: green[700],
+    fontWeight: 600
+  }, t("admin")) : React__default.createElement(React.Fragment, null, React__default.createElement(material.Typography, {
+    color: green[700],
+    fontWeight: 600
+  }, data.sender.fullName, data.sender.id === userId && React__default.createElement(material.Typography, {
+    display: "inline-block",
+    color: colors.grey[600],
+    fontWeight: 600
+  }, "(", " " + t("me"), ")")), React__default.createElement(material.Typography, null, data.sender.email))), data.type === exports.NoteType.ToAcademy || data.type === exports.NoteType.ToStudent ? React__default.createElement(TableCell, null, React__default.createElement(material.Typography, {
+    color: colors.blue[700],
+    fontWeight: 600
+  }, (_data$reciever = data.reciever) === null || _data$reciever === void 0 ? void 0 : _data$reciever.fullName), React__default.createElement(material.Typography, null, (_data$reciever2 = data.reciever) === null || _data$reciever2 === void 0 ? void 0 : _data$reciever2.email)) : data.type === exports.NoteType.TeacherToTeachers ? React__default.createElement(TableCell, null, React__default.createElement(material.Stack, {
+    direction: "column"
+  }, (_data$recievers = data.recievers) === null || _data$recievers === void 0 ? void 0 : _data$recievers.slice(0, 2).map(function (i) {
+    return React__default.createElement(material.Typography, null, i.fullName, " - ", i.email);
+  }), data.recievers && data.recievers.length > 2 && React__default.createElement(material.Typography, null, "(+", data.recievers.length - 2, ")"))) : React__default.createElement(TableCell, null, React__default.createElement(material.Typography, null, t(data.type === exports.NoteType.AdminToAllTeacher ? "teachers" : "admin"))), React__default.createElement(TableCell, null, React__default.createElement(material.Box, {
+    sx: {
+      display: "-webkit-box",
+      lineClamp: 3,
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: "vertical",
+      boxOrient: "vertical",
+      overflow: "hidden"
+    },
+    dangerouslySetInnerHTML: {
+      __html: data.content
+    }
+  })), React__default.createElement(TableCell, {
+    className: "text-nowrap"
+  }, noteType), React__default.createElement(TableCell, null, createdAt), React__default.createElement(TableCell, null, React__default.createElement("div", {
+    className: "d-flex"
+  }, React__default.createElement(material.Box, null, React__default.createElement(material.IconButton, {
+    color: "default",
+    className: "bg-primary text-white me-1",
+    onClick: handleView
+  }, React__default.createElement(fa.FaEye, {
+    size: 12
+  }))), React__default.createElement(material.Box, null, React__default.createElement(material.IconButton, {
+    color: "default",
+    className: styles$5["action-btn"] + " " + (disabled ? "bg-secondary" : "bg-warning") + " text-white me-2",
+    onClick: handleUpdate,
+    disabled: disabled
+  }, React__default.createElement(hi.HiOutlinePencilAlt, {
+    className: styles$5["action-btn--pencil"],
+    size: 12
+  }))), React__default.createElement(material.Box, null, React__default.createElement(material.IconButton, {
+    onClick: handleDelete,
+    color: "default",
+    className: styles$5["action-btn"] + " " + (disabled ? "bg-secondary" : "bg-danger") + " text-white",
+    disabled: disabled
+  }, React__default.createElement(fa6.FaTrashCan, {
+    size: 12
+  }))))));
+};
+
 var NoteContent = function NoteContent(_ref) {
   var content = _ref.content;
   React.useEffect(function () {
@@ -15773,7 +15998,7 @@ var NoteContent = function NoteContent(_ref) {
 };
 
 var NoteDrawer = function NoteDrawer(props) {
-  var _BRIEF_GRADE_OPTIONS$, _data$content;
+  var _BRIEF_GRADE_OPTIONS$, _note$content;
   var anchor = props.anchor,
     open = props.open,
     student = props.student,
@@ -15781,7 +16006,8 @@ var NoteDrawer = function NoteDrawer(props) {
     data = props.data,
     width = props.width,
     _props$showStudentInf = props.showStudentInfo,
-    showStudentInfo = _props$showStudentInf === void 0 ? true : _props$showStudentInf;
+    showStudentInfo = _props$showStudentInf === void 0 ? true : _props$showStudentInf,
+    id = props.id;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var academy = reactRedux.useSelector(function (state) {
@@ -15792,6 +16018,46 @@ var NoteDrawer = function NoteDrawer(props) {
     var _state$common2;
     return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.language;
   });
+  var _useState = React.useState(false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  var _useState2 = React.useState(),
+    noteData = _useState2[0],
+    setNoteData = _useState2[1];
+  React.useEffect(function () {
+    var getNoteById = function getNoteById() {
+      try {
+        var _temp2 = function _temp2() {
+          setLoading(false);
+        };
+        if (!id) return Promise.resolve();
+        setLoading(true);
+        var _temp = _catch(function () {
+          return Promise.resolve(getNoteByIdApi(+id)).then(function (res) {
+            setNoteData(res.data);
+          });
+        }, function (error) {
+          reactToastify.toast.error(getErrorMessage(t, error));
+        });
+        return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    getNoteById();
+  }, [id]);
+  var note = data != null ? data : noteData;
+  var user = React.useMemo(function () {
+    if (student) return student;
+    if (!note) return null;
+    switch (note.type) {
+      case exports.NoteType.ToAcademy:
+      case exports.NoteType.ToStudent:
+        return note.reciever;
+      default:
+        return note.sender;
+    }
+  }, [JSON.stringify(note), JSON.stringify(student)]);
   return React__default.createElement(material.Drawer, {
     anchor: anchor,
     open: open,
@@ -15818,11 +16084,11 @@ var NoteDrawer = function NoteDrawer(props) {
     onClick: onClose
   }, React__default.createElement(io5.IoClose, {
     size: 32
-  }))), showStudentInfo && React__default.createElement(material.Box, {
+  }))), showStudentInfo && ((note === null || note === void 0 ? void 0 : note.type) === exports.NoteType.ToAcademy || (note === null || note === void 0 ? void 0 : note.type) === exports.NoteType.ToStudent) && React__default.createElement(material.Box, {
     sx: {
       padding: "16px 40px"
     }
-  }, !student ? React__default.createElement(material.Stack, {
+  }, !user || loading ? React__default.createElement(material.Stack, {
     direction: "row",
     gap: 3
   }, React__default.createElement(material.Skeleton, {
@@ -15857,7 +16123,7 @@ var NoteDrawer = function NoteDrawer(props) {
       color: green[500],
       lineHeight: "22px"
     }
-  }, student.fullName), React__default.createElement(material.Stack, {
+  }, user.fullName), React__default.createElement(material.Stack, {
     direction: "row",
     alignItems: "center",
     gap: 1
@@ -15867,17 +16133,29 @@ var NoteDrawer = function NoteDrawer(props) {
       fontSize: "13px",
       fontWeight: 500
     }
-  }, student.schoolName), React__default.createElement(material.Typography, {
+  }, user.schoolName), !!user.grade && React__default.createElement(material.Typography, {
     sx: {
       color: grey[500],
       fontSize: "13px",
       fontWeight: 500
     }
   }, t(function (label) {
-    return label ? t(label) : formatGrade(student.grade, t, language);
+    return label ? t(label) : formatGrade(user.grade, t, language);
   }((_BRIEF_GRADE_OPTIONS$ = BRIEF_GRADE_OPTIONS.find(function (o) {
-    return o.value === Number(student.grade);
-  })) === null || _BRIEF_GRADE_OPTIONS$ === void 0 ? void 0 : _BRIEF_GRADE_OPTIONS$.label))))))), React__default.createElement(material.Stack, {
+    return o.value === Number(user.grade);
+  })) === null || _BRIEF_GRADE_OPTIONS$ === void 0 ? void 0 : _BRIEF_GRADE_OPTIONS$.label))))))), !note && !loading && React__default.createElement(material.Stack, {
+    padding: "40px 24px 0",
+    gap: "16px"
+  }, React__default.createElement(material.Typography, {
+    className: "text-muted"
+  }, t("no_data"))), loading && React__default.createElement(material.Stack, {
+    padding: "40px 24px 0",
+    gap: "16px",
+    justifyContent: "center"
+  }, React__default.createElement(material.CircularProgress, {
+    size: 40,
+    color: "primary"
+  })), note && !loading && React__default.createElement(material.Stack, {
     padding: "40px 24px 0",
     gap: "16px"
   }, React__default.createElement(material.Stack, {
@@ -15890,7 +16168,7 @@ var NoteDrawer = function NoteDrawer(props) {
       fontWeight: "700",
       color: "#414E62"
     }
-  }, data === null || data === void 0 ? void 0 : data.fullName)), React__default.createElement(material.Stack, {
+  }, note === null || note === void 0 ? void 0 : note.fullName)), React__default.createElement(material.Stack, {
     display: "flex",
     justifyContent: "end"
   }, React__default.createElement(material.Typography, {
@@ -15900,7 +16178,7 @@ var NoteDrawer = function NoteDrawer(props) {
       color: "#97A1AF",
       textAlign: "end"
     }
-  }, utcToLocalTime(data === null || data === void 0 ? void 0 : data.createdAt, t("date_format"))), React__default.createElement(material.Typography, {
+  }, utcToLocalTime(note === null || note === void 0 ? void 0 : note.createdAt, t("date_format"))), React__default.createElement(material.Typography, {
     sx: {
       fontSize: "12px",
       fontWeight: "500",
@@ -15908,11 +16186,808 @@ var NoteDrawer = function NoteDrawer(props) {
       textAlign: "end"
     }
   }, academy === null || academy === void 0 ? void 0 : academy.name))), React__default.createElement(NoteContent, {
-    content: (_data$content = data === null || data === void 0 ? void 0 : data.content) != null ? _data$content : ""
+    content: (_note$content = note === null || note === void 0 ? void 0 : note.content) != null ? _note$content : ""
+  })));
+};
+
+var TEACHER_URL = BASE_URL + "/api/teacher";
+var getTeacherListApi = function getTeacherListApi(query) {
+  return api.get("" + TEACHER_URL, {
+    params: query
+  });
+};
+
+var TeacherSelector$1 = function TeacherSelector(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    externalTeacherIds = _ref.externalTeacherIds,
+    title = _ref.title,
+    isMultiple = _ref.isMultiple,
+    _ref$isClearable = _ref.isClearable,
+    isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
+    useUserId = _ref.useUserId,
+    exceptMe = _ref.exceptMe,
+    isDisabled = _ref.isDisabled;
+  var _useState = React.useState([]),
+    teachers = _useState[0],
+    setTeachers = _useState[1];
+  var _useState2 = React.useState(""),
+    searchString = _useState2[0],
+    setSearchString = _useState2[1];
+  var _useState3 = React.useState(false),
+    isLoading = _useState3[0],
+    setLoading = _useState3[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var debounceSearch = React.useCallback(_$8.debounce(function (value) {
+    loadData(value);
+  }, 500), []);
+  var handleChangeSearchText = function handleChangeSearchText(value) {
+    setSearchString(value.trim());
+    debounceSearch(value.trim());
+  };
+  var loadData = function loadData(textSearch) {
+    try {
+      var _temp2 = function _temp2() {
+        setLoading(false);
+      };
+      setLoading(true);
+      var _temp = _catch(function () {
+        return Promise.resolve(getTeacherListApi({
+          textSearch: textSearch,
+          pageSize: 100,
+          currentPage: 1,
+          exceptMe: exceptMe,
+          sortColumnDirection: exports.OrderType.DESC,
+          sortColumnName: "User.UserProfile.FullName"
+        })).then(function (res) {
+          var _res$data$items = res.data.items,
+            items = _res$data$items === void 0 ? [] : _res$data$items;
+          setTeachers(items);
+        });
+      }, function (err) {
+        reactToastify.toast.error(getErrorMessage(t, err));
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React.useEffect(function () {
+    loadData();
+  }, []);
+  var options = teachers.filter(function (teacher) {
+    return !externalTeacherIds || externalTeacherIds && !externalTeacherIds.includes(teacher.id);
+  }).map(function (teacher) {
+    return {
+      label: teacher.teacherName + " - " + teacher.teacherEmail,
+      value: useUserId ? teacher.teacherUserId : teacher.id
+    };
+  });
+  return React__default.createElement(material.FormGroup, {
+    className: "" + styles["filter-item"]
+  }, !!title && React__default.createElement("label", {
+    className: "" + styles["title-form"]
+  }, title), React__default.createElement(CustomSelectOption, {
+    options: options,
+    onInputChange: function onInputChange(inputValue) {
+      return handleChangeSearchText(inputValue);
+    },
+    isLoading: isLoading,
+    placeholder: placeholder || t('select_placeholder'),
+    isMulti: isMultiple,
+    value: value,
+    inputValue: searchString,
+    onChange: onChange,
+    isClearable: isClearable,
+    isDisabled: isDisabled
+  }));
+};
+
+var schema$3 = yup.object().shape({
+  content: yup.string().trim().required(),
+  studentId: yup.number().when("type", {
+    is: function is(type) {
+      return type == exports.NoteType.ToAcademy || type == exports.NoteType.ToStudent;
+    },
+    then: function then(schema) {
+      return schema.required("student_required");
+    },
+    otherwise: function otherwise(schema) {
+      return schema.notRequired();
+    }
+  }),
+  userIds: yup.array().of(yup.number()).when("type", {
+    is: function is(type) {
+      return type == exports.NoteType.TeacherToTeachers;
+    },
+    then: function then(schema) {
+      return schema.required("teachers_required");
+    },
+    otherwise: function otherwise(schema) {
+      return schema.notRequired();
+    }
+  }),
+  type: yup.number()
+});
+var GeneralNoteDialog = function GeneralNoteDialog(_ref) {
+  var _selectedNote$recieve, _selectedNote$recieve2, _selectedNote$recieve3;
+  var open = _ref.open,
+    type = _ref.type,
+    selectedNote = _ref.selectedNote,
+    value = _ref.value,
+    onClose = _ref.onClose,
+    onSaveNote = _ref.onSaveNote;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleSaveNote = function handleSaveNote(val) {
+    onSaveNote(val);
+  };
+  var tip = React.useMemo(function () {
+    if (type === undefined) return "";
+    switch (type) {
+      case exports.NoteType.ToAcademy:
+        return "academy";
+      case exports.NoteType.ToStudent:
+        return "student_parents";
+      case exports.NoteType.AdminToAllAdmin:
+      case exports.NoteType.AdminToAllTeacher:
+      case exports.NoteType.TeacherToAllAdmin:
+        return "admin";
+      case exports.NoteType.TeacherToTeachers:
+        return "teacher";
+      default:
+        return "";
+    }
+  }, [type]);
+  return React__default.createElement(material.Dialog, {
+    onClose: onClose,
+    open: open,
+    maxWidth: "md",
+    scroll: "body",
+    fullWidth: true,
+    disableEnforceFocus: true,
+    disableAutoFocus: true
+  }, React__default.createElement(DialogTitle, {
+    id: "customized-dialog-title"
+  }, React__default.createElement(Typography, {
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "19.09px",
+    color: "#202B37"
+  }, t(type === exports.NoteType.ToAcademy || type === exports.NoteType.ToStudent ? selectedNote ? "edit_student_note" : "student_note_taking" : "note"), tip ? " " + t(tip) : "")), React__default.createElement(IconButton, {
+    "aria-label": "close",
+    sx: {
+      position: "absolute",
+      right: 8,
+      top: 8,
+      color: function color(theme) {
+        return theme.palette.grey[500];
+      }
+    },
+    onClick: onClose
+  }, React__default.createElement(iconCloseDialog, null)), React__default.createElement(formik.Formik, {
+    initialValues: {
+      content: value ? value.content : (selectedNote === null || selectedNote === void 0 ? void 0 : selectedNote.content) || "",
+      type: type,
+      studentId: value ? value.studentId : selectedNote === null || selectedNote === void 0 ? void 0 : (_selectedNote$recieve = selectedNote.reciever) === null || _selectedNote$recieve === void 0 ? void 0 : _selectedNote$recieve.id,
+      student: value ? value.student : selectedNote !== null && selectedNote !== void 0 && selectedNote.reciever ? {
+        label: selectedNote.reciever.fullName,
+        value: selectedNote.reciever.id
+      } : undefined,
+      userIds: value ? value.userIds : selectedNote === null || selectedNote === void 0 ? void 0 : (_selectedNote$recieve2 = selectedNote.recievers) === null || _selectedNote$recieve2 === void 0 ? void 0 : _selectedNote$recieve2.map(function (i) {
+        return i.id;
+      }),
+      users: value ? value.users : selectedNote === null || selectedNote === void 0 ? void 0 : (_selectedNote$recieve3 = selectedNote.recievers) === null || _selectedNote$recieve3 === void 0 ? void 0 : _selectedNote$recieve3.map(function (i) {
+        return {
+          label: i.fullName,
+          value: i.id
+        };
+      })
+    },
+    validationSchema: schema$3,
+    enableReinitialize: true,
+    onSubmit: handleSaveNote
+  }, function (_ref2) {
+    var _selectedNote$recieve4;
+    var values = _ref2.values,
+      errors = _ref2.errors,
+      setFieldValue = _ref2.setFieldValue;
+    return React__default.createElement(formik.Form, null, React__default.createElement(DialogContent, {
+      sx: {
+        padding: 0,
+        overflowY: "auto"
+      }
+    }, React__default.createElement(material.Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      padding: "24px 24px 40px 24px"
+    }, (type === exports.NoteType.ToAcademy || type === exports.NoteType.ToStudent) && React__default.createElement(material.Stack, null, React__default.createElement("label", {
+      htmlFor: "student",
+      className: styles["form-label"] + "  " + styles$5["form-label-dialog"]
+    }, t("student_name")), selectedNote ? React__default.createElement(Typography, {
+      sx: {
+        fontWeight: 700,
+        fontSize: "14px",
+        color: "rgba(61, 198, 116, 1)"
+      }
+    }, (_selectedNote$recieve4 = selectedNote.reciever) === null || _selectedNote$recieve4 === void 0 ? void 0 : _selectedNote$recieve4.fullName) : React__default.createElement(formik.Field, {
+      id: "student",
+      style: {
+        width: "100%"
+      },
+      name: "student",
+      className: styles["form-control"],
+      render: function render(_ref3) {
+        var field = _ref3.field;
+        return React__default.createElement(StudentSelector, {
+          value: field.value,
+          onChange: function onChange(val) {
+            setFieldValue("studentId", val === null || val === void 0 ? void 0 : val.value);
+            setFieldValue("student", val);
+          },
+          isMulti: false
+        });
+      }
+    }), !!errors.studentId && React__default.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "10px",
+      lineHeight: "11.93px",
+      mt: 1,
+      color: "#F34B4B"
+    }, errors.studentId)), (type === exports.NoteType.AdminToAllAdmin || type === exports.NoteType.AdminToAllTeacher) && React__default.createElement(material.FormControl, {
+      className: "w-100"
+    }, React__default.createElement(material.FormLabel, {
+      className: "fw-medium",
+      id: "type"
+    }, t("receivers")), React__default.createElement(material.RadioGroup, {
+      className: "flex-row flex-wrap"
+    }, React__default.createElement(material.FormControlLabel, {
+      control: React__default.createElement(material.Radio, {
+        checked: values.type === exports.NoteType.AdminToAllAdmin || values.type === exports.NoteType.TeacherToAllAdmin,
+        onChange: function onChange(_) {
+          return setFieldValue("type", exports.NoteType.AdminToAllAdmin);
+        }
+      }),
+      label: t("admin")
+    }), React__default.createElement(material.FormControlLabel, {
+      control: React__default.createElement(material.Radio, {
+        checked: values.type === exports.NoteType.AdminToAllTeacher,
+        onChange: function onChange(_) {
+          return setFieldValue("type", exports.NoteType.AdminToAllTeacher);
+        }
+      }),
+      label: t("teacher")
+    }))), type === exports.NoteType.TeacherToTeachers && React__default.createElement(material.Stack, null, React__default.createElement("label", {
+      htmlFor: "teachers",
+      className: styles["form-label"] + "  " + styles$5["form-label-dialog"]
+    }, t("teachers")), React__default.createElement(formik.Field, {
+      id: "users",
+      style: {
+        width: "100%"
+      },
+      name: "users",
+      className: styles["form-control"],
+      render: function render(_ref4) {
+        var field = _ref4.field;
+        return React__default.createElement(TeacherSelector$1, {
+          value: field.value,
+          onChange: function onChange(val) {
+            var _val$map, _val$map2;
+            setFieldValue("userIds", (_val$map = val === null || val === void 0 ? void 0 : (_val$map2 = val.map) === null || _val$map2 === void 0 ? void 0 : _val$map2.call(val, function (i) {
+              return i.value;
+            })) != null ? _val$map : []);
+            setFieldValue("users", val != null ? val : []);
+          },
+          isDisabled: !!selectedNote,
+          exceptMe: true,
+          isMultiple: true,
+          useUserId: true
+        });
+      }
+    }), !!errors.userIds && React__default.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "10px",
+      lineHeight: "11.93px",
+      mt: 1,
+      color: "#F34B4B"
+    }, errors.userIds)), React__default.createElement(material.Stack, null, React__default.createElement("label", {
+      htmlFor: "content-question",
+      className: styles["form-label"] + "  " + styles$5["form-label-dialog"]
+    }, t("incorrect_answer_note_contents")), React__default.createElement(material.Box, {
+      position: "relative",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }, React__default.createElement(formik.Field, {
+      id: "content-question",
+      style: {
+        width: "100%"
+      },
+      name: "content",
+      placeholder: t("the_problem_is_difficult"),
+      className: styles["form-control"],
+      render: function render(_ref5) {
+        var field = _ref5.field;
+        return React__default.createElement(NoteTinyEditor, {
+          initValue: field.value,
+          onChange: function onChange(text) {
+            return setFieldValue("content", text);
+          }
+        });
+      }
+    })), !!errors.content && React__default.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "10px",
+      lineHeight: "11.93px",
+      mt: 1,
+      color: "#F34B4B"
+    }, errors.content), React__default.createElement(material.Box, {
+      marginBottom: "4px"
+    })))), React__default.createElement(DialogActions, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "12px",
+        borderTop: "1px solid #CED2DA"
+      }
+    }, React__default.createElement(MButton, {
+      className: styles$5["btn-cancel"],
+      onClick: onClose
+    }, React__default.createElement(Typography, {
+      sx: {
+        color: styles.dark + " !important"
+      },
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px"
+    }, t("cancel"))), React__default.createElement(MButton, {
+      variant: "contained",
+      sx: {
+        bgcolor: styles.dark
+      },
+      className: styles$5["btn-register"],
+      type: "submit"
+    }, React__default.createElement(Typography, {
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px",
+      color: "#FFFFFF"
+    }, t("registration")))));
+  }));
+};
+
+var NoteList = function NoteList(_ref) {
+  var defaultFilter = _ref.defaultFilter,
+    role = _ref.role,
+    headers = _ref.headers,
+    isAdmin = _ref.isAdmin;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useList = useList(function (filter) {
+      return getNotesApi(filter);
+    }, defaultFilter, false),
+    isLoading = _useList.isLoading,
+    filter = _useList.filter,
+    textSearchRef = _useList.textSearchRef,
+    paging = _useList.paging,
+    data = _useList.data,
+    selectedItem = _useList.selectedItem,
+    handleSort = _useList.handleSort,
+    handleChangeSearchText = _useList.handleChangeSearchText,
+    handleChangePage = _useList.handleChangePage,
+    calcOrderNumber = _useList.calcOrderNumber,
+    handleChangeSelectedItem = _useList.handleChangeSelectedItem,
+    getData = _useList.getData;
+  var dispatch = reactRedux.useDispatch();
+  var _useState = React.useState(false),
+    openNoteViewDrawer = _useState[0],
+    setOpenNoteViewDrawer = _useState[1];
+  var _useState2 = React.useState(),
+    openNoteDialog = _useState2[0],
+    setOpenNoteDialog = _useState2[1];
+  var _useState3 = React.useState(),
+    noteRequest = _useState3[0],
+    setNoteRequest = _useState3[1];
+  var _useState4 = React.useState(false),
+    openConfirmNote = _useState4[0],
+    setOpenConfirmNote = _useState4[1];
+  var _useState5 = React.useState(false),
+    openDeleteNoteDialog = _useState5[0],
+    setOpenDeleteNoteDialog = _useState5[1];
+  var handleOpenCreateNoteDialog = function handleOpenCreateNoteDialog() {
+    var _defaultFilter$types;
+    if (((_defaultFilter$types = defaultFilter.types) === null || _defaultFilter$types === void 0 ? void 0 : _defaultFilter$types.length) === 1) setOpenNoteDialog(defaultFilter.types[0]);else if (defaultFilter.types && defaultFilter.types.length > 1) {
+      setOpenNoteDialog(isAdmin ? exports.NoteType.AdminToAllAdmin : exports.NoteType.TeacherToAllAdmin);
+    }
+  };
+  var handleCloseDeleteDialog = function handleCloseDeleteDialog() {
+    setOpenDeleteNoteDialog(false);
+  };
+  var handleOpenDeleteNoteDialog = function handleOpenDeleteNoteDialog(note) {
+    handleChangeSelectedItem(note);
+    setOpenDeleteNoteDialog(true);
+  };
+  var handleOpenNoteDrawer = function handleOpenNoteDrawer(note) {
+    setOpenNoteViewDrawer(true);
+    handleChangeSelectedItem(note);
+  };
+  var handleCloseNoteDrawer = function handleCloseNoteDrawer() {
+    setOpenNoteViewDrawer(false);
+    handleChangeSelectedItem(undefined);
+  };
+  var handleCloseConfirmStudentNoteDialog = function handleCloseConfirmStudentNoteDialog() {
+    setOpenConfirmNote(false);
+  };
+  var handleOpenNoteDialog = function handleOpenNoteDialog(note) {
+    handleChangeSelectedItem(note);
+    setOpenNoteDialog(note.type);
+  };
+  var handleCloseNoteDialog = function handleCloseNoteDialog() {
+    handleChangeSelectedItem(undefined);
+    setOpenNoteDialog(undefined);
+    setNoteRequest(undefined);
+  };
+  var handleOpenConfirmStudentNoteDialog = function handleOpenConfirmStudentNoteDialog(note) {
+    setNoteRequest(note);
+    setOpenConfirmNote(true);
+  };
+  var handleSaveNote = function handleSaveNote(noteRequest) {
+    try {
+      var _temp4 = function _temp4() {
+        dispatch(setLoading(false));
+      };
+      if (openNoteDialog === undefined) return Promise.resolve();
+      if (noteRequest.content.trim().length === 0) return Promise.resolve();
+      dispatch(setLoading(true));
+      var _temp3 = _catch(function () {
+        function _temp2() {
+          getData();
+          reset();
+        }
+        var _temp = function () {
+          if (selectedItem) {
+            return Promise.resolve(updateNoteDataApi(selectedItem.id, noteRequest)).then(function () {
+              reactToastify.toast.success(t("update_note_successfully"));
+            });
+          } else {
+            return Promise.resolve(createNoteApi(noteRequest)).then(function () {
+              reactToastify.toast.success(t("create_note_successfully"));
+            });
+          }
+        }();
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+      }, function (error) {
+        reactToastify.toast.error(getErrorMessage(t, error));
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleDeleteNote = function handleDeleteNote() {
+    try {
+      var _temp6 = function _temp6() {
+        dispatch(setLoading(false));
+      };
+      if (!(selectedItem !== null && selectedItem !== void 0 && selectedItem.id)) return Promise.resolve();
+      dispatch(setLoading(true));
+      var _temp5 = _catch(function () {
+        return Promise.resolve(deleteNoteApi(selectedItem.id)).then(function () {
+          reactToastify.toast.success(t("delete_note_successfully"));
+          getData();
+          reset();
+        });
+      }, function (error) {
+        reactToastify.toast.error(getErrorMessage(t, error));
+      });
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var reset = function reset() {
+    handleCloseNoteDialog();
+    setOpenDeleteNoteDialog(false);
+    setOpenConfirmNote(false);
+    setNoteRequest(undefined);
+  };
+  var handleSaveNoteDialog = openNoteDialog === exports.NoteType.ToStudent && !(selectedItem !== null && selectedItem !== void 0 && selectedItem.id) ? handleOpenConfirmStudentNoteDialog : handleSaveNote;
+  var handleSaveStudentNote = function handleSaveStudentNote() {
+    if (!noteRequest) return;
+    handleSaveNote(noteRequest);
+  };
+  return React__default.createElement(material.Box, {
+    width: "100%"
+  }, React__default.createElement(material.Grid, {
+    container: true
+  }, React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    className: "d-flex mb-3"
+  }, React__default.createElement(SearchInput, {
+    placeholder: t("search_for"),
+    textSearchRef: textSearchRef,
+    onChange: handleChangeSearchText
+  })), React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    className: "d-flex justify-content-end align-items-center"
+  }, React__default.createElement(material.Button, {
+    variant: "contained",
+    sx: {
+      bgcolor: green[700]
+    },
+    startIcon: React__default.createElement(fa.FaPlus, {
+      size: 12
+    }),
+    onClick: handleOpenCreateNoteDialog
+  }, t("new_note"))), React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, React__default.createElement(material.TableContainer, null, React__default.createElement(material.Table, null, React__default.createElement(material.TableHead, null, React__default.createElement(material.TableRow, null, headers.map(function (i, index) {
+    return React__default.createElement(material.TableCell, {
+      key: index,
+      onClick: !!i.sortKey ? function () {
+        return handleSort(i.sortKey);
+      } : undefined,
+      className: "" + (!!i.sortKey && "pointer")
+    }, React__default.createElement("div", {
+      className: "d-flex justify-content-between align-items-center text-nowrap"
+    }, t(i.title), !!i.sortKey && React__default.createElement(SortIcon, {
+      isAscending: filter.sortColumnName !== i.sortKey ? undefined : filter.sortColumnDirection === exports.OrderType.ASC
+    })));
+  }))), React__default.createElement(material.TableBody, null, React__default.createElement(ListView, {
+    data: data,
+    render: function render(item, index) {
+      return React__default.createElement(NoteItemList, {
+        key: index,
+        data: item,
+        calcOrderNumber: calcOrderNumber,
+        index: index,
+        role: role,
+        onDelete: handleOpenDeleteNoteDialog,
+        onUpdate: handleOpenNoteDialog,
+        onView: handleOpenNoteDrawer
+      });
+    }
+  }), !data.length && !isLoading && React__default.createElement(material.TableRow, null, React__default.createElement(material.TableCell, {
+    colSpan: 12,
+    className: "text-center text-muted"
+  }, t("no_data"))), isLoading && React__default.createElement(material.TableRow, null, React__default.createElement(material.TableCell, {
+    colSpan: 12
+  }, React__default.createElement(material.Stack, {
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%"
+  }, React__default.createElement(material.CircularProgress, {
+    size: 24
+  }))))))), React__default.createElement("div", {
+    className: "d-flex justify-content-end mt-3"
+  }, !!paging.totalPages && React__default.createElement(material.Pagination, {
+    count: paging.totalPages,
+    page: paging.page,
+    onChange: handleChangePage
+  })))), React__default.createElement(NoteDrawer, {
+    open: !!openNoteViewDrawer,
+    data: selectedItem,
+    student: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.reciever,
+    width: "80dvw",
+    onClose: handleCloseNoteDrawer,
+    anchor: "right"
+  }), React__default.createElement(GeneralNoteDialog, {
+    open: openNoteDialog !== undefined,
+    type: openNoteDialog,
+    onClose: handleCloseNoteDialog,
+    onSaveNote: handleSaveNoteDialog,
+    selectedNote: selectedItem,
+    value: noteRequest
+  }), React__default.createElement(ConfirmDialog, {
+    open: openConfirmNote,
+    toggle: handleCloseConfirmStudentNoteDialog,
+    onConfirm: handleSaveStudentNote,
+    text: t("are_you_sure_to_create_student_parent_note")
+  }), React__default.createElement(ConfirmDeleteDialog, {
+    open: openDeleteNoteDialog,
+    toggle: handleCloseDeleteDialog,
+    onConfirm: handleDeleteNote,
+    text: t("are_you_sure_you_want_to_delete_the_note"),
+    title: t("delete_note"),
+    okText: t("delete_note"),
+    cancelText: t("cancel")
+  }));
+};
+
+var NotetabPanel = function NotetabPanel(_ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    index = _ref.index;
+  return React__default.createElement("div", {
+    role: "tabpanel",
+    hidden: value !== index,
+    id: "tabpanel-" + index,
+    "aria-labelledby": "tab-" + index
+  }, value === index && React__default.createElement(material.Box, {
+    sx: {
+      p: 2
+    }
+  }, React__default.createElement(material.Typography, null, children)));
+};
+
+var NOTE_STUDENT_HEADERS = [{
+  title: "#"
+}, {
+  title: "sender",
+  sortKey: "User.UserProfile.FullName"
+}, {
+  title: "student",
+  sortKey: "Student.UserProfile.FullName"
+}, {
+  title: "content"
+}, {
+  title: "type"
+}, {
+  title: "created_at",
+  sortKey: "CreatedAt"
+}, {
+  title: "actions"
+}];
+var NOTE_TEACHER_HEADERS = [{
+  title: "#"
+}, {
+  title: "sender",
+  sortKey: "User.UserProfile.FullName"
+}, {
+  title: "receivers"
+}, {
+  title: "content"
+}, {
+  title: "type"
+}, {
+  title: "created_at",
+  sortKey: "CreatedAt"
+}, {
+  title: "actions"
+}];
+var NOTE_ADMIN_HEADERS = [{
+  title: "#"
+}, {
+  title: "sender",
+  sortKey: "User.UserProfile.FullName"
+}, {
+  title: "receivers"
+}, {
+  title: "content"
+}, {
+  title: "type"
+}, {
+  title: "created_at",
+  sortKey: "CreatedAt"
+}, {
+  title: "actions"
+}];
+var ACADEMY_NOTE_FILTER = {
+  currentPage: 1,
+  pageSize: 12,
+  sortColumnDirection: exports.OrderType.DESC,
+  sortColumnName: NoteSortColumn.CreatedAt,
+  types: [exports.NoteType.ToAcademy]
+};
+var STUDENT_PARENTS_NOTE_FILTER = {
+  currentPage: 1,
+  pageSize: 12,
+  sortColumnDirection: exports.OrderType.DESC,
+  sortColumnName: NoteSortColumn.CreatedAt,
+  types: [exports.NoteType.ToStudent]
+};
+var ADMIN_TEACHER_NOTE_FILTER = {
+  currentPage: 1,
+  pageSize: 12,
+  sortColumnDirection: exports.OrderType.DESC,
+  sortColumnName: NoteSortColumn.CreatedAt,
+  types: [exports.NoteType.TeacherToAllAdmin, exports.NoteType.AdminToAllTeacher]
+};
+var ADMIN_NOTE_FILTER = {
+  currentPage: 1,
+  pageSize: 12,
+  sortColumnDirection: exports.OrderType.DESC,
+  sortColumnName: NoteSortColumn.CreatedAt,
+  types: [exports.NoteType.TeacherToAllAdmin, exports.NoteType.AdminToAllTeacher, exports.NoteType.AdminToAllAdmin]
+};
+var TEACHER_NOTE_FILTER = {
+  currentPage: 1,
+  pageSize: 12,
+  sortColumnDirection: exports.OrderType.DESC,
+  sortColumnName: NoteSortColumn.CreatedAt,
+  types: [exports.NoteType.TeacherToTeachers]
+};
+
+var NoteTabs = function NoteTabs(_ref) {
+  var role = _ref.role;
+  var roles = reactRedux.useSelector(function (state) {
+    var _state$common$user$ro, _state$common, _state$common$user;
+    return (_state$common$user$ro = 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.roles) != null ? _state$common$user$ro : [];
+  });
+  var isAdminUser = roles.includes(exports.Role.Admin);
+  var isAdmin = roles.includes(exports.Role.Admin);
+  var _useState = React.useState(0),
+    value = _useState[0],
+    setValue = _useState[1];
+  var handleChange = function handleChange(_event, newValue) {
+    setValue(newValue);
+  };
+  return React__default.createElement(material.Box, {
+    sx: {
+      width: "100%"
+    }
+  }, React__default.createElement(material.Tabs, {
+    value: value,
+    onChange: handleChange,
+    sx: {
+      "& .MuiTab-root": {
+        color: grey[500],
+        fontSize: "1rem"
+      },
+      "& .Mui-selected": {
+        color: green[700] + "!important"
+      },
+      "& .MuiTabs-indicator": {
+        backgroundColor: green[700]
+      }
+    }
+  }, React__default.createElement(material.Tab, Object.assign({
+    label: i18n.t("academy")
+  }, a11yProps$1(0))), React__default.createElement(material.Tab, Object.assign({
+    label: i18n.t("student_parents")
+  }, a11yProps$1(1))), React__default.createElement(material.Tab, Object.assign({
+    label: i18n.t("admin")
+  }, a11yProps$1(2))), !isAdmin && !isAdminUser && React__default.createElement(material.Tab, Object.assign({
+    label: i18n.t("teacher")
+  }, a11yProps$1(3)))), React__default.createElement(NotetabPanel, {
+    value: value,
+    index: 0
+  }, React__default.createElement(NoteList, {
+    role: role,
+    isAdmin: isAdmin,
+    defaultFilter: ACADEMY_NOTE_FILTER,
+    headers: NOTE_STUDENT_HEADERS
+  })), React__default.createElement(NotetabPanel, {
+    value: value,
+    index: 1
+  }, React__default.createElement(NoteList, {
+    role: role,
+    isAdmin: isAdmin,
+    defaultFilter: STUDENT_PARENTS_NOTE_FILTER,
+    headers: NOTE_STUDENT_HEADERS
+  })), React__default.createElement(NotetabPanel, {
+    value: value,
+    index: 2
+  }, React__default.createElement(NoteList, {
+    role: role,
+    isAdmin: isAdmin,
+    defaultFilter: isAdmin ? ADMIN_NOTE_FILTER : ADMIN_TEACHER_NOTE_FILTER,
+    headers: NOTE_ADMIN_HEADERS
+  })), !isAdmin && !isAdminUser && React__default.createElement(NotetabPanel, {
+    value: value,
+    index: 3
+  }, React__default.createElement(NoteList, {
+    role: role,
+    isAdmin: isAdmin,
+    defaultFilter: TEACHER_NOTE_FILTER,
+    headers: NOTE_TEACHER_HEADERS
   })));
 };
+function a11yProps$1(index) {
+  return {
+    id: "tab-" + index,
+    "aria-controls": "tabpanel-" + index
+  };
+}
 
-var useVirtualList = function useVirtualList(studentId, defaultFilter, getItemsApi) {
+var useVirtualList = function useVirtualList(defaultFilter, getItemsApi) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState([]),
@@ -15926,7 +17001,7 @@ var useVirtualList = function useVirtualList(studentId, defaultFilter, getItemsA
     setSelectedItem = _useState3[1];
   var _useState4 = React.useState(false),
     isLoading = _useState4[0],
-    setLoadingExamSessions = _useState4[1];
+    setLoading = _useState4[1];
   var _useState5 = React.useState(),
     filter = _useState5[0],
     setFilter = _useState5[1];
@@ -15936,18 +17011,16 @@ var useVirtualList = function useVirtualList(studentId, defaultFilter, getItemsA
   var getItems = function getItems() {
     try {
       var _temp2 = function _temp2() {
-        setLoadingExamSessions(false);
+        setLoading(false);
       };
       if (isLoading) return Promise.resolve();
       if (!filter || !filter.currentPage) {
         setItems([]);
         return Promise.resolve();
       }
-      setLoadingExamSessions(true);
+      setLoading(true);
       var _temp = _catch(function () {
-        return Promise.resolve(getItemsApi(_extends({}, filter, {
-          studentId: studentId
-        }))).then(function (res) {
+        return Promise.resolve(getItemsApi(filter)).then(function (res) {
           var responseData = res.data;
           setTotalPages((responseData === null || responseData === void 0 ? void 0 : responseData.totalPages) || 0);
           var responseItems = (responseData === null || responseData === void 0 ? void 0 : responseData.items) || [];
@@ -15986,23 +17059,25 @@ var useVirtualList = function useVirtualList(studentId, defaultFilter, getItemsA
     });
     setItems(results);
   };
-  var handleItemRemoved = function handleItemRemoved(item) {
-    var results = items.filter(function (i) {
-      return i.id !== item.id;
-    });
-    setItems(results);
+  var handleItemRemoved = function handleItemRemoved(_item) {
+    getItems();
+  };
+  var handleChangeFilter = function handleChangeFilter(newFilter) {
+    setFilter(newFilter);
   };
   React.useEffect(function () {
     setFilter(defaultFilter);
   }, [JSON.stringify(defaultFilter)]);
   React.useEffect(function () {
     getItems();
-  }, [JSON.stringify(filter)]);
+  }, [JSON.stringify(filter), getItemsApi]);
   return {
     t: t,
+    filter: filter,
     selectedItem: selectedItem,
     items: items,
     isLoading: isLoading,
+    handleChangeFilter: handleChangeFilter,
     setItems: setItems,
     handleChangeSelectedItem: handleChangeSelectedItem,
     handleLoadMore: handleLoadMore,
@@ -16054,8 +17129,9 @@ var useDrawerNoteTab = function useDrawerNoteTab(props) {
   var _useState6 = React.useState(),
     noteIdContextMenu = _useState6[0],
     setNoteIdContextMenu = _useState6[1];
-  var _useVirtualList = useVirtualList(studentId, _extends({}, DEFAULT_NOTE_FILTER, {
-      type: exports.NoteType.Default
+  var _useVirtualList = useVirtualList(_extends({}, DEFAULT_NOTE_FILTER, {
+      types: [exports.NoteType.ToAcademy],
+      studentId: studentId
     }), getNotesApi$1),
     academyNotes = _useVirtualList.items,
     isLoadingAcademyNotes = _useVirtualList.isLoading,
@@ -16065,8 +17141,9 @@ var useDrawerNoteTab = function useDrawerNoteTab(props) {
     handleItemAddedAcademyNote = _useVirtualList.handleItemAdded,
     handleItemUpdatedAcademyNote = _useVirtualList.handleItemUpdated,
     handleChangeSelectedItem = _useVirtualList.handleChangeSelectedItem;
-  var _useVirtualList2 = useVirtualList(studentId, _extends({}, DEFAULT_NOTE_FILTER, {
-      type: exports.NoteType.StudentReadable
+  var _useVirtualList2 = useVirtualList(_extends({}, DEFAULT_NOTE_FILTER, {
+      types: [exports.NoteType.ToStudent],
+      studentId: studentId
     }), getNotesApi$1),
     studentNotes = _useVirtualList2.items,
     isLoadingStudentNotes = _useVirtualList2.isLoading,
@@ -16083,11 +17160,11 @@ var useDrawerNoteTab = function useDrawerNoteTab(props) {
   };
   var handleOpenCreateAcademyNoteDialog = function handleOpenCreateAcademyNoteDialog() {
     handleCloseTooltip();
-    setOpenNoteDialog(exports.NoteType.Default);
+    setOpenNoteDialog(exports.NoteType.ToAcademy);
   };
   var handleOpenCreateStudentNoteDialog = function handleOpenCreateStudentNoteDialog() {
     handleCloseTooltip();
-    setOpenNoteDialog(exports.NoteType.StudentReadable);
+    setOpenNoteDialog(exports.NoteType.ToStudent);
   };
   var handleCloseTooltip = function handleCloseTooltip() {
     setNoteIdContextMenu(0);
@@ -16138,7 +17215,7 @@ var useDrawerNoteTab = function useDrawerNoteTab(props) {
         var _temp = function () {
           if (selectedItem) {
             return Promise.resolve(updateNoteApi$1(selectedItem.id, data.content)).then(function (res) {
-              if (selectedItem.type === exports.NoteType.StudentReadable) handleItemUpdatedStudentNote(res.data);else handleItemUpdatedAcademyNote(res.data);
+              if (selectedItem.type === exports.NoteType.ToStudent) handleItemUpdatedStudentNote(res.data);else handleItemUpdatedAcademyNote(res.data);
               reactToastify.toast.success(t("update_note_successfully"));
             });
           } else {
@@ -16146,7 +17223,7 @@ var useDrawerNoteTab = function useDrawerNoteTab(props) {
             return Promise.resolve(createNoteApi$1(_extends({}, data, {
               type: openNoteDialog
             }))).then(function (res) {
-              if (res.data.type === exports.NoteType.StudentReadable) handleItemAddedStudentNote(res.data);else handleItemAddedAcademyNote(res.data);
+              if (res.data.type === exports.NoteType.ToStudent) handleItemAddedStudentNote(res.data);else handleItemAddedAcademyNote(res.data);
               reactToastify.toast.success(t("create_note_successfully"));
             });
           }
@@ -16179,7 +17256,7 @@ var useDrawerNoteTab = function useDrawerNoteTab(props) {
       var _temp5 = _catch(function () {
         return Promise.resolve(deleteNoteApi$1(selectedItem.id)).then(function () {
           reactToastify.toast.success(t("delete_note_successfully"));
-          if (selectedItem.type === exports.NoteType.StudentReadable) handleItemRemovedStudentNote(selectedItem);else handleItemRemovedAcademyNote(selectedItem);
+          if (selectedItem.type === exports.NoteType.ToStudent) handleItemRemovedStudentNote(selectedItem);else handleItemRemovedAcademyNote(selectedItem);
           reset();
         });
       }, function (error) {
@@ -16201,14 +17278,12 @@ var useDrawerNoteTab = function useDrawerNoteTab(props) {
     handleSaveNote(studentNoteContent);
   };
   var noteDialogProps = {
-    open: openNoteDialog === exports.NoteType.StudentReadable && !openConfirmNote || openNoteDialog === exports.NoteType.Default,
+    open: openNoteDialog === exports.NoteType.ToStudent && !openConfirmNote || openNoteDialog === exports.NoteType.ToAcademy,
     selectedNote: selectedItem,
-    tip: " (" + t(openNoteDialog === exports.NoteType.StudentReadable ? "student_parents" : "academy") + ")",
+    tip: " (" + t(openNoteDialog === exports.NoteType.ToStudent ? "student_parents" : "academy") + ")",
     value: studentNoteContent,
     onClose: handleCloseNoteDialog,
-    onSaveNote: openNoteDialog === exports.NoteType.StudentReadable && !(selectedItem !== null && selectedItem !== void 0 && selectedItem.id) ? handleOpenConfirmStudentNoteDialog : function (content) {
-      return handleSaveNote(content);
-    }
+    onSaveNote: openNoteDialog === exports.NoteType.ToStudent && !(selectedItem !== null && selectedItem !== void 0 && selectedItem.id) ? handleOpenConfirmStudentNoteDialog : handleSaveNote
   };
   return {
     openConfirmNote: openConfirmNote,
@@ -16475,11 +17550,11 @@ var DrawerInfoTab = function DrawerInfoTab(_ref) {
     }
   }, data ? React__default.createElement(material.Typography, {
     sx: contentStyle
-  }, t(function (label) {
+  }, !!data.grade ? t(function (label) {
     return label ? t(label) : formatGrade(data.grade, t, language);
   }((_BRIEF_GRADE_OPTIONS$ = BRIEF_GRADE_OPTIONS.find(function (o) {
     return o.value === Number(data.grade);
-  })) === null || _BRIEF_GRADE_OPTIONS$ === void 0 ? void 0 : _BRIEF_GRADE_OPTIONS$.label))) : React__default.createElement(material.Skeleton, {
+  })) === null || _BRIEF_GRADE_OPTIONS$ === void 0 ? void 0 : _BRIEF_GRADE_OPTIONS$.label)) : "") : React__default.createElement(material.Skeleton, {
     variant: "text",
     width: 20,
     sx: contentStyle
@@ -16672,7 +17747,7 @@ var ExamResultItem = function ExamResultItem(_ref) {
   }, (_data$teacher = data.teacher) === null || _data$teacher === void 0 ? void 0 : _data$teacher.fullName))))));
 };
 
-var ExanResultList = function ExanResultList(_ref) {
+var ExamResultList = function ExamResultList(_ref) {
   var studentId = _ref.studentId,
     data = _ref.data,
     isLoading = _ref.isLoading,
@@ -22026,7 +23101,7 @@ var ExamResultDrawer = function ExamResultDrawer(_ref) {
       fontSize: "13px",
       fontWeight: 500
     }
-  }, student.schoolName), React__default.createElement(material.Typography, {
+  }, student.schoolName), !!student.grade && React__default.createElement(material.Typography, {
     sx: {
       color: grey[500],
       fontSize: "13px",
@@ -22064,7 +23139,9 @@ var DrawerExamResultTab = function DrawerExamResultTab(_ref) {
     value = _ref.value,
     studentId = _ref.studentId,
     onViewQA = _ref.onViewQA;
-  var _useVirtualList = useVirtualList(studentId, EXAM_SESSION_DEFAULT_FILTER, getExamSessionListApi),
+  var _useVirtualList = useVirtualList(_extends({}, EXAM_SESSION_DEFAULT_FILTER, {
+      studentId: studentId
+    }), getExamSessionListApi),
     items = _useVirtualList.items,
     selectedItem = _useVirtualList.selectedItem,
     isLoading = _useVirtualList.isLoading,
@@ -22081,7 +23158,7 @@ var DrawerExamResultTab = function DrawerExamResultTab(_ref) {
       p: 3,
       height: "100%"
     }
-  }, React__default.createElement(ExanResultList, {
+  }, React__default.createElement(ExamResultList, {
     data: items,
     isLoading: isLoading,
     onLoadMore: handleLoadMore,
@@ -24830,7 +25907,9 @@ var DrawerTextbookResultTab = function DrawerTextbookResultTab(_ref) {
     selectedTab = _ref.selectedTab,
     value = _ref.value,
     onViewQA = _ref.onViewQA;
-  var _useVirtualList = useVirtualList(studentId, TEXTBOOK_DEFAULT_FILTER, getTextbookListApi),
+  var _useVirtualList = useVirtualList(_extends({}, TEXTBOOK_DEFAULT_FILTER, {
+      studentId: studentId
+    }), getTextbookListApi),
     items = _useVirtualList.items,
     selectedItem = _useVirtualList.selectedItem,
     isLoading = _useVirtualList.isLoading,
@@ -25228,9 +26307,10 @@ var useDrawerAttendanceTab = function useDrawerAttendanceTab(studentId, onUpdate
   var pusher = concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.pusher;
   var channelName = React.useRef();
   var channel = React.useRef();
-  var _useVirtualList = useVirtualList(studentId, ATTENDANCE_COURSE_DEFAULT_FILTER, function (query) {
-      return getAttendanceByStudentIdApi(studentId, query);
-    }),
+  var handleGetAttendanceByStudentId = React.useCallback(function (query) {
+    return getAttendanceByStudentIdApi(studentId, query);
+  }, [studentId]);
+  var _useVirtualList = useVirtualList(ATTENDANCE_COURSE_DEFAULT_FILTER, handleGetAttendanceByStudentId),
     items = _useVirtualList.items,
     isLoading = _useVirtualList.isLoading,
     handleLoadMore = _useVirtualList.handleLoadMore,
@@ -26316,9 +27396,9 @@ var useLessonClassList = function useLessonClassList(courseId) {
   };
 };
 
-var TEACHER_URL = BASE_URL + "/api/teacher";
-var getTeacherListApi = function getTeacherListApi(query) {
-  return api.get("" + TEACHER_URL, {
+var TEACHER_URL$1 = BASE_URL + "/api/teacher";
+var getTeacherListApi$1 = function getTeacherListApi(query) {
+  return api.get("" + TEACHER_URL$1, {
     params: query
   });
 };
@@ -26339,7 +27419,7 @@ var useTeacherList = function useTeacherList() {
   var getListTeacher = function getListTeacher() {
     try {
       var _temp = _catch(function () {
-        return Promise.resolve(getTeacherListApi(teacherFilter)).then(function (res) {
+        return Promise.resolve(getTeacherListApi$1(teacherFilter)).then(function (res) {
           var _res$data;
           setTeachers(((_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.items) || []);
         });
@@ -26409,11 +27489,6 @@ var useClassDetail = function useClassDetail(_ref) {
   var isSelected = function isSelected(id) {
     return selected.indexOf(id) !== -1;
   };
-  var registerPusherRef = React.useRef(true);
-  var isReadyRegisterPusher = reactRedux.useSelector(function (state) {
-    var _state$common2;
-    return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.isReadyRegisterPusher;
-  });
   var _useStudentClassList = useStudentClassList(classId),
     getStudents = _useStudentClassList.getStudents,
     studentListProps = _objectWithoutPropertiesLoose(_useStudentClassList, _excluded$b);
@@ -26803,12 +27878,6 @@ var useClassDetail = function useClassDetail(_ref) {
   React.useEffect(function () {
     document.title = t("study_peak") + " | " + t(PAGE_TITLE$4);
   }, [t]);
-  React.useEffect(function () {
-    if (!isReadyRegisterPusher && registerPusherRef.current) {
-      dispatch(setReadyRegisterPusher(true));
-      registerPusherRef.current = false;
-    }
-  }, [isReadyRegisterPusher]);
   return {
     classId: classId,
     schema: schema,
@@ -28473,11 +29542,6 @@ var useUserList = function useUserList(role) {
     setOpenDeleteUserCsv = _useState10[1];
   var inputFileRef = React.useRef(null);
   var firstLoadRef = React.useRef(true);
-  var registerPusherRef = React.useRef(true);
-  var isReadyRegisterPusher = reactRedux.useSelector(function (state) {
-    var _state$common;
-    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.isReadyRegisterPusher;
-  });
   var handleChangeSelectedStudent = function handleChangeSelectedStudent(student) {
     var _student$roles, _student$roles2;
     var isStudent = ((_student$roles = student.roles) === null || _student$roles === void 0 ? void 0 : _student$roles.includes(exports.Role.Student)) && ((_student$roles2 = student.roles) === null || _student$roles2 === void 0 ? void 0 : _student$roles2.length) === 1;
@@ -28789,12 +29853,6 @@ var useUserList = function useUserList(role) {
   var userHeaders = USER_HEADERS.filter(function (i) {
     return i.roles.includes(role);
   });
-  React.useEffect(function () {
-    if (!isReadyRegisterPusher && registerPusherRef.current) {
-      dispatch(setReadyRegisterPusher(true));
-      registerPusherRef.current = false;
-    }
-  }, [isReadyRegisterPusher]);
   return {
     userDetail: userDetail,
     userHeaders: userHeaders,
@@ -30726,9 +31784,9 @@ var TextbookSortBy$1;
 var TeacherSortBy$1;
 (function (TeacherSortBy) {
   TeacherSortBy["CreatedAt"] = "CreatedAt";
-  TeacherSortBy["Name"] = "UserProfile.FullName";
-  TeacherSortBy["Email"] = "Email";
-  TeacherSortBy["PhoneNumber"] = "UserProfile.PhoneNumber";
+  TeacherSortBy["Name"] = "User.UserProfile.FullName";
+  TeacherSortBy["Email"] = "User.Email";
+  TeacherSortBy["PhoneNumber"] = "User.UserProfile.PhoneNumber";
 })(TeacherSortBy$1 || (TeacherSortBy$1 = {}));
 var ExamType$1;
 (function (ExamType) {
@@ -32495,9 +33553,9 @@ var ShareToTeacherDialog = function ShareToTeacherDialog(_ref) {
   }, t("cancel")))));
 };
 
-var TEACHER_URL$1 = BASE_URL + "/api/teacher";
-var getTeacherListApi$1 = function getTeacherListApi(query) {
-  return api.get("" + TEACHER_URL$1, {
+var TEACHER_URL$2 = BASE_URL + "/api/teacher";
+var getTeacherListApi$2 = function getTeacherListApi(query) {
+  return api.get("" + TEACHER_URL$2, {
     params: query
   });
 };
@@ -32508,7 +33566,7 @@ var useTextbookShare = function useTextbookShare(props) {
     role = props.role,
     isSuperAdmin = props.isSuperAdmin;
   var _useList = useList(!isSuperAdmin ? function (search) {
-      return getTeacherListApi$1(search);
+      return getTeacherListApi$2(search);
     } : null, DefaultTeacherQuery),
     filterShare = _useList.filter,
     textSearchShareRef = _useList.textSearchRef,
@@ -37539,17 +38597,17 @@ var PreparedTextbookForm = function PreparedTextbookForm(_ref) {
     sx: {
       color: inforErrors && submitCount ? error.main + "!important" : "gray"
     }
-  }, a11yProps$1(0))), React__default.createElement(material.Tab, Object.assign({
+  }, a11yProps$2(0))), React__default.createElement(material.Tab, Object.assign({
     label: i18n.t("textbook.contents"),
     sx: {
       color: contentsErrors && submitCount ? error.main + "!important" : "gray"
     }
-  }, a11yProps$1(1))), !(values !== null && values !== void 0 && values.isPublic) && (!isSuperAdmin || textbookId) && (!textbookId && !isAdmin || (values === null || values === void 0 ? void 0 : values.isShared)) && React__default.createElement(material.Tab, Object.assign({
+  }, a11yProps$2(1))), !(values !== null && values !== void 0 && values.isPublic) && (!isSuperAdmin || textbookId) && (!textbookId && !isAdmin || (values === null || values === void 0 ? void 0 : values.isShared)) && React__default.createElement(material.Tab, Object.assign({
     label: i18n.t("textbook.owners"),
     sx: {
       color: textbookOwnersErrors && submitCount ? error.main + "!important" : "gray"
     }
-  }, a11yProps$1(2))))), React__default.createElement(CustomTextbookTab, {
+  }, a11yProps$2(2))))), React__default.createElement(CustomTextbookTab, {
     value: selected,
     index: 0
   }, React__default.createElement(TextbookInfoTab, Object.assign({}, formikProps, {
@@ -37571,7 +38629,7 @@ var PreparedTextbookForm = function PreparedTextbookForm(_ref) {
     disabled: ownersDisabled
   }))))));
 };
-var a11yProps$1 = function a11yProps(index) {
+var a11yProps$2 = function a11yProps(index) {
   return {
     id: "textbook-tab-" + index,
     "aria-controls": "textbook-tabpanel-" + index
@@ -37968,6 +39026,448 @@ var PreparedTextbookList = function PreparedTextbookList(_ref) {
   }));
 };
 
+var AnnouncementEvent;
+(function (AnnouncementEvent) {
+  AnnouncementEvent["ReceivedNewNote"] = "ReceivedNewNote";
+  AnnouncementEvent["UpdatedNote"] = "UpdatedNote";
+  AnnouncementEvent["DeletedNote"] = "DeletedNote";
+})(AnnouncementEvent || (AnnouncementEvent = {}));
+(function (AnnouncementType) {
+  AnnouncementType["ReceivedNewNote"] = "ReceivedNewNote";
+})(exports.AnnouncementType || (exports.AnnouncementType = {}));
+
+var stringToColor = function stringToColor(string) {
+  var hash = 0;
+  var i;
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  var color = "#";
+  for (i = 0; i < 3; i += 1) {
+    var value = hash >> i * 8 & 0xff;
+    color += ("00" + value.toString(16)).slice(-2);
+  }
+  return color;
+};
+var stringAvatar = function stringAvatar(name) {
+  var _name$split$0$, _name$split$, _name$split$1$, _name$split$2;
+  return {
+    sx: {
+      bgcolor: stringToColor(name)
+    },
+    children: "" + ((_name$split$0$ = (_name$split$ = name.split(" ")[0]) === null || _name$split$ === void 0 ? void 0 : _name$split$[0]) != null ? _name$split$0$ : "") + ((_name$split$1$ = (_name$split$2 = name.split(" ")[1]) === null || _name$split$2 === void 0 ? void 0 : _name$split$2[0]) != null ? _name$split$1$ : "")
+  };
+};
+var convertAnnouncementData = function convertAnnouncementData(t, role, announcement) {
+  var isTeacherSite = role === exports.Role.Teacher;
+  var data = announcement.data;
+  switch (announcement.type) {
+    case exports.AnnouncementType.ReceivedNewNote:
+      var extraData = data.data;
+      var contents = extraData.split("|");
+      var noteType = contents[0];
+      var content = contents.slice(1).join("|");
+      var isAdmin = noteType === exports.NoteType[exports.NoteType.AdminToAllTeacher] || noteType === exports.NoteType[exports.NoteType.AdminToAllAdmin];
+      return {
+        content: content,
+        name: isAdmin ? isTeacherSite ? t("admin") : t("admin_n", {
+          admin: data.senderFullName
+        }) : t("teacher_n", {
+          teacher: data.senderFullName
+        }),
+        image: isAdmin && isTeacherSite ? undefined : data.senderAvatar,
+        action: t("sent_a_memo")
+      };
+    default:
+      return {
+        name: data.senderFullName,
+        image: data.senderAvatar,
+        content: data.data,
+        action: ""
+      };
+  }
+};
+
+var AnnouncementItem = function AnnouncementItem(_ref) {
+  var data = _ref.data,
+    role = _ref.role,
+    renderLink = _ref.renderLink,
+    onLoad = _ref.onLoad;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  React.useEffect(function () {
+    onLoad();
+  }, []);
+  var announcementData = convertAnnouncementData(t, role, data);
+  return React__default.createElement(React.Fragment, null, renderLink(React__default.createElement(material.ListItemButton, {
+    sx: _extends({
+      py: 1.5,
+      px: 2.5,
+      mt: "1px"
+    }, !data.isRead && {
+      bgcolor: "action.selected"
+    })
+  }, React__default.createElement(material.Stack, {
+    direction: "row",
+    gap: 1,
+    justifyContent: "space-between",
+    width: "100%"
+  }, React__default.createElement(material.Stack, {
+    direction: "row",
+    gap: 1
+  }, React__default.createElement(material.ListItemAvatar, null, React__default.createElement(material.Avatar, Object.assign({}, stringAvatar(announcementData.name), {
+    src: announcementData.image
+  }))), React__default.createElement(material.ListItemText, {
+    sx: {
+      marginBlock: 0
+    },
+    primary: React__default.createElement(material.Typography, null, React__default.createElement(material.Typography, {
+      fontWeight: 600,
+      display: "inline-block"
+    }, announcementData.name), announcementData.action && React__default.createElement(material.Typography, {
+      display: "inline-block",
+      px: "4px"
+    }, announcementData.action + ":"), React__default.createElement(material.Typography, {
+      display: "inline-block",
+      sx: {
+        display: "-webkit-box",
+        lineClamp: 2,
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: "vertical",
+        boxOrient: "vertical",
+        overflow: "hidden"
+      },
+      dangerouslySetInnerHTML: {
+        __html: announcementData.content || ""
+      }
+    })),
+    secondary: React__default.createElement(material.Typography, {
+      variant: "caption",
+      sx: {
+        mt: 0.5,
+        display: "flex",
+        alignItems: "center",
+        color: "text.disabled"
+      }
+    }, React__default.createElement(material.Box, {
+      sx: {
+        marginRight: "8px"
+      }
+    }, React__default.createElement(fa6.FaClockRotateLeft, {
+      size: 12
+    })), timAgo(data.createdAt, t, true))
+  })))), data));
+};
+
+var AnnouncementList = function AnnouncementList(_ref) {
+  var role = _ref.role,
+    items = _ref.items,
+    isLoading = _ref.isLoading,
+    onLoadMore = _ref.onLoadMore,
+    renderLink = _ref.renderLink;
+  return React__default.createElement(VirtualListView, {
+    data: items,
+    loading: isLoading,
+    listHeight: 0,
+    containerProps: {
+      sx: {
+        height: "100%"
+      }
+    },
+    renderItem: function renderItem(item, index, measure) {
+      return React__default.createElement(AnnouncementItem, {
+        role: role,
+        key: index,
+        data: item,
+        renderLink: renderLink,
+        onLoad: measure
+      });
+    },
+    onLoadMore: onLoadMore
+  });
+};
+
+var DEFAULT_ANNOUNCEMENT_FILTER = {
+  currentPage: 1,
+  pageSize: 10,
+  sortColumnDirection: exports.OrderType.DESC,
+  sortColumnName: "CreatedAt"
+};
+var ANNOUNCEMENT_CHANNEL = "ANNOUNCEMENT_A{academy}_U{userId}_CHANNEL";
+
+var ANNOUNCEMENT_URL = BASE_URL + "/api/announcements";
+var getAnnouncementListApi = function getAnnouncementListApi(query) {
+  return api.get("" + ANNOUNCEMENT_URL, {
+    params: query
+  });
+};
+var getTotalNumberUnreadAnnouncementsApi = function getTotalNumberUnreadAnnouncementsApi() {
+  return api.get(ANNOUNCEMENT_URL + "/unread");
+};
+var markAsReadAnnouncementsApi = function markAsReadAnnouncementsApi() {
+  return api.post(ANNOUNCEMENT_URL + "/mark-as-read");
+};
+var markAsReadAnnouncementByIdApi = function markAsReadAnnouncementByIdApi(id) {
+  return api.post(ANNOUNCEMENT_URL + "/" + id + "/mark-as-read");
+};
+
+var AnnouncementContainer = function AnnouncementContainer(_ref) {
+  var role = _ref.role,
+    renderLink = _ref.renderLink,
+    renderViewNoteLink = _ref.renderViewNoteLink;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var dispatch = reactRedux.useDispatch();
+  var user = reactRedux.useSelector(function (state) {
+    var _state$common;
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
+  });
+  var academyDomain = user === null || user === void 0 ? void 0 : user.academyDomain;
+  var concurrentConnectionPusher = reactRedux.useSelector(function (state) {
+    var _state$common2;
+    return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.concurrentConnectionPusher;
+  });
+  var totalUnreadMessages = reactRedux.useSelector(function (state) {
+    var _state$common3;
+    return state === null || state === void 0 ? void 0 : (_state$common3 = state.common) === null || _state$common3 === void 0 ? void 0 : _state$common3.totalUnreadMessages;
+  });
+  var pusher = concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.pusher;
+  var channel = React.useRef();
+  var channelName = React.useRef();
+  var _useState = React.useState(false),
+    openPopover = _useState[0],
+    setOpenPopover = _useState[1];
+  var anchorEl = React.useRef(null);
+  var handleOpenPopover = function handleOpenPopover() {
+    setOpenPopover(true);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    setOpenPopover(false);
+  };
+  var _useVirtualList = useVirtualList({}, getAnnouncementListApi),
+    filter = _useVirtualList.filter,
+    items = _useVirtualList.items,
+    isLoading = _useVirtualList.isLoading,
+    handleLoadMore = _useVirtualList.handleLoadMore,
+    handleItemAdded = _useVirtualList.handleItemAdded,
+    setItems = _useVirtualList.setItems,
+    handleChangeFilter = _useVirtualList.handleChangeFilter,
+    getItems = _useVirtualList.getItems;
+  var handleNewAnnouncement = function handleNewAnnouncement(data) {
+    try {
+      var announcement = JSON.parse(data);
+      openPopover && handleItemAdded(announcement);
+    } catch (error) {
+      console.log(error);
+    }
+    dispatch(setTotalUnreadMessages(totalUnreadMessages + 1));
+  };
+  var handleDeletedAnnouncement = function handleDeletedAnnouncement(_data) {
+    openPopover && getItems();
+    handleGetTotalUnread();
+  };
+  var handleUpdatedAnnouncement = function handleUpdatedAnnouncement(data) {
+    try {
+      var announcement = JSON.parse(data);
+      openPopover && setItems(function (state) {
+        return state.map(function (i) {
+          if (i.id !== announcement.id) return i;
+          return _extends({}, i, {
+            data: _extends({}, i.data, {
+              data: announcement.data.data
+            })
+          });
+        });
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  var handleMarkAsRead = function handleMarkAsRead() {
+    try {
+      var _temp2 = function _temp2() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp = _catch(function () {
+        return Promise.resolve(markAsReadAnnouncementsApi()).then(function () {
+          setItems(function (state) {
+            return state.map(function (i) {
+              return _extends({}, i, {
+                isRead: true
+              });
+            });
+          });
+          dispatch(setTotalUnreadMessages(0));
+        });
+      }, function (error) {
+        reactToastify.toast.error(getErrorMessage(t, error));
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleMarkAsReadById = function handleMarkAsReadById(id, loading) {
+    try {
+      var _temp4 = function _temp4() {
+        loading && dispatch(setLoading(false));
+      };
+      loading && dispatch(setLoading(true));
+      var _temp3 = _catch(function () {
+        return Promise.resolve(markAsReadAnnouncementByIdApi(id)).then(function () {
+          setItems(function (state) {
+            return state.map(function (i) {
+              return _extends({}, i, {
+                isRead: i.id === id ? true : i.isRead
+              });
+            });
+          });
+          dispatch(setTotalUnreadMessages(Math.max(0, totalUnreadMessages - 1)));
+        });
+      }, function (error) {
+        reactToastify.toast.error(getErrorMessage(t, error));
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleCloseAndMarkRead = function handleCloseAndMarkRead(data) {
+    handleClosePopover();
+    if (!data.isRead) handleMarkAsReadById(data.id);
+  };
+  var renderNotiLink = function renderNotiLink(children, data) {
+    return renderLink(children, data, function () {
+      return handleCloseAndMarkRead(data);
+    });
+  };
+  var cleanupPusher = function cleanupPusher() {
+    channel.current && channel.current.unbind(AnnouncementEvent.ReceivedNewNote, handleNewAnnouncement);
+    channel.current && channel.current.unbind(AnnouncementEvent.UpdatedNote, handleUpdatedAnnouncement);
+    channel.current && channel.current.unbind(AnnouncementEvent.DeletedNote, handleDeletedAnnouncement);
+    channelName.current && pusher && pusher.unsubscribe(channelName.current);
+  };
+  React.useEffect(function () {
+    if (concurrentConnectionPusher !== null && concurrentConnectionPusher !== void 0 && concurrentConnectionPusher.academyDomain && academyDomain && user !== null && user !== void 0 && user.id) {
+      var normalizedAcademyDomain = academyDomain.trim().toUpperCase();
+      channelName.current = ANNOUNCEMENT_CHANNEL.replace("{academy}", normalizedAcademyDomain).replace("{userId}", user.id);
+      channel.current = pusher.subscribe(channelName.current);
+      channel.current.bind(AnnouncementEvent.ReceivedNewNote, handleNewAnnouncement);
+      channel.current.bind(AnnouncementEvent.UpdatedNote, handleUpdatedAnnouncement);
+      channel.current.bind(AnnouncementEvent.DeletedNote, handleDeletedAnnouncement);
+    }
+    return cleanupPusher;
+  }, [academyDomain, user === null || user === void 0 ? void 0 : user.id, concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.academyDomain, totalUnreadMessages, openPopover, JSON.stringify(filter)]);
+  var handleGetTotalUnread = function handleGetTotalUnread() {
+    try {
+      var _temp5 = _catch(function () {
+        return Promise.resolve(getTotalNumberUnreadAnnouncementsApi()).then(function (res) {
+          dispatch(setTotalUnreadMessages(res.data));
+        });
+      }, function (error) {
+        console.log({
+          error: error
+        });
+      });
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React.useEffect(function () {
+    if (academyDomain && user !== null && user !== void 0 && user.id) handleGetTotalUnread();
+  }, [academyDomain, user === null || user === void 0 ? void 0 : user.id]);
+  React.useEffect(function () {
+    handleChangeFilter(openPopover ? DEFAULT_ANNOUNCEMENT_FILTER : {});
+  }, [openPopover]);
+  return React__default.createElement(material.Box, null, React__default.createElement(material.IconButton, {
+    ref: anchorEl,
+    className: "ms-2",
+    onClick: handleOpenPopover
+  }, React__default.createElement(material.Badge, {
+    badgeContent: totalUnreadMessages,
+    max: 9,
+    color: "error"
+  }, React__default.createElement(fa.FaBell, {
+    size: 20,
+    color: colors.blue[500]
+  }))), React__default.createElement(material.Popover, {
+    open: openPopover,
+    anchorEl: anchorEl.current,
+    onClose: handleClosePopover,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    slotProps: {
+      paper: {
+        sx: {
+          width: 360
+        }
+      }
+    }
+  }, React__default.createElement(material.Stack, {
+    height: "100%",
+    direction: "column"
+  }, React__default.createElement(material.Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    gap: 2,
+    sx: {
+      py: 2,
+      px: 2.5
+    }
+  }, React__default.createElement(material.Box, {
+    sx: {
+      flexGrow: 1
+    }
+  }, React__default.createElement(material.Typography, {
+    variant: "subtitle1"
+  }, t("notifications")), totalUnreadMessages > 0 && React__default.createElement(material.Typography, {
+    variant: "body2",
+    sx: {
+      color: "text.secondary"
+    }
+  }, t("you_have_n_unread_messages", {
+    n: totalUnreadMessages
+  })), renderViewNoteLink && React__default.createElement(material.Box, null, renderViewNoteLink(React__default.createElement(material.Typography, {
+    sx: {
+      fontWeight: 600,
+      color: grey[600],
+      fontSize: "14px",
+      "&:hover": {
+        textDecoration: "underline",
+        color: green[700]
+      }
+    }
+  }, t("view_notes")), handleClosePopover))), totalUnreadMessages > 0 && React__default.createElement(material.Stack, {
+    direction: "column"
+  }, React__default.createElement(material.Tooltip, {
+    title: t("mark_as_read")
+  }, React__default.createElement(material.IconButton, {
+    color: "primary",
+    onClick: handleMarkAsRead
+  }, React__default.createElement(bs.BsCheckAll, null))))), React__default.createElement(material.Divider, {
+    component: "div"
+  }), React__default.createElement(material.Stack, {
+    direction: "column",
+    sx: {
+      height: {
+        xs: 280,
+        sm: 400
+      },
+      py: 2
+    }
+  }, React__default.createElement(AnnouncementList, {
+    role: role,
+    items: items,
+    isLoading: isLoading,
+    onLoadMore: handleLoadMore,
+    renderLink: renderNotiLink
+  })))));
+};
+
 var MenuItemCustom = material.styled(MenuItem)(function () {
   return {
     '&.Mui-selected': {
@@ -38694,17 +40194,19 @@ var Header = function Header(_ref) {
     role = _ref.role,
     history = _ref.history,
     link = _ref.link,
-    onSignOut = _ref.onSignOut;
+    onSignOut = _ref.onSignOut,
+    renderNotificationLink = _ref.renderNotificationLink,
+    renderViewNoteLink = _ref.renderViewNoteLink;
   var Link = link;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var theme = material.useTheme();
-  var param = window.location.pathname;
   var language = reactRedux.useSelector(function (state) {
     var _state$common;
     return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.language;
   });
-  var isTeacherSide = param.includes('teacher');
+  var isTeacherSide = role === exports.Role.Teacher;
+  var isStudentSide = role === exports.Role.Student;
   var isLargerThanXL = material.useMediaQuery(theme.breakpoints.up("xl"));
   var academyDomain = reactRedux.useSelector(function (state) {
     var _state$common2, _state$common2$user;
@@ -38715,6 +40217,7 @@ var Header = function Header(_ref) {
     return state === null || state === void 0 ? void 0 : (_state$common3 = state.common) === null || _state$common3 === void 0 ? void 0 : (_state$common3$user = _state$common3.user) === null || _state$common3$user === void 0 ? void 0 : _state$common3$user.isLearningSpace;
   });
   var isAcademy = isLearningSpace || academyDomain;
+  var showAnnouncement = !isStudentSide && isAcademy;
   var logo = React.useMemo(function () {
     if (isTeacherSide) {
       return language === exports.Language.en ? React__default.createElement(teacherFullLogoEn, null) : React__default.createElement(teacherFullLogoKo, null);
@@ -38808,7 +40311,11 @@ var Header = function Header(_ref) {
   }, React__default.createElement(singleLogo, null))), React__default.createElement(material.Stack, {
     className: "me-2",
     display: "none"
-  }, React__default.createElement(TheLanguageDropdown, null))));
+  }, React__default.createElement(TheLanguageDropdown, null)), showAnnouncement && renderNotificationLink && React__default.createElement(AnnouncementContainer, {
+    role: role,
+    renderLink: renderNotificationLink,
+    renderViewNoteLink: renderViewNoteLink
+  })));
 };
 var HeaderLink = function HeaderLink(_ref3) {
   var data = _ref3.data,
@@ -38822,7 +40329,7 @@ var HeaderLink = function HeaderLink(_ref3) {
   return React__default.createElement(React.Fragment, null, render(data, isActive));
 };
 
-var useLayoutContext = function useLayoutContext(role, pusherRegisterUrls, showLoadingAcademy, domain) {
+var useLayoutContext = function useLayoutContext(role, showLoadingAcademy, domain) {
   var _currentPusher$connec2;
   if (showLoadingAcademy === void 0) {
     showLoadingAcademy = true;
@@ -38836,13 +40343,9 @@ var useLayoutContext = function useLayoutContext(role, pusherRegisterUrls, showL
     var _state$common;
     return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
   });
-  var isReadyRegisterPusher = reactRedux.useSelector(function (state) {
-    var _state$common2;
-    return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.isReadyRegisterPusher;
-  });
   var concurrentConnectionPusher = reactRedux.useSelector(function (state) {
-    var _state$common3;
-    return state === null || state === void 0 ? void 0 : (_state$common3 = state.common) === null || _state$common3 === void 0 ? void 0 : _state$common3.concurrentConnectionPusher;
+    var _state$common2;
+    return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.concurrentConnectionPusher;
   });
   var currentPusher = concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.pusher;
   var roles = (user === null || user === void 0 ? void 0 : user.roles) || [];
@@ -38923,53 +40426,36 @@ var useLayoutContext = function useLayoutContext(role, pusherRegisterUrls, showL
     }
   };
   var registerPusher = React.useCallback(function () {
-    if (!academyDomain && role !== exports.Role.Student) return;
-    if (includePathname(pusherRegisterUrls, pathname) || role === exports.Role.Student) {
-      var _currentPusher$connec;
-      if ((academyDomain !== (concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.academyDomain) || !academyDomain && !(concurrentConnectionPusher !== null && concurrentConnectionPusher !== void 0 && concurrentConnectionPusher.academyDomain) && !concurrentConnectionPusher.isRegistered) && isReadyRegisterPusher) {
-        var _headers;
-        if (currentPusher) {
-          currentPusher.disconnect();
-        }
-        var token = getAccessToken();
-        var pusher = new Pusher$1(PUSHER_CONFIG.key, {
-          cluster: PUSHER_CONFIG.cluster,
-          authEndpoint: (academyDomain ? BASE_URL : SUPER_ADMIN_BASE_URL) + "/api/auth/pusher",
-          auth: {
-            params: {},
-            headers: (_headers = {
-              Authorization: "Bearer " + token
-            }, _headers[AcademyHeaders] = academyDomain, _headers)
-          }
-        });
-        dispatch(setConcurrentConnectionPusher({
-          pusher: pusher,
-          academyDomain: academyDomain,
-          isRegistered: true
-        }));
-      } else if ((currentPusher === null || currentPusher === void 0 ? void 0 : (_currentPusher$connec = currentPusher.connection) === null || _currentPusher$connec === void 0 ? void 0 : _currentPusher$connec.state) === "disconnected") {
-        currentPusher.connect();
-      }
-      if (!isReadyRegisterPusher && !!currentPusher) {
-        currentPusher.connection.state !== "disconnected" && currentPusher.disconnect();
-        dispatch(setConcurrentConnectionPusher({
-          pusher: null,
-          academyDomain: "",
-          isRegistered: false
-        }));
-      }
-    } else {
-      if (!!currentPusher) {
-        currentPusher.connection.state !== "disconnected" && currentPusher.disconnect();
-        dispatch(setConcurrentConnectionPusher({
-          pusher: null,
-          academyDomain: "",
-          isRegistered: false
-        }));
+    var _currentPusher$connec;
+    if ((!academyDomain || !(user !== null && user !== void 0 && user.id)) && role !== exports.Role.Student) return;
+    if (academyDomain !== (concurrentConnectionPusher === null || concurrentConnectionPusher === void 0 ? void 0 : concurrentConnectionPusher.academyDomain) || !academyDomain && !(concurrentConnectionPusher !== null && concurrentConnectionPusher !== void 0 && concurrentConnectionPusher.academyDomain) && !concurrentConnectionPusher.isRegistered) {
+      var _headers;
+      if (currentPusher) {
+        currentPusher.disconnect();
       }
-      isReadyRegisterPusher && dispatch(setReadyRegisterPusher(false));
+      var token = getAccessToken();
+      var pusher = new Pusher$1(PUSHER_CONFIG.key, {
+        cluster: PUSHER_CONFIG.cluster,
+        authEndpoint: (academyDomain ? BASE_URL : SUPER_ADMIN_BASE_URL) + "/api/auth/pusher",
+        auth: {
+          params: {},
+          headers: (_headers = {
+            Authorization: "Bearer " + token
+          }, _headers[AcademyHeaders] = academyDomain, _headers)
+        }
+      });
+      dispatch(setConcurrentConnectionPusher({
+        pusher: pusher,
+        academyDomain: academyDomain,
+        isRegistered: true
+      }));
+    } else if ((currentPusher === null || currentPusher === void 0 ? void 0 : (_currentPusher$connec = currentPusher.connection) === null || _currentPusher$connec === void 0 ? void 0 : _currentPusher$connec.state) === "disconnected") {
+      currentPusher.connect();
     }
-  }, [pusherRegisterUrls.join(","), academyDomain, pathname, isReadyRegisterPusher, currentPusher === null || currentPusher === void 0 ? void 0 : (_currentPusher$connec2 = currentPusher.connection) === null || _currentPusher$connec2 === void 0 ? void 0 : _currentPusher$connec2.state, role]);
+    return function () {
+      currentPusher === null || currentPusher === void 0 ? void 0 : currentPusher.disconnect();
+    };
+  }, [user === null || user === void 0 ? void 0 : user.id, academyDomain, currentPusher === null || currentPusher === void 0 ? void 0 : (_currentPusher$connec2 = currentPusher.connection) === null || _currentPusher$connec2 === void 0 ? void 0 : _currentPusher$connec2.state, role]);
   React.useEffect(function () {
     !(user !== null && user !== void 0 && user.id) && loadInfo();
   }, [user === null || user === void 0 ? void 0 : user.id]);
@@ -38995,14 +40481,12 @@ var useLayoutContext = function useLayoutContext(role, pusherRegisterUrls, showL
 var LayoutContext = function LayoutContext(_ref) {
   var children = _ref.children,
     role = _ref.role,
-    _ref$pusherRegisterUr = _ref.pusherRegisterUrls,
-    pusherRegisterUrls = _ref$pusherRegisterUr === void 0 ? [] : _ref$pusherRegisterUr,
     showLoadingAcademy = _ref.showLoadingAcademy;
   var user = reactRedux.useSelector(function (state) {
     var _state$common;
     return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
   });
-  useLayoutContext(role, pusherRegisterUrls, showLoadingAcademy);
+  useLayoutContext(role, showLoadingAcademy);
   if (!(user !== null && user !== void 0 && user.email)) return React__default.createElement(LoadingComponent, {
     isLoading: true
   });else return React__default.createElement(React.Fragment, null, children);
@@ -39111,6 +40595,7 @@ exports.AcademyHeaders = AcademyHeaders;
 exports.AcademyList = AcademyList;
 exports.AcceptNoAcademy = AcceptNoAcademy;
 exports.ActionButtons = ActionButtons;
+exports.AnnouncementContainer = AnnouncementContainer;
 exports.AnswerCountSelector = AnswerCountSelector;
 exports.ArticleCategorySelector = ArticleCategorySelector;
 exports.ArticleDialog = ArticleDialog;
@@ -39168,6 +40653,8 @@ exports.MathTinyEditor = MathTinyEditor;
 exports.NewNoteButton = NewNoteButton;
 exports.NoAcademyHeaders = NoAcademyHeaders;
 exports.NotFound = NotFound;
+exports.NoteDrawer = NoteDrawer;
+exports.NoteTabs = NoteTabs;
 exports.NotesContainer = NotesContainer;
 exports.NotificationDetail = NotificationDetail;
 exports.NotificationList = NotificationList;
@@ -39248,7 +40735,7 @@ exports.setConcurrentConnectionPusher = setConcurrentConnectionPusher;
 exports.setLanguage = setLanguage;
 exports.setLoading = setLoading;
 exports.setReFetchUserAcademies = setReFetchUserAcademies;
-exports.setReadyRegisterPusher = setReadyRegisterPusher;
+exports.setTotalUnreadMessages = setTotalUnreadMessages;
 exports.setUser = setUser;
 exports.store = store;
 exports.timAgo = timAgo;