@nualang/nualang-ui-components 0.1.1256 → 0.1.1258

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -19,7 +19,6 @@ var _OndemandVideo = _interopRequireDefault(require("@mui/icons-material/Ondeman
 var _AssignmentRoleplaySelection = _interopRequireDefault(require("../AssignmentRoleplaySelection/AssignmentRoleplaySelection"));
 var _CardElements = require("../../Cards/CardElements");
 var _Progress = require("@nualang/nualang-api-and-queries/APIs/Progress");
-var _mui = require("tss-react/mui");
 var _Queries = require("@nualang/nualang-api-and-queries/Queries");
 var _reactRouterDom = require("react-router-dom");
 var _Exercises = require("../../Lists/Exercises/Exercises");
@@ -369,7 +368,7 @@ function Topic({
   const theme = (0, _styles.useTheme)();
   const isLargeScreen = (0, _useMediaQuery.default)(theme.breakpoints.up("sm"));
   const topicRef = (0, _react.useRef)(null);
-  const [lasClickedCourseId, lasClickedSectionId, lasClickedTopicId, lastClickedAssignmentId] = lastClickedExerciseId?.split("|") || [];
+  const [lasClickedTopicId, lastClickedAssignmentId] = lastClickedExerciseId?.split("|") || [];
   const [isExerciseListOpen, setExerciseListOpen] = (0, _react.useState)(lasClickedTopicId === topicId && lastClickedAssignmentId === assignment.assignmentId);
   const [isWholeTopicSelected, setIsWholeTopicSelected] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
@@ -462,15 +461,16 @@ function Topic({
     setIsWholeTopicSelected(totalSelected === totalExpected);
   }, [selectedExercises, exercises, roleplays, bots, courseId, sectionId, topicId, games]);
   const handleSelectAll = () => {
-    if (isWholeTopicSelected) {
-      const removeExercises = selectedExercises?.filter(exercise => exercise.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}` || exercise.roleplayId && roleplays?.some(roleplay => roleplay.roleplayId === exercise.roleplayId) || exercise.botId && bots?.some(bot => bot.botId === exercise.botId));
+    const isAllSelected = selectedCount === totalCount;
+    if (isAllSelected) {
+      const removeExercises = selectedExercises?.filter(exercise => exercise.courseSectionTopicId === courseSectionTopicId || exercise.roleplayId && roleplays?.some(r => r.roleplayId === exercise.roleplayId) || exercise.botId && bots?.some(b => b.botId === exercise.botId));
       handleSelectExercise(removeExercises);
     } else {
       let exercisesToAdd = [];
       exercises?.filter(e => e.name !== "roleplays").forEach(exercise => {
-        if (!selectedExercises?.some(e => e.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}` && e.name === exercise.name)) {
+        if (!selectedExercises?.some(e => e.courseSectionTopicId === courseSectionTopicId && e.name === exercise.name)) {
           exercisesToAdd.push({
-            courseSectionTopicId: `${courseId}|${sectionId}|${topicId}`,
+            courseSectionTopicId: courseSectionTopicId,
             name: exercise.name
           });
         }
@@ -480,8 +480,8 @@ function Topic({
           if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.name === name)) {
             exercisesToAdd.push({
               roleplayId: roleplay.roleplayId,
-              name: name,
-              courseSectionTopicId: `${courseId}|${sectionId}|${topicId}`,
+              name,
+              courseSectionTopicId: courseSectionTopicId,
               roleplayName: roleplay.roleplayName
             });
           }
@@ -491,7 +491,7 @@ function Topic({
         if (!selectedExercises?.some(e => e.botId === bot.botId)) {
           exercisesToAdd.push({
             botId: bot.botId,
-            courseSectionTopicId: `${courseId}|${sectionId}|${topicId}`
+            courseSectionTopicId: courseSectionTopicId
           });
         }
       });
@@ -502,6 +502,16 @@ function Topic({
     setExerciseListOpen(!isExerciseListOpen);
   };
   const hasNonEmptyRoleplay = roleplays?.some(roleplay => roleplay?.script?.length !== 0 && roleplay?.script?.some(line => line.text !== undefined));
+  const courseSectionTopicId = `${courseId}|${sectionId}|${topicId}`;
+  const selectedRegular = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && !e.roleplayId && !e.botId && e.name !== "roleplays" && e.name !== "bots").length || 0;
+  const selectedRoleplays = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && e.roleplayId).length || 0;
+  const selectedBots = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && e.botId).length || 0;
+  const selectedCount = selectedRegular + selectedRoleplays + selectedBots;
+  const totalRegular = 3;
+  const totalRoleplays = (roleplays?.length || 0) * (games?.length || 0);
+  const totalBots = bots?.length || 0;
+  const totalCount = totalRegular + totalRoleplays + totalBots;
+  const isTopicDisabled = phrases.length === 0 && !hasNonEmptyRoleplay || isExerciseSelected;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Tooltip, {
       title: phrases.length === 0 ? t("topic_no_phrases") : "",
@@ -592,11 +602,20 @@ function Topic({
               })]
             })
           })]
+        }), !isTopicDisabled && useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+          label: `${selectedCount} / ${totalCount}`,
+          size: "medium",
+          disabled: selectedCount === 0,
+          color: selectedCount === totalCount ? 'primary' : 'default',
+          sx: {
+            fontWeight: 'bold',
+            marginRight: 3
+          }
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
           children: isExerciseListOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
         }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
-            checked: isWholeTopicSelected,
+            checked: selectedCount === totalCount,
             onClick: event => {
               event.stopPropagation();
             },

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -318,7 +318,33 @@ function CreateAssignmentDialog({
               label: t("select_classroom"),
               onChange: handleChange("classroomId"),
               required: true,
-              renderValue: selected => selected?.map(classroomId => classrooms?.find(c => c.classroomId === classroomId))?.map(c => c?.classroomName)?.filter(n => n).join(", "),
+              renderValue: selected => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  display: "inline-block",
+                  maxWidth: "100%",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: selected?.map(classroomId => classrooms?.find(c => c.classroomId === classroomId))?.map(c => c?.classroomName)?.filter(n => n).join(", ")
+              }),
+              MenuProps: {
+                PaperProps: {
+                  sx: {
+                    width: 'auto',
+                    maxWidth: 400
+                  }
+                },
+                getContentAnchorEl: null,
+                anchorOrigin: {
+                  vertical: "bottom",
+                  horizontal: "left"
+                },
+                transformOrigin: {
+                  vertical: "top",
+                  horizontal: "left"
+                }
+              },
               children: classrooms.filter(c => c.createdBy === username || c.collaborators.includes(userEmail)).map(c => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
                 value: c.classroomId,
                 disabled: c.classroomId === classroom,
@@ -326,14 +352,37 @@ function CreateAssignmentDialog({
                   sx: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 0.5
+                    justifyContent: "space-between",
+                    width: "100%"
                   },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
-                      src: c.picture
-                    })
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-                    primary: c.classroomName
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      flex: 1,
+                      minWidth: 0,
+                      gap: 1
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                      src: c.picture,
+                      sx: {
+                        width: 32,
+                        height: 32
+                      }
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                      primary: c.classroomName,
+                      primaryTypographyProps: {
+                        noWrap: true,
+                        sx: {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        }
+                      },
+                      sx: {
+                        minWidth: 0,
+                        flex: 1
+                      }
+                    })]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
                     disabled: c.classroomId === classroom,
                     checked: assignment.classroomId?.includes(c.classroomId) || c.classroomId === classroom

package/dist/Cards/CardElements/CardVisibility/CardVisibility.js

@@ -11,11 +11,13 @@ var _Public = _interopRequireDefault(require("@mui/icons-material/Public"));
 var _VpnLock = _interopRequireDefault(require("@mui/icons-material/VpnLock"));
 var _colors = require("@mui/material/colors");
 var _Archive = _interopRequireDefault(require("@mui/icons-material/Archive"));
+var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CardVisibility({
   t = text => text,
-  visibility = ""
+  visibility = "",
+  isCourseHidden = false
 }) {
   const isPublic = visibility === "public";
   let icon;
@@ -36,18 +38,18 @@ function CardVisibility({
     });
     color = "secondary";
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     sx: {
       position: "relative"
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
       color: color,
       icon: icon,
       label: t(visibility),
       sx: theme => ({
         position: "absolute",
-        bottom: "16px",
-        right: "16px",
+        bottom: "8px",
+        right: "8px",
         fontWeight: "bold",
         textTransform: "capitalize",
         pointerEvents: "none",
@@ -57,7 +59,26 @@ function CardVisibility({
           color: "white"
         })
       })
-    })
+    }), isCourseHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+      color: "success",
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisibilityOff.default, {
+        fontSize: "small"
+      }),
+      label: t("hidden"),
+      sx: theme => ({
+        position: "absolute",
+        bottom: "8px",
+        right: "108px",
+        fontWeight: "bold",
+        textTransform: "capitalize",
+        pointerEvents: "none",
+        boxShadow: theme.shadows[1],
+        backgroundColor: theme.palette.mode === "light" ? _colors.blue[700] : _colors.blue[500],
+        ...(theme.palette.mode === "light" && {
+          color: "white"
+        })
+      })
+    })]
   });
 }
 CardVisibility.propTypes = {

package/dist/Cards/Course/Course.js

@@ -19,6 +19,8 @@ var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
 var _OndemandVideo = _interopRequireDefault(require("@mui/icons-material/OndemandVideo"));
 var _PictureAsPdf = _interopRequireDefault(require("@mui/icons-material/PictureAsPdf"));
 var _School = _interopRequireDefault(require("@mui/icons-material/School"));
+var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
+var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
 var _Members = _interopRequireDefault(require("../../Dialogs/Members"));
 var _CourseOutline = _interopRequireDefault(require("../../Dialogs/CourseOutline"));
 var _Members2 = _interopRequireDefault(require("../../Lists/Members"));
@@ -43,16 +45,19 @@ function OverflowMenu({
   handleClickOpenMembers,
   isCreator,
   isMember,
-  viewCourse,
   startCourse,
   leaveCourse,
   handleRemoveCourse,
+  handleHideCourse,
+  handleUnhideCourse,
   isAdmin,
   handleDuplicateCourse,
   course,
   classroomId,
   isClassroomArchived = false,
-  canDuplicateCourse
+  canDuplicateCourse,
+  hiddenCourses = [],
+  isTeacher
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Menu, {
     id: `card-menu-${courseId}`,
@@ -99,7 +104,7 @@ function OverflowMenu({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
         children: t("change_settings")
       })]
-    }), !isClassroomArchived && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    }), !isClassroomArchived && isTeacher && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
         title: !canDuplicateCourse ? t("duplicate_disabled_tooltip") : "",
         disableHoverListener: canDuplicateCourse,
@@ -129,6 +134,24 @@ function OverflowMenu({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
         children: t("remove_course")
       })]
+    }), handleHideCourse && !hiddenCourses.includes(courseId) && !isClassroomArchived && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: () => handleHideCourse(courseId),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisibilityOff.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("hide_course")
+      })]
+    }), handleUnhideCourse && hiddenCourses.includes(courseId) && !isClassroomArchived && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: () => handleUnhideCourse(courseId),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Visibility.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("show_course")
+      })]
     })]
   });
 }
@@ -199,6 +222,8 @@ function CourseCard({
   handleLeaveCourse,
   handleClickCourse,
   handleRemoveCourse,
+  handleHideCourse,
+  handleUnhideCourse,
   membersProps,
   selectable,
   selected,
@@ -218,13 +243,16 @@ function CourseCard({
   classroomId,
   cardTitleComponent = "h2",
   isClassroomArchived = false,
-  email
+  email,
+  isTeacher,
+  hiddenCourses = []
 }) {
   const [placeholderRef, visible] = (0, _reactIntersectionObserver.useInView)({
     rootMargin: "320px",
     triggerOnce: true
   });
   const [isOutlineOpen, setIsOutlineOpen] = (0, _react.useState)(false);
+  const isCourseHidden = hiddenCourses.includes(course.courseId);
   const sectionsQuery = _Queries.courses.useCourseSections(async (courseId, filters) => {
     const response = await getCourseSections(courseId, filters);
     return response;
@@ -346,7 +374,8 @@ function CourseCard({
           placeholderRef: placeholderRef
         }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardVisibility, {
           t: t,
-          visibility: visibility
+          visibility: visibility,
+          isCourseHidden: isCourseHidden
         })]
       }), userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         "aria-label": `${t("go_to")} ${createdByName || `${courseName} ${t("creator")}`} ${t("profile")}`,
@@ -535,10 +564,14 @@ function CourseCard({
       startCourse: startCourse,
       leaveCourse: leaveCourse,
       handleRemoveCourse: handleRemoveCourse,
+      handleHideCourse: handleHideCourse,
+      handleUnhideCourse: handleUnhideCourse,
       handleDuplicateCourse: handleDuplicateCourse,
       course: course,
       isClassroomArchived: isClassroomArchived,
-      canDuplicateCourse: canDuplicateCourse
+      canDuplicateCourse: canDuplicateCourse,
+      hiddenCourses: hiddenCourses,
+      isTeacher: isTeacher
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Members.default, {
       getMemberDetails: getMemberDetails,
       t: t,

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -180,11 +180,11 @@ function GeneratePhrases({
   };
   const handleCancel = () => {
     setGeneratedPhrases([]);
-    handleClose();
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveDialog.default, {
     open: open,
-    handleClose: handleCancel,
+    closeText: generatedPhrases.length > 0 ? t("cancel") : t("close"),
+    handleClose: generatedPhrases.length > 0 ? handleCancel : handleClose,
     handleSubmit: generatedPhrases.length > 0 ? handleConfirm : handleGeneratePhrases,
     submitText: generatedPhrases.length > 0 ? t("confirm") : t("generate_phrases"),
     dialogTitle: isGenerating ? t("generating_phrases") : t("generate_phrases"),

package/dist/Lists/Courses/Courses.js

@@ -33,6 +33,7 @@ function CourseList({
   classroomId,
   isClassroomArchived = false,
   email,
+  isTeacher,
   ...otherProps
 }) {
   const [items, ref] = (0, _useListScroll.default)({
@@ -98,6 +99,7 @@ function CourseList({
             classroomId: classroomId,
             isClassroomArchived: isClassroomArchived,
             email: email,
+            isTeacher: isTeacher,
             ...otherProps
           }, course.courseId)
         }, course.courseId);
@@ -141,6 +143,7 @@ function CourseList({
             handleDuplicateCourse: handleDuplicateCourse,
             classroomId: classroomId,
             isClassroomArchived: isClassroomArchived,
+            isTeacher: isTeacher,
             ...otherProps
           }, course.courseId)
         }, course.courseId);

package/dist/Misc/AnswerResult/AnswerResult.js

@@ -204,7 +204,10 @@ function AnswerResult({
   transcript = "",
   nextScriptLine,
   phraseWordList = "",
-  currentPhrase = "",
+  currentPhrase = {
+    phrase: "",
+    alternativeVersions: []
+  },
   checkIsPronunciationCorrect = () => {},
   languageInformation,
   nualaCelebratingImage,

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -498,7 +498,6 @@ function Classroom({
   refreshAssignments,
   progressHelpers,
   preferred_username,
-  isUserInternal,
   assignedCourses,
   email,
   ...otherProps
@@ -778,7 +777,8 @@ function Classroom({
     banner,
     bannerXs,
     visibility,
-    enrolmentKey
+    enrolmentKey,
+    hiddenCourses = []
   } = classroom;
   const classroomCourses = classroom?.courses || [];
   const courseIds = classroomCourses.toString();
@@ -838,6 +838,16 @@ function Classroom({
       }, {});
     }
   };
+  const hideCourse = async courseId => {
+    handleUpdateClassroom({
+      hiddenCourses: [...hiddenCourses, courseId]
+    }, {});
+  };
+  const unhideCourse = async courseId => {
+    handleUpdateClassroom({
+      hiddenCourses: hiddenCourses.filter(id => id !== courseId)
+    }, {});
+  };
   const leaveClassroom = async id => {
     const confirmed = await confirm(t("leave_classroom"), t("leave_classroom_confirmation"));
     if (confirmed) {
@@ -861,7 +871,7 @@ function Classroom({
       className: classes.coursesTab,
       children: [isCoursesLoading || courses !== undefined && courses.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Courses.default, {
         t: t,
-        courses: courses !== undefined && courses.length ? courses : null,
+        courses: courses !== undefined && courses.length ? isCreator ? courses : courses.filter(course => !hiddenCourses.includes(course.courseId)) : null,
         handleStartCourse: handleStartCourse,
         handleLeaveCourse: handleLeaveCourse,
         handleViewCourseTopic: handleViewCourseTopic,
@@ -870,6 +880,8 @@ function Classroom({
         getMemberDetails: getMemberDetails,
         getMemberInfo: getMemberInfo,
         handleRemoveCourse: isCreator ? removeCourse : null,
+        handleHideCourse: isCreator ? hideCourse : null,
+        handleUnhideCourse: isCreator ? unhideCourse : null,
         memberPlaceholderImageUrl: memberPlaceholderImageUrl,
         getCourseSections: getCourseSections,
         getCourseMember: getCourseMember,
@@ -880,7 +892,9 @@ function Classroom({
         handleDuplicateCourse: duplicateCourse,
         classroomId: classroomId,
         isClassroomArchived: isArchived,
-        email: email
+        hiddenCourses: hiddenCourses,
+        email: email,
+        isTeacher: isTeacher
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         id: "add-courses-fab",
         children: isCreator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClassCourses.default, {

package/dist/Tables/TrialUsers/TrialUsers.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _mui = require("tss-react/mui");
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Styles = _interopRequireDefault(require("../../utils/Styles"));
+var _reactRouterDom = require("react-router-dom");
+var _material = require("@mui/material");
+var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Components
+
+function UsersTable({
+  classes,
+  refresh,
+  loading,
+  users,
+  propsRowChange,
+  propsPageChange
+}) {
+  const [page, setPage] = (0, _react.useState)(0);
+  const [rowsPerPage, setRowsPerPage] = (0, _react.useState)(5);
+  const handleChangePage = (event, page) => {
+    propsPageChange(page);
+    setPage(page);
+  };
+  const handleChangeRowsPerPage = event => {
+    setRowsPerPage(event.target.value);
+    propsRowChange(event.target.value);
+  };
+  const emptyRows = rowsPerPage - Math.min(rowsPerPage, users.length - page * rowsPerPage);
+  const handleDownloadCSV = data => {
+    const headers = ["Email", "ID", "Number of Classrooms", "Student Count", "Subscription Status", "Verification Status", "Expiration Date"];
+    const rows = data.map(row => [row.Attributes.email || "", row.Username || "", row.classrooms || 0, `${row.studentCount || 0}/200`, row.subscriptionStatus || 0, row.verificationStatus || "", row.subscriptionPeriodEnd ? new Date(row.subscriptionPeriodEnd * 1000).toLocaleDateString() : "-"]);
+    const csvContent = [headers, ...rows].map(e => e.map(val => `"${String(val).replace(/"/g, '""')}"`) // escape quotes
+    .join(",")).join("\n");
+    const blob = new Blob([csvContent], {
+      type: "text/csv;charset=utf-8;"
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", "users_table.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  console.log({
+    wah: users,
+    location: window.location.origin
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Toolbar, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "headline",
+        color: "inherit",
+        children: "Users"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.grow
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "outlined",
+        color: "primary",
+        onClick: () => handleDownloadCSV(users),
+        children: "Download CSV"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        "aria-label": "Refresh",
+        onClick: refresh,
+        size: "large",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Refresh.default, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Table, {
+      className: classes.table,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableHead, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: "Email"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: "Number of Classrooms"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: "Student Count"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: "Subscription Status"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: "Verification Status"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: "Expiration Date"
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableBody, {
+        children: [!loading ? users.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+              href: `${window.location.origin}/analytics#/activity/member/${row.Username}`,
+              target: "_blank",
+              color: "inherit",
+              children: row.Attributes.email || ""
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: row.classrooms || 0
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableCell, {
+            className: classes.tableCell,
+            children: [row.studentCount || 0, "/200"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: row.subscriptionStatus || 0
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: row.verificationStatus || 0
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            className: classes.tableCell,
+            children: row.subscriptionPeriodEnd ? new Date(row.subscriptionPeriodEnd * 1000).toLocaleDateString() : "-"
+          })]
+        }, row.Username)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          className: classes.loadingSpinner
+        }), emptyRows > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableRow, {
+          style: {
+            height: 49 * emptyRows
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+            colSpan: 7,
+            className: classes.tableCell
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TablePagination, {
+      rowsPerPageOptions: [5, 10, 50, 100],
+      component: "div",
+      count: users !== undefined && users.length > 0 ? users.length : 0,
+      rowsPerPage: rowsPerPage,
+      page: page,
+      backIconButtonProps: {
+        "aria-label": "Previous Page"
+      },
+      nextIconButtonProps: {
+        "aria-label": "Next Page"
+      },
+      onPageChange: handleChangePage,
+      onRowsPerPageChange: handleChangeRowsPerPage
+    })]
+  });
+}
+var _default = exports.default = (0, _mui.withStyles)(UsersTable, _Styles.default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1256",
+  "version": "0.1.1258",
   "main": "dist/index.js",
   "files": [
     "dist",