@nualang/nualang-ui-components 0.1.1401 → 0.1.1402

package/dist/Forms/Settings/Tabs/General/General.js

@@ -56,7 +56,8 @@ function GeneralForm({
 }) {
   const {
     email,
-    preferred_username
+    given_name,
+    family_name
   } = values;
   const learnLang = values["custom:learnLang"] || "";
   const forLang = values["custom:forLang"] || "";
@@ -85,7 +86,7 @@ function GeneralForm({
     };
     getLearnLangLabel();
   }, [role, t]);
-  const isPreferredUsernameDisabled = username && (username.toLowerCase().includes("wayside") || username.toLowerCase().includes("google"));
+  const isNameDisabled = username && (username.toLowerCase().includes("wayside") || username.toLowerCase().includes("google"));
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: {
@@ -102,46 +103,54 @@ function GeneralForm({
         },
         children: t("required_field")
       })
-    }), !isGeneratedEmail && /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsx(Grid, {
       size: {
         xs: 12,
         md: 6
       },
       children: /*#__PURE__*/_jsx(TextField, {
-        id: "email",
-        name: "email",
-        label: t("email"),
-        value: email,
+        id: "given_name",
+        name: "given_name",
+        label: t("first_name"),
+        title: t("first_name"),
+        value: given_name,
         onChange: handleChange,
         onBlur: handleBlur,
-        helperText: touched.email ? t(errors.email) : "",
-        error: touched.email && Boolean(errors.email),
-        type: "email",
+        helperText: touched.given_name ? t(errors.given_name) : "",
+        error: touched.given_name && Boolean(errors.given_name),
+        type: "text",
         variant: "outlined",
-        disabled: true,
         fullWidth: true,
-        required: true
+        required: true,
+        disabled: isNameDisabled,
+        slotProps: {
+          htmlInput: {
+            "data-lpignore": "true",
+            autoComplete: "off",
+            maxLength: 32
+          }
+        }
       })
     }), /*#__PURE__*/_jsx(Grid, {
       size: {
         xs: 12,
-        md: isGeneratedEmail ? 12 : 6
+        md: 6
       },
       children: /*#__PURE__*/_jsx(TextField, {
-        id: "preferred_username",
-        name: "preferred_username",
-        label: t("name"),
-        title: t("name"),
-        value: preferred_username,
+        id: "family_name",
+        name: "family_name",
+        label: t("last_name"),
+        title: t("last_name"),
+        value: family_name,
         onChange: handleChange,
         onBlur: handleBlur,
-        helperText: touched.preferred_username ? t(errors.preferred_username) : "",
-        error: touched.preferred_username && Boolean(errors.preferred_username),
+        helperText: touched.family_name ? t(errors.family_name) : "",
+        error: touched.family_name && Boolean(errors.family_name),
         type: "text",
         variant: "outlined",
         fullWidth: true,
         required: true,
-        disabled: isPreferredUsernameDisabled,
+        disabled: isNameDisabled,
         slotProps: {
           htmlInput: {
             "data-lpignore": "true",
@@ -150,6 +159,26 @@ function GeneralForm({
           }
         }
       })
+    }), !isGeneratedEmail && /*#__PURE__*/_jsx(Grid, {
+      size: {
+        xs: 12,
+        md: 6
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        id: "email",
+        name: "email",
+        label: t("email"),
+        value: email,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        helperText: touched.email ? t(errors.email) : "",
+        error: touched.email && Boolean(errors.email),
+        type: "email",
+        variant: "outlined",
+        disabled: true,
+        fullWidth: true,
+        required: true
+      })
     }), /*#__PURE__*/_jsx(Grid, {
       size: {
         xs: 12,
@@ -241,7 +270,8 @@ export default function General({
   t = text => text,
   initialValues = {
     picture: null,
-    name: "Unknown",
+    given_name: "",
+    family_name: "",
     email: "Unknown",
     city: "",
     country: "",
@@ -261,8 +291,11 @@ export default function General({
 }) {
   const {
     email,
+    given_name,
+    family_name,
     preferred_username
   } = initialValues;
+  const displayName = [given_name, family_name].filter(Boolean).join(" ");
   const {
     classes
   } = useStyles();
@@ -271,7 +304,8 @@ export default function General({
   const [avatarOptionClicked, setAvatarOptionClicked] = useState(false);
   const [confirm] = useConfirm(t);
   const generalFormInitialValues = {
-    preferred_username,
+    given_name,
+    family_name,
     email,
     "custom:learnLang": initialValues["custom:learnLang"],
     "custom:forLang": initialValues["custom:forLang"],
@@ -316,12 +350,12 @@ export default function General({
                     display: "inline-block"
                   },
                   children: [values.picture ? /*#__PURE__*/_jsx(Avatar, {
-                    "aria-label": preferred_username,
+                    "aria-label": displayName,
                     src: values.picture,
                     className: classes.avatar,
                     alt: ""
                   }) : /*#__PURE__*/_jsx(Avatar, {
-                    "aria-label": preferred_username,
+                    "aria-label": displayName,
                     sx: theme => ({
                       backgroundColor: theme.palette.mode === "dark" ? "white" : "",
                       color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
@@ -378,7 +412,12 @@ export default function General({
                   variant: "h5",
                   component: "h5",
                   gutterBottom: true,
-                  children: preferred_username
+                  title: displayName || preferred_username,
+                  noWrap: true,
+                  sx: {
+                    maxWidth: "100%"
+                  },
+                  children: displayName || preferred_username
                 }), !isGeneratedEmail && /*#__PURE__*/_jsx(Typography, {
                   color: "textSecondary",
                   variant: "body1",
@@ -527,7 +566,8 @@ const isEmail = value => {
   return !emailRegex.test(value);
 };
 General.validationSchema = Yup.object().shape({
-  preferred_username: Yup.string().required("required").test("noSpecialChars", "no_special_characters", value => !containsInvalidSymbols(value)).test("is-not-email", "Email addresses are not allowed", value => isEmail(value)),
+  given_name: Yup.string().required("required").test("noSpecialChars", "no_special_characters", value => !containsInvalidSymbols(value)).test("is-not-email", "Email addresses are not allowed", value => isEmail(value)),
+  family_name: Yup.string().required("required").test("noSpecialChars", "no_special_characters", value => !containsInvalidSymbols(value)).test("is-not-email", "Email addresses are not allowed", value => isEmail(value)),
   name: Yup.string().test("noSpecialChars", "no_special_characters", value => !containsInvalidSymbols(value)).nullable(),
   "custom:forLang": Yup.string().nullable(),
   "custom:learnLang": Yup.string().nullable()

package/dist/Lists/Members/Members.js

@@ -1,15 +1,17 @@
-import { useEffect, useState, Fragment } from "react";
+import { useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
-import { Avatar, Box, Button, IconButton, List, ListItem, ListItemAvatar, ListItemText, ListSubheader, Typography, Tooltip, Menu, MenuItem, Chip } from "@mui/material";
+import { Avatar, Box, Button, IconButton, List, ListItem, ListItemAvatar, ListItemText, ListSubheader, TextField, Typography, Tooltip, Menu, MenuItem, Chip } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import Person from "@mui/icons-material/Person";
 import CommentIcon from "@mui/icons-material/Comment";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
+import SortIcon from "@mui/icons-material/Sort";
 import Skeleton from "@mui/material/Skeleton";
 import MembersNotFound from "../../Misc/NotFound/Members";
 import { DateTime } from "luxon";
 import useConfirm from "../../hooks/useConfirm";
 import HtmlTooltipComponent from "../../Misc/HtmlTooltipComponent/HtmlTooltipComponent";
+import { getStudentSortOrder, setStudentSortOrder, compareMembersBySortOrder, MEMBERS_SORT_ORDER_KEY } from "../../utils/studentSort";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
@@ -116,7 +118,7 @@ function Member(props) {
           })
         })
       }), /*#__PURE__*/_jsx(ListItemText, {
-        primary: featureFlags.classroomModes.readWrite && featureFlags.classroomModes.challenge && member.assignedLabels?.isReadWriteModeStudent && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsxs(Box, {
+        primary: featureFlags.classroomModes?.readWrite && featureFlags.classroomModes?.challenge && member.assignedLabels?.isReadWriteModeStudent && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
@@ -143,7 +145,7 @@ function Member(props) {
               color: "primary"
             })
           })]
-        }) : featureFlags.classroomModes.readWrite && member.assignedLabels?.isReadWriteModeStudent ? /*#__PURE__*/_jsxs(Box, {
+        }) : featureFlags.classroomModes?.readWrite && member.assignedLabels?.isReadWriteModeStudent ? /*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
@@ -160,7 +162,7 @@ function Member(props) {
               color: "primary"
             })
           })]
-        }) : featureFlags.classroomModes.challenge && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsxs(Box, {
+        }) : featureFlags.classroomModes?.challenge && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
@@ -193,7 +195,7 @@ function Member(props) {
     }), /*#__PURE__*/_jsxs(OverflowMenu, {
       anchorEl: anchorEl,
       handleClose: handleCloseMenu,
-      children: [featureFlags.classroomModes.readWrite && (member.assignedLabels?.isReadWriteModeStudent ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
+      children: [featureFlags.classroomModes?.readWrite && (member.assignedLabels?.isReadWriteModeStudent ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
         titleBold: t("heritage_speaker"),
         titleDesc: t("heritage_speaker_desc"),
         placement: "right",
@@ -229,7 +231,7 @@ function Member(props) {
             primary: t("mark_as_heritage_speaker")
           })
         })
-      })), featureFlags.classroomModes.challenge && (member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
+      })), featureFlags.classroomModes?.challenge && (member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
         titleBold: t("challenge_student"),
         titleDesc: t("challenge_student_desc"),
         placement: "right",
@@ -405,13 +407,56 @@ function Members({
   handleDeleteClassroomMember,
   handleUpdateClassroomMember,
   isClassroomArchived,
-  featureFlags = {}
+  featureFlags = {},
+  showSortControl = false
 }) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(MemberList, {
+  const [sortOrder, setSortOrder] = useState(() => getStudentSortOrder(MEMBERS_SORT_ORDER_KEY, "joinDate"));
+  const handleSortOrderChange = value => {
+    setSortOrder(value);
+    setStudentSortOrder(MEMBERS_SORT_ORDER_KEY, value);
+  };
+  const sortedMembers = useMemo(() => [...(members || [])].sort((a, b) => compareMembersBySortOrder(a, b, sortOrder)), [members, sortOrder]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showSortControl && t && /*#__PURE__*/_jsxs(Box, {
+      sx: theme => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 1,
+        px: 2,
+        py: 1,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : theme.palette.grey[50]
+      }),
+      children: [/*#__PURE__*/_jsx(SortIcon, {
+        fontSize: "small",
+        color: "action"
+      }), /*#__PURE__*/_jsxs(TextField, {
+        select: true,
+        size: "small",
+        id: "members_sort_by",
+        "data-cy": "members_sort_by",
+        label: t("sort_by"),
+        value: sortOrder,
+        onChange: e => handleSortOrderChange(e.target.value),
+        sx: {
+          minWidth: 170
+        },
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          value: "joinDate",
+          children: t("join_date")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "firstName",
+          children: t("first_name")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "lastName",
+          children: t("last_name")
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(MemberList, {
       t: t,
       placeholderImageUrl: placeholderImageUrl,
-      members: members ? members.sort((a, b) => a.createdAt < b.createdAt ? 1 : -1) : [],
+      members: sortedMembers,
       handleMessage: handleMessage,
       disableSubheader: disableSubheader,
       getMemberDetails: getMemberDetails,
@@ -420,7 +465,7 @@ function Members({
       handleUpdateClassroomMember: handleUpdateClassroomMember,
       isClassroomArchived: isClassroomArchived,
       featureFlags: featureFlags
-    })
+    })]
   });
 }
 Members.propTypes = {

package/dist/Lists/Members/Members.test.js

@@ -1,20 +1,81 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach } from "vitest";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import Members from "./Members";
 import { props } from "./Members.stories";
+import { MEMBERS_SORT_ORDER_KEY } from "../../utils/studentSort";
 import { jsx as _jsx } from "react/jsx-runtime";
+const renderMembers = (extraProps = {}) => {
+  const theme = createTheme();
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: /*#__PURE__*/_jsx(Members, {
+      ...props,
+      featureFlags: {
+        classroomModes: {}
+      },
+      ...extraProps
+    })
+  }));
+};
+const renderedUsernames = async () => {
+  await screen.findByText("Peter Parker");
+  const knownUsernames = new Set(props.members.map(m => m.username));
+  return Array.from(document.querySelectorAll(".MuiListItemText-primary")).map(el => el.textContent).filter(text => knownUsernames.has(text));
+};
+afterEach(() => {
+  cleanup();
+  localStorage.removeItem(MEMBERS_SORT_ORDER_KEY);
+});
 describe("Members", () => {
   it("renders without crashing", () => {
-    const theme = createTheme();
     const {
       unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(Members, {
-        ...props
-      })
-    }));
+    } = renderMembers();
+    unmount();
+  });
+  it("defaults to join date order (newest first)", async () => {
+    const {
+      unmount
+    } = renderMembers({
+      showSortControl: true
+    });
+    const usernames = await renderedUsernames();
+    expect(usernames).toEqual(["Indigo Young", "Indigo Garland", "Cellophane", "Spider", "Evelyn Tool", "Oran Tool", "Peter Parker", "Mary Jane", "Giles Posture", "Indigo Violet", "Norman Gordon", "Penny Tool"]);
+    unmount();
+  });
+  it("sorts by last name when the stored preference is lastName", async () => {
+    localStorage.setItem(MEMBERS_SORT_ORDER_KEY, "lastName");
+    const {
+      unmount
+    } = renderMembers({
+      showSortControl: true
+    });
+    const usernames = await renderedUsernames();
+    expect(usernames).toEqual(["Cellophane", "Indigo Garland", "Norman Gordon", "Mary Jane", "Peter Parker", "Giles Posture", "Spider", "Evelyn Tool", "Oran Tool", "Penny Tool", "Indigo Violet", "Indigo Young"]);
+    unmount();
+  });
+  it("sorts by first name when the stored preference is firstName", async () => {
+    localStorage.setItem(MEMBERS_SORT_ORDER_KEY, "firstName");
+    const {
+      unmount
+    } = renderMembers({
+      showSortControl: true
+    });
+    const usernames = await renderedUsernames();
+    expect(usernames).toEqual(["Cellophane", "Evelyn Tool", "Giles Posture", "Indigo Garland", "Indigo Violet", "Indigo Young", "Mary Jane", "Norman Gordon", "Oran Tool", "Penny Tool", "Peter Parker", "Spider"]);
+    unmount();
+  });
+  it("does not mutate the members prop", async () => {
+    localStorage.setItem(MEMBERS_SORT_ORDER_KEY, "lastName");
+    const originalOrder = props.members.map(m => m.memberId);
+    const {
+      unmount
+    } = renderMembers({
+      showSortControl: true
+    });
+    await screen.findByText("Peter Parker");
+    expect(props.members.map(m => m.memberId)).toEqual(originalOrder);
     unmount();
   });
 });

package/dist/Navigation/ResponsiveDrawer/ResponsiveDrawer.js

@@ -409,12 +409,13 @@ function ResponsiveDrawer({
       }), !isCollapsed && authenticated && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Typography, {
           component: "div",
-          sx: {
-            whiteSpace: "normal"
-          },
+          title: preferred_username,
           children: /*#__PURE__*/_jsx(Box, {
             sx: {
-              fontWeight: "fontWeightBold"
+              fontWeight: "fontWeightBold",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
             },
             children: preferred_username
           })

package/dist/Tables/Progress/Progress.js

@@ -18,6 +18,7 @@ import ProgressList from "./ProgressList";
 import { DateTime } from "luxon";
 import useProgressUrlParams from "./useProgressUrlParams";
 import { deriveCurrentView } from "./viewState";
+import { getStudentSortOrder, setStudentSortOrder, compareMembersBySortOrder, PROGRESS_SORT_ORDER_KEY } from "../../utils/studentSort";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Progress({
   t = text => text,
@@ -55,6 +56,11 @@ function Progress({
   const [bots, setBots] = useState([]);
   const reportFilters = ["percentage_complete", "correct_answer_percentage", "avg_pronunciation_score"];
   const [filter, setFilter] = useState(reportFilters[0]);
+  const [studentSortOrder, setStudentSortOrderState] = useState(() => getStudentSortOrder(PROGRESS_SORT_ORDER_KEY));
+  const handleStudentSortOrderChange = value => {
+    setStudentSortOrderState(value);
+    setStudentSortOrder(PROGRESS_SORT_ORDER_KEY, value);
+  };
   const reportTypes = useMemo(() => isVideoChatEnabled ? ["courses", "assignments", "discuss"] : ["courses", "assignments"], [isVideoChatEnabled]);
   const availableReportTypes = useMemo(() => memberId ? ["courses", "assignments"] : reportTypes, [memberId, reportTypes]);
   const [reportType, setReportType] = useState(availableReportTypes[0]);
@@ -150,6 +156,9 @@ function Progress({
       return true;
     });
   }, [members, memberId, selectedMembers, reportType, selectedAssignment, assignedStudents]);
+
+  // ProgressList (mobile) has no internal sorting, so sort its members here
+  const sortedListMembers = useMemo(() => [...classroomMembers].sort((a, b) => compareMembersBySortOrder(a, b, studentSortOrder)), [classroomMembers, studentSortOrder]);
   const currentView = deriveCurrentView({
     reportType,
     selectedAssignment,
@@ -358,7 +367,9 @@ function Progress({
         setReportType: setReportType,
         reportType: reportType,
         currentView: currentView,
-        memberId: memberId
+        memberId: memberId,
+        studentSortOrder: studentSortOrder,
+        setStudentSortOrder: handleStudentSortOrderChange
       }), reportType === "discuss" ? /*#__PURE__*/_jsxs(Grid, {
         container: true,
         spacing: 2,
@@ -407,7 +418,7 @@ function Progress({
         setSelectedAssignment: setSelectedAssignment,
         assignments: assignments,
         courses: coursesWithSections,
-        members: classroomMembers,
+        members: sortedListMembers,
         courseIds: courseIds,
         fetchMemberCourseCompletions: fetchMemberCourseCompletions,
         hideSorting: memberId ? true : false,
@@ -434,7 +445,9 @@ function Progress({
       setReportType: setReportType,
       reportType: reportType,
       currentView: currentView,
-      memberId: memberId
+      memberId: memberId,
+      studentSortOrder: studentSortOrder,
+      setStudentSortOrder: handleStudentSortOrderChange
     }), reportType === "discuss" ? /*#__PURE__*/_jsxs(Grid, {
       container: true,
       spacing: 2,
@@ -490,6 +503,7 @@ function Progress({
       fetchMemberCourseCompletions: fetchMemberCourseCompletions,
       hideSorting: memberId ? true : false,
       filter: filter,
+      studentSortOrder: studentSortOrder,
       roleplays: roleplays,
       bots: bots,
       courseIds: courseIds,

package/dist/Tables/Progress/ProgressTable.js

@@ -28,6 +28,7 @@ function ProgressTable({
   fetchMemberCourseCompletions = () => {},
   currentView,
   filter,
+  studentSortOrder,
   selectedCourse,
   setSelectedCourse,
   deleteCourseId,
@@ -74,6 +75,7 @@ function ProgressTable({
   useEffect(() => {
     const opts = {
       filter,
+      studentSortOrder,
       queryClient,
       currentCourseIds,
       currentView,
@@ -87,13 +89,14 @@ function ProgressTable({
       formatMemberAssignmentCompletions
     };
     setMembersState(stableSort(members, sortColumn, getComparator(sortDirection, opts))); // sort alphabetically by default
-  }, [filter, members]);
+  }, [filter, members, studentSortOrder]);
   const handleSort = property => {
     const isAsc = sortColumn === property && sortDirection === "asc";
     setSortDirection(isAsc ? "desc" : "asc");
     setSortColumn(property);
     const opts = {
       filter,
+      studentSortOrder,
       queryClient,
       currentCourseIds,
       currentView,

package/dist/Tables/Progress/ProgressTable.test.js

@@ -44,6 +44,30 @@ describe("ProgressTable (smoke)", () => {
     }));
     unmount();
   });
+  it("orders rows by last name when studentSortOrder is lastName", () => {
+    const {
+      container,
+      unmount
+    } = renderWithProviders(/*#__PURE__*/_jsx(ProgressTable, {
+      t: t => t,
+      courses: courses,
+      members: members,
+      currentView: "all_courses",
+      filter: "percentage_complete",
+      studentSortOrder: "lastName",
+      fetchMemberCourseCompletions: async () => ({
+        Items: []
+      }),
+      reportType: "courses",
+      courseIds: courses.map(c => c.courseId),
+      assignments: assignments,
+      roleplays: [],
+      bots: []
+    }));
+    const rowUsernames = Array.from(container.querySelectorAll('th[scope="row"]')).map(el => members.find(m => el.textContent.includes(m.username))?.username).filter(Boolean);
+    expect(rowUsernames).toEqual(["Cellophane", "Indigo Garland", "Norman Gordon", "Mary Jane", "Peter Parker", "Giles Posture", "Spider", "Evelyn Tool", "Oran Tool", "Penny Tool", "Indigo Violet", "Indigo Young"]);
+    unmount();
+  });
   it("renders course view without crashing", () => {
     const {
       unmount

package/dist/Tables/Progress/TableToolbar.js

@@ -19,7 +19,9 @@ const TableToolbar = ({
   setReportType,
   reportType,
   currentView,
-  memberId
+  memberId,
+  studentSortOrder,
+  setStudentSortOrder
 }) => {
   const {
     useQueryClient
@@ -79,6 +81,28 @@ const TableToolbar = ({
         },
         children: reportFilterOptions
       })
+    }), reportType !== "discuss" && !memberId && setStudentSortOrder && /*#__PURE__*/_jsx(Grid, {
+      children: /*#__PURE__*/_jsxs(TextField, {
+        select: true,
+        id: "sort_by",
+        name: t("sort_by"),
+        "data-cy": "sort_by",
+        label: t("sort_by"),
+        value: studentSortOrder,
+        onChange: e => setStudentSortOrder(e.target.value),
+        margin: "dense",
+        variant: "outlined",
+        sx: {
+          minWidth: 180
+        },
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          value: "firstName",
+          children: t("first_name")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "lastName",
+          children: t("last_name")
+        })]
+      })
     }), reportType !== "discuss" && !memberId && /*#__PURE__*/_jsx(Grid, {
       sx: {
         mt: 0.5,

package/dist/Tables/Progress/TableToolbar.test.js

@@ -66,4 +66,66 @@ describe("TableToolbar", () => {
     });
     expect(defaultProps.setReportType).toHaveBeenCalledWith("type2");
   });
+  it("renders sort selector when setStudentSortOrder is provided", () => {
+    const {
+      container,
+      unmount
+    } = renderWithProviders(/*#__PURE__*/_jsx(TableToolbar, {
+      ...defaultProps,
+      studentSortOrder: "firstName",
+      setStudentSortOrder: vi.fn()
+    }));
+    expect(container.querySelector('input[name="sort_by"]')).not.toBeNull();
+    unmount();
+  });
+  it("calls setStudentSortOrder when the sort selector changes", () => {
+    const setStudentSortOrder = vi.fn();
+    const {
+      container,
+      unmount
+    } = renderWithProviders(/*#__PURE__*/_jsx(TableToolbar, {
+      ...defaultProps,
+      studentSortOrder: "firstName",
+      setStudentSortOrder: setStudentSortOrder
+    }));
+    const nativeInput = container.querySelector('input[name="sort_by"]');
+    expect(nativeInput).not.toBeNull();
+    fireEvent.change(nativeInput, {
+      target: {
+        value: "lastName"
+      }
+    });
+    expect(setStudentSortOrder).toHaveBeenCalledWith("lastName");
+    unmount();
+  });
+  it("does not include a join date option in the sort selector", () => {
+    const {
+      getByRole,
+      unmount
+    } = renderWithProviders(/*#__PURE__*/_jsx(TableToolbar, {
+      ...defaultProps,
+      studentSortOrder: "firstName",
+      setStudentSortOrder: vi.fn()
+    }));
+    fireEvent.mouseDown(getByRole("combobox", {
+      name: "sort_by"
+    }));
+    expect(screen.queryByRole("option", {
+      name: "join_date"
+    })).toBeNull();
+    unmount();
+  });
+  it("hides sort selector for a single-student view", () => {
+    const {
+      container,
+      unmount
+    } = renderWithProviders(/*#__PURE__*/_jsx(TableToolbar, {
+      ...defaultProps,
+      memberId: "member-1",
+      studentSortOrder: "firstName",
+      setStudentSortOrder: vi.fn()
+    }));
+    expect(container.querySelector('input[name="sort_by"]')).toBeNull();
+    unmount();
+  });
 });

package/dist/Tables/Progress/sorting.js

@@ -1,3 +1,4 @@
+import { getStudentSortKey } from "../../utils/studentSort";
 export function descendingComparator(a, b, property, opts = {}) {
   const {
     assignments,
@@ -24,8 +25,8 @@ export function descendingComparator(a, b, property, opts = {}) {
       percentageAccessor = "percentComplete";
     }
     if (property === "student") {
-      a1 = a.username.toLowerCase();
-      b1 = b.username.toLowerCase();
+      a1 = getStudentSortKey(a.username || "", opts.studentSortOrder);
+      b1 = getStudentSortKey(b.username || "", opts.studentSortOrder);
     } else {
       const aCompletions = queryClient.getQueryData(["memberCourseProgress", a.memberId, currentCourseIds])?.Items ?? [];
       const bCompletions = queryClient.getQueryData(["memberCourseProgress", b.memberId, currentCourseIds])?.Items ?? [];

package/dist/Tables/Progress/sorting.test.js

@@ -13,6 +13,42 @@ describe("sorting helpers", () => {
     const sorted = stableSort(members, "student", getComparator("asc", opts));
     expect(sorted.map(m => m.username)).toEqual(["alice", "bob"]);
   });
+  it("sorts by last name when studentSortOrder is lastName", () => {
+    const members = [{
+      memberId: "1",
+      username: "Zoe Adams"
+    }, {
+      memberId: "2",
+      username: "Adam Zebra"
+    }];
+    const opts = {
+      studentSortOrder: "lastName"
+    };
+    const sorted = stableSort(members, "student", getComparator("asc", opts));
+    expect(sorted.map(m => m.username)).toEqual(["Zoe Adams", "Adam Zebra"]);
+  });
+  it("keeps first-name order without a studentSortOrder", () => {
+    const members = [{
+      memberId: "1",
+      username: "Zoe Adams"
+    }, {
+      memberId: "2",
+      username: "Adam Zebra"
+    }];
+    const sorted = stableSort(members, "student", getComparator("asc", {}));
+    expect(sorted.map(m => m.username)).toEqual(["Adam Zebra", "Zoe Adams"]);
+  });
+  it("does not throw when a username is missing", () => {
+    const members = [{
+      memberId: "1",
+      username: null
+    }, {
+      memberId: "2",
+      username: "Adam Zebra"
+    }];
+    const sorted = stableSort(members, "student", getComparator("asc", {}));
+    expect(sorted.map(m => m.memberId)).toEqual(["1", "2"]);
+  });
   it("sorts by course percentage in all_courses view", () => {
     const members = [{
       memberId: "1",

package/dist/utils/studentSort.js

@@ -0,0 +1,35 @@
+// Members list and Progress table each keep their own independent sort
+// preference, so choosing a sort order in one never changes the other.
+export const MEMBERS_SORT_ORDER_KEY = "membersSortOrder";
+export const PROGRESS_SORT_ORDER_KEY = "progressSortOrder";
+export const getStudentSortOrder = (key, fallback = "firstName") => {
+  try {
+    return localStorage.getItem(key) || fallback;
+  } catch {
+    return fallback;
+  }
+};
+export const setStudentSortOrder = (key, value) => {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // localStorage unavailable (e.g. blocked storage) — preference just won't persist
+  }
+};
+export const getLastName = (name = "") => {
+  const parts = name.trim().split(/\s+/);
+  return parts[parts.length - 1] || name;
+};
+
+// Sort key honoring the preference; ties on last name broken by full name.
+export const getStudentSortKey = (name = "", order = "firstName") => order === "lastName" ? `${getLastName(name)} ${name}`.toLowerCase() : (name || "").toLowerCase();
+export const compareStudentNames = (a, b, order) => getStudentSortKey(a, order).localeCompare(getStudentSortKey(b, order));
+
+// Compares member objects ({ username, createdAt }) by the shared sort
+// preference; joinDate (or any other value) falls back to most-recently-joined first.
+export const compareMembersBySortOrder = (a = {}, b = {}, order) => {
+  if (order === "firstName" || order === "lastName") {
+    return compareStudentNames(a.username || "", b.username || "", order);
+  }
+  return (b.createdAt || 0) - (a.createdAt || 0);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1401",
+  "version": "0.1.1402",
   "type": "module",
   "main": "dist/index.js",
   "files": [