@local-civics/mgmt-ui 0.1.186 → 0.1.188

package/dist/index.js

@@ -34,35 +34,35 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$u = core.createStyles((theme) => ({
+const useStyles$w = core.createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -73,8 +73,8 @@ const useStyles$u = core.createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$u();
-  return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$9({ className: classes.user }, others), /* @__PURE__ */ React__namespace.createElement(core.Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React__namespace.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs" }, email)));
+  const { classes } = useStyles$w();
+  return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$a({ className: classes.user }, others), /* @__PURE__ */ React__namespace.createElement(core.Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React__namespace.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs" }, email)));
 }
 
 const compact = (num) => {
@@ -84,7 +84,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$t = core.createStyles((theme, _params, getRef) => {
+const useStyles$v = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -137,7 +137,7 @@ const useStyles$t = core.createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$t();
+  const { classes, theme, cx } = useStyles$v();
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = React.useState(initiallyOpened || hasActiveLinks || false);
@@ -182,26 +182,26 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
   ), hasLinks ? /* @__PURE__ */ React__namespace.createElement(core.Collapse, { in: opened }, items) : null);
 }
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$s = core.createStyles((theme, _params, getRef) => {
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+const useStyles$u = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -232,7 +232,7 @@ const useStyles$s = core.createStyles((theme, _params, getRef) => {
       color: theme.colorScheme === "dark" ? theme.white : theme.black,
       borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
     },
-    link: __spreadProps$5(__spreadValues$8({}, theme.fn.focusStyles()), {
+    link: __spreadProps$6(__spreadValues$9({}, theme.fn.focusStyles()), {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
@@ -301,7 +301,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$s();
+  const { classes, cx } = useStyles$u();
   const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -314,12 +314,12 @@ function Navbar(props) {
     }
     return /* @__PURE__ */ React__namespace.createElement(
       LinksGroup,
-      __spreadProps$5(__spreadValues$8(__spreadValues$8({
+      __spreadProps$6(__spreadValues$9(__spreadValues$9({
         key: item.label,
         active: props.active
       }, item), context), {
         links: (item.links || []).map((link) => {
-          return __spreadValues$8(__spreadValues$8({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
+          return __spreadValues$9(__spreadValues$9({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
         })
       })
     );
@@ -344,7 +344,7 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$r = core.createStyles((theme) => ({
+const useStyles$t = core.createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -380,7 +380,7 @@ const useStyles$r = core.createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$r();
+  const { classes } = useStyles$t();
   return /* @__PURE__ */ React__namespace.createElement(
     core.Modal,
     {
@@ -394,7 +394,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$q = core.createStyles((theme) => ({
+const useStyles$s = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -435,7 +435,7 @@ const useStyles$q = core.createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$q();
+  const { classes, theme } = useStyles$s();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -452,7 +452,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$p = core.createStyles((theme) => ({
+const useStyles$r = core.createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -496,7 +496,7 @@ const useStyles$p = core.createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$p();
+  const { classes } = useStyles$r();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -516,7 +516,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
 };
 
-const useStyles$o = core.createStyles((theme) => ({
+const useStyles$q = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -531,7 +531,7 @@ const useStyles$o = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$4 = (props) => {
-  const { classes, theme } = useStyles$o();
+  const { classes, theme } = useStyles$q();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -559,7 +559,7 @@ const SplitButton$4 = (props) => {
   ));
 };
 
-const useStyles$n = core.createStyles((theme) => ({
+const useStyles$p = core.createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -610,7 +610,7 @@ const useStyles$n = core.createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$n();
+  const { classes } = useStyles$p();
   const title = props.title || "Nothing to display";
   const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
   return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React__namespace.createElement(core.Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -682,7 +682,7 @@ function Table$i(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$m = core.createStyles((theme) => ({
+const useStyles$o = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -695,7 +695,7 @@ const useStyles$m = core.createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$m();
+  const { classes } = useStyles$o();
   const [tab, setTab] = React.useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -793,7 +793,7 @@ function Table$h(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$l = core.createStyles((theme) => ({
+const useStyles$n = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -806,7 +806,7 @@ const useStyles$l = core.createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$l();
+  const { classes } = useStyles$n();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Key milestones that reflect skill development, micro-credentials, or academic progress"))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -1036,7 +1036,63 @@ const SplitButton$3 = (props) => {
   ));
 };
 
+function useSortableData(items, config = { key: "", direction: null }) {
+  const [sortConfig, setSortConfig] = React.useState(config);
+  const sortedItems = React.useMemo(() => {
+    let sortableItems = [...items];
+    if (sortConfig.direction !== null) {
+      sortableItems.sort((a, b) => {
+        const aValue = a[sortConfig.key];
+        const bValue = b[sortConfig.key];
+        if (aValue === bValue)
+          return 0;
+        if (aValue === null || aValue === void 0)
+          return 1;
+        if (bValue === null || bValue === void 0)
+          return -1;
+        if (typeof aValue === "number" && typeof bValue === "number") {
+          return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
+        }
+        if (typeof aValue === "boolean" && typeof bValue === "boolean") {
+          return sortConfig.direction === "asc" ? aValue === bValue ? 0 : aValue ? 1 : -1 : aValue === bValue ? 0 : aValue ? -1 : 1;
+        }
+        if (aValue instanceof Date && bValue instanceof Date) {
+          return sortConfig.direction === "asc" ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime();
+        }
+        return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
+      });
+    }
+    return sortableItems;
+  }, [items, sortConfig]);
+  const requestSort = (key) => {
+    let direction = "asc";
+    if (sortConfig.key === key && sortConfig.direction === "asc") {
+      direction = "desc";
+    } else if (sortConfig.key === key && sortConfig.direction === "desc") {
+      direction = null;
+    }
+    setSortConfig({ key, direction });
+  };
+  return { items: sortedItems, requestSort, sortConfig };
+}
+
+const useStyles$m = core.createStyles((theme) => ({
+  th: { padding: "0 !important" },
+  control: {
+    width: "100%",
+    padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+    "&:hover": {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
+    }
+  }
+}));
+function Th$2({ children, reversed, sorted, onSort }) {
+  const { classes } = useStyles$m();
+  const Icon = sorted ? reversed ? icons.IconChevronUp : icons.IconChevronDown : icons.IconSelector;
+  return /* @__PURE__ */ React__namespace.createElement("th", { className: classes.th }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 14, stroke: 1.5 })))));
+}
 function Table$b(props) {
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1065,29 +1121,77 @@ function Table$b(props) {
       data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }]
     }
   ))), /* @__PURE__ */ React__namespace.createElement("td", null, row.badgesEarned), /* @__PURE__ */ React__namespace.createElement("td", null, row.lessonsCompleted), /* @__PURE__ */ React__namespace.createElement("td", null, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { color: "green" })), /* @__PURE__ */ React__namespace.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red" }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Role"), /* @__PURE__ */ React__namespace.createElement("th", null, "Badges Earned"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lessons Completed"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "Last Active"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement(
+    Th$2,
+    {
+      sorted: sortConfig.key === "givenName",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("givenName")
+    },
+    "Name"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$2,
+    {
+      sorted: sortConfig.key === "isAdmin",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("isAdmin")
+    },
+    "Role"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$2,
+    {
+      sorted: sortConfig.key === "badgesEarned",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("badgesEarned")
+    },
+    "Badges Earned"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$2,
+    {
+      sorted: sortConfig.key === "lessonsCompleted",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("lessonsCompleted")
+    },
+    "Lessons Completed"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$2,
+    {
+      sorted: sortConfig.key === "hasAccount",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("hasAccount")
+    },
+    "Account Created?"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$2,
+    {
+      sorted: sortConfig.key === "lastActivity",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("lastActivity")
+    },
+    "Last Active"
+  ), /* @__PURE__ */ React__namespace.createElement("th", null), " ")), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const useStyles$k = core.createStyles((theme) => ({
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+const useStyles$l = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1120,7 +1224,7 @@ const useStyles$k = core.createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$k();
+  const { classes } = useStyles$l();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1152,27 +1256,27 @@ const Class = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$4(__spreadValues$7({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
+    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$5(__spreadValues$8({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
       const values = form$1.values;
       form$1.reset();
       setOpened(false);
       props.onCreateMembers && props.onCreateMembers([values]);
     }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$7({
+      __spreadValues$8({
         withAsterisk: true,
         label: "Email",
         placeholder: "Email"
       }, form$1.getInputProps("email"))
     ), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$7({
+      __spreadValues$8({
         label: "Given name",
         placeholder: "Given name"
       }, form$1.getInputProps("givenName"))
     ), /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$7({
+      __spreadValues$8({
         label: "Family name",
         placeholder: "Family name"
       }, form$1.getInputProps("familyName"))
@@ -1221,7 +1325,7 @@ const Class = (props) => {
   ))))));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$k();
+  const { classes, theme } = useStyles$l();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -1267,47 +1371,7 @@ const DropzoneButton$1 = (props) => {
   } }, "Select file"));
 };
 
-function useSortableData(items, config = { key: "", direction: null }) {
-  const [sortConfig, setSortConfig] = React.useState(config);
-  const sortedItems = React.useMemo(() => {
-    let sortableItems = [...items];
-    if (sortConfig.direction !== null) {
-      sortableItems.sort((a, b) => {
-        const aValue = a[sortConfig.key];
-        const bValue = b[sortConfig.key];
-        if (aValue === bValue)
-          return 0;
-        if (aValue === null || aValue === void 0)
-          return 1;
-        if (bValue === null || bValue === void 0)
-          return -1;
-        if (typeof aValue === "number" && typeof bValue === "number") {
-          return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
-        }
-        if (typeof aValue === "boolean" && typeof bValue === "boolean") {
-          return sortConfig.direction === "asc" ? aValue === bValue ? 0 : aValue ? 1 : -1 : aValue === bValue ? 0 : aValue ? -1 : 1;
-        }
-        if (aValue instanceof Date && bValue instanceof Date) {
-          return sortConfig.direction === "asc" ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime();
-        }
-        return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
-      });
-    }
-    return sortableItems;
-  }, [items, sortConfig]);
-  const requestSort = (key) => {
-    let direction = "asc";
-    if (sortConfig.key === key && sortConfig.direction === "asc") {
-      direction = "desc";
-    } else if (sortConfig.key === key && sortConfig.direction === "desc") {
-      direction = null;
-    }
-    setSortConfig({ key, direction });
-  };
-  return { items: sortedItems, requestSort, sortConfig };
-}
-
-const useStyles$j = core.createStyles((theme) => ({
+const useStyles$k = core.createStyles((theme) => ({
   th: { padding: "0 !important" },
   control: {
     width: "100%",
@@ -1317,10 +1381,10 @@ const useStyles$j = core.createStyles((theme) => ({
     }
   }
 }));
-function Th({ children, reversed, sorted, onSort }) {
-  const { classes } = useStyles$j();
+function Th$1({ children, reversed, sorted, onSort }) {
+  const { classes } = useStyles$k();
   const Icon = sorted ? reversed ? icons.IconChevronUp : icons.IconChevronDown : icons.IconSelector;
-  return /* @__PURE__ */ React__namespace.createElement("th", { className: classes.th }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm" }, children), /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 14, stroke: 1.5 })))));
+  return /* @__PURE__ */ React__namespace.createElement("th", { className: classes.th }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 14, stroke: 1.5 })))));
 }
 function Table$a(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
@@ -1345,23 +1409,15 @@ function Table$a(props) {
   });
   const rows = sortedItems.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.classId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: row.href }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.name))), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.description)), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.numberOfStudents || 0)), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red" }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement(
-    Th,
+    Th$1,
     {
       sorted: sortConfig.key === "name",
       reversed: sortConfig.direction === "desc",
       onSort: () => requestSort("name")
     },
     "Class Name"
-  ), /* @__PURE__ */ React__namespace.createElement(
-    Th,
-    {
-      sorted: sortConfig.key === "description",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("description")
-    },
-    "Description"
-  ), /* @__PURE__ */ React__namespace.createElement(
-    Th,
+  ), /* @__PURE__ */ React__namespace.createElement("th", { style: { padding: "7px 16px" } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm" }, "Description")), /* @__PURE__ */ React__namespace.createElement(
+    Th$1,
     {
       sorted: sortConfig.key === "numberOfStudents",
       reversed: sortConfig.direction === "desc",
@@ -1371,23 +1427,23 @@ function Table$a(props) {
   ), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-const useStyles$i = core.createStyles((theme) => ({
+const useStyles$j = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1400,7 +1456,7 @@ const useStyles$i = core.createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$i();
+  const { classes } = useStyles$j();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1430,14 +1486,14 @@ const Classes = (props) => {
       props.onCreateClass && props.onCreateClass(values);
     }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$6({
+      __spreadValues$7({
         withAsterisk: true,
         label: "Name",
         placeholder: "Class name"
       }, form$1.getInputProps("name"))
     ), /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$6({
+      __spreadValues$7({
         label: "Description",
         placeholder: "A class for my first period English students"
       }, form$1.getInputProps("description"))
@@ -1471,7 +1527,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$h = core.createStyles((theme) => ({
+const useStyles$i = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1485,7 +1541,7 @@ const useStyles$h = core.createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$h();
+  const { classes } = useStyles$i();
   return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
 };
 
@@ -1623,7 +1679,7 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$g = core.createStyles((theme, props) => {
+const useStyles$h = core.createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1651,7 +1707,7 @@ const useStyles$g = core.createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$g(props);
+  const { classes } = useStyles$h(props);
   const from = props.from || "blue";
   const to = props.to || "green";
   const icon = props.icon || /* @__PURE__ */ React__namespace.createElement(icons.IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1667,35 +1723,35 @@ function CardGradient(props) {
   ), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
 }
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$f = core.createStyles((theme) => ({
+const useStyles$g = core.createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1740,7 +1796,7 @@ const TenantBanner = (_a) => {
     "className",
     "code"
   ]);
-  const { classes, cx, theme } = useStyles$f();
+  const { classes, cx, theme } = useStyles$g();
   const handleCopy = async () => {
     if (!code)
       return;
@@ -1757,9 +1813,9 @@ const TenantBanner = (_a) => {
   };
   return /* @__PURE__ */ React__namespace.createElement(
     core.Card,
-    __spreadValues$5({
+    __spreadValues$6({
       radius: "md",
-      style: __spreadValues$5({ backgroundImage: `url(${image})` }, style),
+      style: __spreadValues$6({ backgroundImage: `url(${image})` }, style),
       className: cx(classes.card, className)
     }, others),
     /* @__PURE__ */ React__namespace.createElement(
@@ -1857,7 +1913,7 @@ function Table$6(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$e = core.createStyles((theme) => ({
+const useStyles$f = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1872,7 +1928,7 @@ const useStyles$e = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$e();
+  const { classes, theme } = useStyles$f();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -2016,7 +2072,7 @@ function Stack$1(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$d = core.createStyles((theme) => ({
+const useStyles$e = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2029,7 +2085,7 @@ const useStyles$d = core.createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$d();
+  const { classes } = useStyles$e();
   const [tab, setTab] = React.useState("question");
   const numberOfStudents = props.students.length;
   const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -2173,7 +2229,7 @@ function Table$4(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$c = core.createStyles((theme) => ({
+const useStyles$d = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2186,7 +2242,7 @@ const useStyles$c = core.createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$d();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Bite-sized activities and learning experiences accelerating students achievement"))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -2203,7 +2259,7 @@ const Lessons = (props) => {
   ))));
 };
 
-const useStyles$b = core.createStyles((theme) => ({
+const useStyles$c = core.createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2222,7 +2278,7 @@ const useStyles$b = core.createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$b();
+  const { classes } = useStyles$c();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React__namespace.createElement(core.Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React__namespace.createElement(
     core.Anchor,
     {
@@ -2250,7 +2306,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$a = core.createStyles((theme) => ({
+const useStyles$b = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2280,7 +2336,7 @@ const useStyles$a = core.createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$a();
+  const { classes } = useStyles$b();
   return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
     core.Badge,
     {
@@ -2306,7 +2362,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$9 = core.createStyles((theme) => ({
+const useStyles$a = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2321,7 +2377,7 @@ const useStyles$9 = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$9();
+  const { classes, theme } = useStyles$a();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   const hasMenu = !!props.withOrganizationLink;
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
@@ -2383,26 +2439,26 @@ function Table$3(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Role"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "# of Classes"), /* @__PURE__ */ React__namespace.createElement("th", null, "Last Active"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$8 = core.createStyles((theme) => ({
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const useStyles$9 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2432,7 +2488,7 @@ const useStyles$8 = core.createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$9();
   const form$1 = form.useForm({
     initialValues: {
       userId: "",
@@ -2463,27 +2519,27 @@ const People = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$3(__spreadValues$4({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
+    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$4(__spreadValues$5({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
       const values = form$1.values;
       form$1.reset();
       setOpened(false);
       props.onCreateUsers && props.onCreateUsers([values]);
     }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$4({
+      __spreadValues$5({
         withAsterisk: true,
         label: "Email",
         placeholder: "Email"
       }, form$1.getInputProps("email"))
     ), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$4({
+      __spreadValues$5({
         label: "Given name",
         placeholder: "Given name"
       }, form$1.getInputProps("givenName"))
     ), /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$4({
+      __spreadValues$5({
         label: "Family name",
         placeholder: "Family name"
       }, form$1.getInputProps("familyName"))
@@ -2536,7 +2592,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$8();
+  const { classes, theme } = useStyles$9();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -2582,7 +2638,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$7 = core.createStyles((theme) => ({
+const useStyles$8 = core.createStyles((theme) => ({
   form: {
     backgroundColor: theme.white,
     padding: theme.spacing.xl,
@@ -2645,7 +2701,7 @@ const useStyles$7 = core.createStyles((theme) => ({
   }
 }));
 const StartAnonymousLesson = (props) => {
-  const { classes } = useStyles$7();
+  const { classes } = useStyles$8();
   const [name, setName] = React__namespace.useState("");
   return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.Container, null, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet" }, "Community"), /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, "You are now part of ", `${props.educatorName}'s`, " Class")), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(
     core.TextInput,
@@ -2669,24 +2725,24 @@ const StartAnonymousLesson = (props) => {
   ))))));
 };
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
 const BadgeGrid = (props) => {
-  const badges = props.badges.map((b) => /* @__PURE__ */ React__namespace.createElement(TaskCard, __spreadValues$3({ key: b.title }, b)));
+  const badges = props.badges.map((b) => /* @__PURE__ */ React__namespace.createElement(TaskCard, __spreadValues$4({ key: b.title }, b)));
   return /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 4, breakpoints: [{ maxWidth: "sm", cols: 1 }, { maxWidth: "md", cols: 3 }] }, badges);
 };
 function TaskCard(props) {
@@ -2702,7 +2758,7 @@ function TaskCard(props) {
   ));
 }
 
-const useStyles$6 = core.createStyles((theme) => ({
+const useStyles$7 = core.createStyles((theme) => ({
   action: {
     backgroundColor: "inherit",
     ":hover": {
@@ -2721,7 +2777,7 @@ const useStyles$6 = core.createStyles((theme) => ({
   }
 }));
 const TrialHome = (props) => {
-  const { classes } = useStyles$6();
+  const { classes } = useStyles$7();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React__namespace.createElement(
     core.Button,
     {
@@ -2750,38 +2806,38 @@ const TrialHome = (props) => {
   )), /* @__PURE__ */ React__namespace.createElement(core.Title, { maw: 500, mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected, check out these lessons to get started with your students!"), /* @__PURE__ */ React__namespace.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
 };
 
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+  if (source != null && __getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$5 = core.createStyles((theme, { checked }) => ({
+const useStyles$6 = core.createStyles((theme, { checked }) => ({
   button: {
     display: "flex",
     alignItems: "center",
@@ -2823,10 +2879,10 @@ function ImageCheckbox(_a) {
     finalValue: false,
     onChange
   });
-  const { classes, cx } = useStyles$5({ checked: value });
+  const { classes, cx } = useStyles$6({ checked: value });
   return /* @__PURE__ */ React__namespace.createElement(
     core.UnstyledButton,
-    __spreadProps$2(__spreadValues$2({}, others), {
+    __spreadProps$3(__spreadValues$3({}, others), {
       onClick: () => handleChange(!value),
       className: cx(classes.button, className)
     }),
@@ -2847,7 +2903,7 @@ function ImageCheckbox(_a) {
 function SelectGrid(props) {
   const items = props.items.map((item) => /* @__PURE__ */ React__namespace.createElement(
     ImageCheckbox,
-    __spreadProps$2(__spreadValues$2({}, item), {
+    __spreadProps$3(__spreadValues$3({}, item), {
       key: item.title,
       onChange: (checked) => props.onChange(item.title, checked)
     })
@@ -2865,26 +2921,26 @@ function SelectGrid(props) {
   );
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const useStyles$4 = core.createStyles((theme) => ({
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const useStyles$5 = core.createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
     boxSizing: "border-box",
@@ -2947,7 +3003,7 @@ const OPTIONS = [
   { description: "project-based learning", title: "Project-Based Learning", icon: icons.IconTools }
 ];
 const TrialRegistration = (props) => {
-  const { classes } = useStyles$4();
+  const { classes } = useStyles$5();
   const [firstName, setFirstName] = React__namespace.useState("");
   const [lastName, setLastName] = React__namespace.useState("");
   const [organization, setOrganization] = React__namespace.useState({ organizationId: "", displayName: "" });
@@ -2993,7 +3049,7 @@ const TrialRegistration = (props) => {
       label: "School/Organization Name",
       placeholder: "What's the name of your school?",
       data: props.organizations.map((o) => {
-        return __spreadProps$1(__spreadValues$1({}, o), { value: o.displayName });
+        return __spreadProps$2(__spreadValues$2({}, o), { value: o.displayName });
       }),
       onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
       onChange: (next) => {
@@ -3005,7 +3061,7 @@ const TrialRegistration = (props) => {
     SelectGrid,
     {
       items: OPTIONS,
-      onChange: (e, checked) => setInterests(__spreadProps$1(__spreadValues$1({}, interests), { [e]: checked }))
+      onChange: (e, checked) => setInterests(__spreadProps$2(__spreadValues$2({}, interests), { [e]: checked }))
     }
   ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -3043,26 +3099,26 @@ const AdminProvider = (props) => {
   );
 };
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const useStyles$3 = core.createStyles((theme, props) => ({
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const useStyles$4 = core.createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
     paddingBottom: theme.spacing.md,
@@ -3149,7 +3205,7 @@ const useStyles$3 = core.createStyles((theme, props) => ({
   }
 }));
 const App = (props) => {
-  const { classes } = useStyles$3(props);
+  const { classes } = useStyles$4(props);
   const account = useAccount(props.account, props.accounts, props.onAccountChange);
   return /* @__PURE__ */ React__namespace.createElement(
     core.AppShell,
@@ -3157,7 +3213,7 @@ const App = (props) => {
       padding: "xs",
       navbar: props.navbar && /* @__PURE__ */ React__namespace.createElement(
         Navbar,
-        __spreadProps(__spreadValues({}, props.navbar.props), {
+        __spreadProps$1(__spreadValues$1({}, props.navbar.props), {
           onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
         })
       ),
@@ -3276,7 +3332,7 @@ function Table$2(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$2 = core.createStyles((theme) => ({
+const useStyles$3 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -3289,7 +3345,7 @@ const useStyles$2 = core.createStyles((theme) => ({
   }
 }));
 const Pathways = (props) => {
-  const { classes } = useStyles$2();
+  const { classes } = useStyles$3();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Pathways"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Pathways"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore all your unique pathway requirements in one clear space"))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(
     Table$2,
     {
@@ -3299,7 +3355,7 @@ const Pathways = (props) => {
   ))));
 };
 
-const useStyles$1 = core.createStyles((theme) => ({
+const useStyles$2 = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -3314,7 +3370,7 @@ const useStyles$1 = core.createStyles((theme) => ({
   }
 }));
 const SplitButton = (props) => {
-  const { classes, theme } = useStyles$1();
+  const { classes, theme } = useStyles$2();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -3350,7 +3406,32 @@ function Stack(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
 }
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function Table$1(props) {
+  const preparedItems = React__namespace.useMemo(() => {
+    return props.items.map((item) => __spreadValues(__spreadProps(__spreadValues({}, item), {
+      status: item.isComplete
+    }), item.categoryPoints));
+  }, [props.items]);
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -3362,6 +3443,10 @@ function Table$1(props) {
       }
     );
   }
+  const sortStatus = {
+    columnAccessor: sortConfig.key,
+    direction: sortConfig.direction === "desc" ? "desc" : "asc"
+  };
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
     mantineDatatable.DataTable,
     {
@@ -3372,24 +3457,33 @@ function Table$1(props) {
       withColumnBorders: true,
       striped: true,
       highlightOnHover: true,
-      records: props.items,
+      records: sortedItems,
       idAccessor: "userId",
+      sortStatus,
+      onSortStatusChange: (status) => requestSort(status.columnAccessor),
       columns: [
         {
           accessor: "name",
           title: "Student Name",
-          render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email)))
+          sortable: true,
+          titleStyle: { whiteSpace: "nowrap" },
+          render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm", noWrap: true }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email)))
         },
         {
           accessor: "status",
-          render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Incomplete"))
+          title: "Status",
+          sortable: true,
+          titleStyle: { whiteSpace: "nowrap" },
+          render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: row.isComplete ? "blue" : "red", variant: "filled" }, row.isComplete ? "Complete" : "Incomplete")
         },
         ...props.categories.map((category) => ({
           accessor: category.categoryId,
           title: category.name,
+          sortable: true,
+          titleStyle: { whiteSpace: "nowrap" },
           render: (row) => {
             var _a, _b;
-            return /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "blue", variant: "filled" }, (_b = (_a = row.categoryPoints) == null ? void 0 : _a[category.categoryId]) != null ? _b : 0);
+            return /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "blue", variant: "filled" }, (_b = (_a = row.categoryPoints) == null ? void 0 : _a[category.categoryId]) != null ? _b : 0, " pts");
           }
         }))
       ],
@@ -3400,7 +3494,23 @@ function Table$1(props) {
   ));
 }
 
+const useStyles$1 = core.createStyles((theme) => ({
+  th: { padding: "0 !important" },
+  control: {
+    width: "100%",
+    padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+    "&:hover": {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
+    }
+  }
+}));
+function Th({ children, reversed, sorted, onSort }) {
+  const { classes } = useStyles$1();
+  const Icon = sorted ? reversed ? icons.IconChevronUp : icons.IconChevronDown : icons.IconSelector;
+  return /* @__PURE__ */ React__namespace.createElement("th", { className: classes.th }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 14, stroke: 1.5 })))));
+}
 function Table(props) {
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -3412,11 +3522,27 @@ function Table(props) {
       }
     );
   }
-  const rows = props.items.map((row) => {
+  const rows = sortedItems.map((row) => {
     const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
-    return /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href }, row.badgeName)), /* @__PURE__ */ React__namespace.createElement("td", null, percentageCompletion, "%"));
+    return /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href }, row.badgeName)), /* @__PURE__ */ React__namespace.createElement("td", null, percentageCompletion, "%"));
   });
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Badge Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Badge Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement(
+    Th,
+    {
+      sorted: sortConfig.key === "badgeName",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("badgeName")
+    },
+    "Badge Name"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th,
+    {
+      sorted: sortConfig.key === "percentageCompletion",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("percentageCompletion")
+    },
+    "Badge Completion"
+  ))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 const useStyles = core.createStyles((theme) => ({