@local-civics/mgmt-ui 0.1.192 → 0.1.194

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
 import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, Modal, Loader, Container, Button, Title, UnstyledButton, Card, SimpleGrid, Tabs as Tabs$1, Stack as Stack$5, Grid, ActionIcon, LoadingOverlay, Select, Table as Table$l, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
-import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconChevronUp, IconChevronDown, IconSelector, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconChevronUp, IconChevronDown, IconSelector, IconInfoCircle, IconColorSwatch, IconPointer, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
 import { Link } from 'react-router-dom';
 import { showNotification, NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
@@ -14,35 +14,35 @@ import AvatarInit from 'avatar-initials';
 import { Chart } from 'react-charts';
 import { useUncontrolled } from '@mantine/hooks';
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$e = Object.defineProperty;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
+  if (source != null && __getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$y = createStyles((theme) => ({
+const useStyles$w = createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -53,8 +53,8 @@ const useStyles$y = createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$y();
-  return /* @__PURE__ */ React.createElement(Group, __spreadValues$d({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
+  const { classes } = useStyles$w();
+  return /* @__PURE__ */ React.createElement(Group, __spreadValues$e({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
 }
 
 const compact = (num) => {
@@ -64,7 +64,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$x = createStyles((theme, _params, getRef) => {
+const useStyles$v = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -117,7 +117,7 @@ const useStyles$x = createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$x();
+  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] = useState(initiallyOpened || hasActiveLinks || false);
@@ -162,26 +162,26 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
   ), hasLinks ? /* @__PURE__ */ React.createElement(Collapse, { in: opened }, items) : null);
 }
 
-var __defProp$c = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-const useStyles$w = createStyles((theme, _params, getRef) => {
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+const useStyles$u = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -212,7 +212,7 @@ const useStyles$w = 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$9(__spreadValues$c({}, theme.fn.focusStyles()), {
+    link: __spreadProps$a(__spreadValues$d({}, theme.fn.focusStyles()), {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
@@ -282,7 +282,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$w();
+  const { classes, cx } = useStyles$u();
   const [burgerOpen, setBurgerOpen] = React.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -295,12 +295,12 @@ function Navbar(props) {
     }
     return /* @__PURE__ */ React.createElement(
       LinksGroup,
-      __spreadProps$9(__spreadValues$c(__spreadValues$c({
+      __spreadProps$a(__spreadValues$d(__spreadValues$d({
         key: item.label,
         active: props.active
       }, item), context), {
         links: (item.links || []).map((link) => {
-          return __spreadValues$c(__spreadValues$c({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
+          return __spreadValues$d(__spreadValues$d({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
         })
       })
     );
@@ -325,7 +325,7 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$v = createStyles((theme) => ({
+const useStyles$t = createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -361,7 +361,7 @@ const useStyles$v = createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$v();
+  const { classes } = useStyles$t();
   return /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -375,7 +375,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$u = createStyles((theme) => ({
+const useStyles$s = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -416,7 +416,7 @@ const useStyles$u = createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$u();
+  const { classes, theme } = useStyles$s();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React.createElement(Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -433,7 +433,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$t = createStyles((theme) => ({
+const useStyles$r = createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -477,7 +477,7 @@ const useStyles$t = createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$t();
+  const { classes } = useStyles$r();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -497,7 +497,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
 };
 
-const useStyles$s = createStyles((theme) => ({
+const useStyles$q = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -512,7 +512,7 @@ const useStyles$s = createStyles((theme) => ({
   }
 }));
 const SplitButton$5 = (props) => {
-  const { classes, theme } = useStyles$s();
+  const { classes, theme } = useStyles$q();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -540,7 +540,7 @@ const SplitButton$5 = (props) => {
   ));
 };
 
-const useStyles$r = createStyles((theme) => ({
+const useStyles$p = createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -591,7 +591,7 @@ const useStyles$r = createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$r();
+  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.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.body }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React.createElement(Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -645,28 +645,28 @@ function useSortableData(items, config = { key: "", direction: null }) {
   return { items: sortedItems, requestSort, sortConfig };
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 function Table$k(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$8(__spreadValues$b({}, item), {
+    return props.items.map((item) => __spreadProps$9(__spreadValues$c({}, item), {
       status: item.isComplete ? 1 : 0
     }));
   }, [props.items]);
@@ -763,7 +763,7 @@ function Table$j(props) {
   ));
 }
 
-const useStyles$q = createStyles((theme) => ({
+const useStyles$o = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -776,7 +776,7 @@ const useStyles$q = createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$q();
+  const { classes } = useStyles$o();
   const [tab, setTab] = useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -874,7 +874,7 @@ function Table$i(props) {
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$p = createStyles((theme) => ({
+const useStyles$n = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -887,7 +887,7 @@ const useStyles$p = createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$p();
+  const { classes } = useStyles$n();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Key milestones that reflect skill development, micro-credentials, or academic progress"))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -1117,22 +1117,31 @@ const SplitButton$4 = (props) => {
   ));
 };
 
-const useStyles$o = 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]
+var __defProp$b = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
-  }
-}));
-function Th$2({ children, reversed, sorted, onSort }) {
-  const { classes } = useStyles$o();
-  const Icon = sorted ? reversed ? IconChevronUp : IconChevronDown : IconSelector;
-  return /* @__PURE__ */ React.createElement("th", { className: classes.th }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React.createElement(Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: 1.5 })))));
-}
+  return a;
+};
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function Table$c(props) {
+  React.useMemo(() => {
+    return props.items.map((item) => __spreadProps$8(__spreadValues$b({}, item), {
+      fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
+    }));
+  }, [props.items]);
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
@@ -1145,6 +1154,10 @@ function Table$c(props) {
       }
     );
   }
+  const sortStatus = {
+    columnAccessor: sortConfig.key,
+    direction: sortConfig.direction === "desc" ? "desc" : "asc"
+  };
   const openDeleteModal = (student) => openConfirmModal({
     title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
     centered: true,
@@ -1153,64 +1166,73 @@ function Table$c(props) {
     confirmProps: { color: "red" },
     onConfirm: () => props.onDelete && props.onDelete(student)
   });
-  const rows = sortedItems.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.email }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Box, { maw: 150 }, /* @__PURE__ */ React.createElement(
-    Select,
+  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(
+    DataTable,
     {
-      size: "sm",
-      value: row.isAdmin ? "educator" : "student",
-      onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
-      data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }]
+      verticalSpacing: 20,
+      sx: { minWidth: 700 },
+      highlightOnHover: true,
+      striped: true,
+      records: sortedItems,
+      idAccessor: "email",
+      sortStatus,
+      onSortStatusChange: (status) => requestSort(status.columnAccessor),
+      columns: [
+        {
+          accessor: "fullName",
+          title: "Name",
+          sortable: true,
+          render: (row) => /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))
+        },
+        {
+          accessor: "isAdmin",
+          title: "Role",
+          sortable: true,
+          render: (row) => /* @__PURE__ */ React.createElement(Box, { maw: 150 }, /* @__PURE__ */ React.createElement(
+            Select,
+            {
+              size: "sm",
+              disabled: row.readonly,
+              value: row.isAdmin ? "educator" : "student",
+              onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
+              data: [
+                { label: "Student", value: "student" },
+                { label: "Educator", value: "educator" }
+              ]
+            }
+          ))
+        },
+        {
+          accessor: "badgesEarned",
+          title: "Badges Earned",
+          sortable: true
+        },
+        {
+          accessor: "lessonsCompleted",
+          title: "Lessons Completed",
+          sortable: true
+        },
+        {
+          accessor: "hasAccount",
+          title: "Account Created?",
+          sortable: true,
+          render: (row) => row.hasAccount ? /* @__PURE__ */ React.createElement(IconCheck, { color: "green" }) : null
+        },
+        {
+          accessor: "lastActivity",
+          title: "Last Active",
+          sortable: true,
+          render: (row) => row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""
+        },
+        {
+          accessor: "actions",
+          title: "",
+          textAlignment: "right",
+          render: (row) => /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red", onClick: () => openDeleteModal(row) }, /* @__PURE__ */ React.createElement(IconTrash, { size: 16, stroke: 1.5 })))
+        }
+      ]
     }
-  ))), /* @__PURE__ */ React.createElement("td", null, row.badgesEarned), /* @__PURE__ */ React.createElement("td", null, row.lessonsCompleted), /* @__PURE__ */ React.createElement("td", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { color: "green" })), /* @__PURE__ */ React.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
-  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
-    Th$2,
-    {
-      sorted: sortConfig.key === "givenName",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("givenName")
-    },
-    "Name"
-  ), /* @__PURE__ */ React.createElement(
-    Th$2,
-    {
-      sorted: sortConfig.key === "isAdmin",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("isAdmin")
-    },
-    "Role"
-  ), /* @__PURE__ */ React.createElement(
-    Th$2,
-    {
-      sorted: sortConfig.key === "badgesEarned",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("badgesEarned")
-    },
-    "Badges Earned"
-  ), /* @__PURE__ */ React.createElement(
-    Th$2,
-    {
-      sorted: sortConfig.key === "lessonsCompleted",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("lessonsCompleted")
-    },
-    "Lessons Completed"
-  ), /* @__PURE__ */ React.createElement(
-    Th$2,
-    {
-      sorted: sortConfig.key === "hasAccount",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("hasAccount")
-    },
-    "Account Created?"
-  ), /* @__PURE__ */ React.createElement(
-    Th$2,
-    {
-      sorted: sortConfig.key === "lastActivity",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("lastActivity")
-    },
-    "Last Active"
-  ), /* @__PURE__ */ React.createElement("th", null), " ")), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  ));
 }
 
 var __defProp$a = Object.defineProperty;
@@ -1232,7 +1254,7 @@ var __spreadValues$a = (a, b) => {
   return a;
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-const useStyles$n = createStyles((theme) => ({
+const useStyles$m = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1265,7 +1287,7 @@ const useStyles$n = createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$n();
+  const { classes } = useStyles$m();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1366,7 +1388,7 @@ const Class = (props) => {
   ))))));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$n();
+  const { classes, theme } = useStyles$m();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -1412,7 +1434,7 @@ const DropzoneButton$1 = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$m = createStyles((theme) => ({
+const useStyles$l = createStyles((theme) => ({
   th: { padding: "0 !important" },
   control: {
     width: "100%",
@@ -1422,8 +1444,8 @@ const useStyles$m = createStyles((theme) => ({
     }
   }
 }));
-function Th$1({ children, reversed, sorted, onSort }) {
-  const { classes } = useStyles$m();
+function Th({ children, reversed, sorted, onSort }) {
+  const { classes } = useStyles$l();
   const Icon = sorted ? reversed ? IconChevronUp : IconChevronDown : IconSelector;
   return /* @__PURE__ */ React.createElement("th", { className: classes.th }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React.createElement(Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: 1.5 })))));
 }
@@ -1450,7 +1472,7 @@ function Table$b(props) {
   });
   const rows = sortedItems.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.classId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.name))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.description)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.numberOfStudents || 0)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
-    Th$1,
+    Th,
     {
       sorted: sortConfig.key === "name",
       reversed: sortConfig.direction === "desc",
@@ -1458,7 +1480,7 @@ function Table$b(props) {
     },
     "Class Name"
   ), /* @__PURE__ */ React.createElement("th", { style: { padding: "7px 16px" } }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm" }, "Description")), /* @__PURE__ */ React.createElement(
-    Th$1,
+    Th,
     {
       sorted: sortConfig.key === "numberOfStudents",
       reversed: sortConfig.direction === "desc",
@@ -1484,7 +1506,7 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
-const useStyles$l = createStyles((theme) => ({
+const useStyles$k = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1497,7 +1519,7 @@ const useStyles$l = createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$l();
+  const { classes } = useStyles$k();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1568,7 +1590,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$k = createStyles((theme) => ({
+const useStyles$j = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1582,7 +1604,7 @@ const useStyles$k = createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$k();
+  const { classes } = useStyles$j();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
 };
 
@@ -1720,7 +1742,7 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$j = createStyles((theme, props) => {
+const useStyles$i = createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1748,7 +1770,7 @@ const useStyles$j = createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$j(props);
+  const { classes } = useStyles$i(props);
   const from = props.from || "blue";
   const to = props.to || "green";
   const icon = props.icon || /* @__PURE__ */ React.createElement(IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1792,7 +1814,7 @@ var __objRest$1 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$i = createStyles((theme) => ({
+const useStyles$h = createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1837,7 +1859,7 @@ const TenantBanner = (_a) => {
     "className",
     "code"
   ]);
-  const { classes, cx, theme } = useStyles$i();
+  const { classes, cx, theme } = useStyles$h();
   const handleCopy = async () => {
     if (!code)
       return;
@@ -1977,7 +1999,7 @@ function Table$7(props) {
   ));
 }
 
-const useStyles$h = createStyles((theme) => ({
+const useStyles$g = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1992,7 +2014,7 @@ const useStyles$h = createStyles((theme) => ({
   }
 }));
 const SplitButton$3 = (props) => {
-  const { classes, theme } = useStyles$h();
+  const { classes, theme } = useStyles$g();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -2170,7 +2192,7 @@ function Stack$2(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$g = createStyles((theme) => ({
+const useStyles$f = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2183,7 +2205,7 @@ const useStyles$g = createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$g();
+  const { classes } = useStyles$f();
   const [tab, setTab] = useState("question");
   const numberOfStudents = props.students.length;
   const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -2327,7 +2349,7 @@ function Table$5(props) {
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$f = createStyles((theme) => ({
+const useStyles$e = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2340,7 +2362,7 @@ const useStyles$f = createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$e();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Bite-sized activities and learning experiences accelerating students achievement"))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -2357,7 +2379,7 @@ const Lessons = (props) => {
   ))));
 };
 
-const useStyles$e = createStyles((theme) => ({
+const useStyles$d = createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2376,7 +2398,7 @@ const useStyles$e = createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$d();
   return /* @__PURE__ */ React.createElement(Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React.createElement(Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React.createElement(TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React.createElement(Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React.createElement(
     Anchor,
     {
@@ -2404,7 +2426,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$d = createStyles((theme) => ({
+const useStyles$c = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2434,7 +2456,7 @@ const useStyles$d = createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$d();
+  const { classes } = useStyles$c();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
@@ -2460,7 +2482,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$c = createStyles((theme) => ({
+const useStyles$b = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2475,7 +2497,7 @@ const useStyles$c = createStyles((theme) => ({
   }
 }));
 const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$c();
+  const { classes, theme } = useStyles$b();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   const hasMenu = !!props.withOrganizationLink;
   return /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
@@ -2556,7 +2578,7 @@ var __spreadValues$6 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$b = createStyles((theme) => ({
+const useStyles$a = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2586,7 +2608,7 @@ const useStyles$b = createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$b();
+  const { classes } = useStyles$a();
   const form = useForm({
     initialValues: {
       userId: "",
@@ -2690,7 +2712,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$b();
+  const { classes, theme } = useStyles$a();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -2736,7 +2758,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$a = createStyles((theme) => ({
+const useStyles$9 = createStyles((theme) => ({
   form: {
     backgroundColor: theme.white,
     padding: theme.spacing.xl,
@@ -2799,7 +2821,7 @@ const useStyles$a = createStyles((theme) => ({
   }
 }));
 const StartAnonymousLesson = (props) => {
-  const { classes } = useStyles$a();
+  const { classes } = useStyles$9();
   const [name, setName] = React.useState("");
   return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Badge$1, { color: "violet" }, "Community"), /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.title), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, "You are now part of ", `${props.educatorName}'s`, " Class")), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(
     TextInput,
@@ -2856,7 +2878,7 @@ function TaskCard(props) {
   ));
 }
 
-const useStyles$9 = createStyles((theme) => ({
+const useStyles$8 = createStyles((theme) => ({
   action: {
     backgroundColor: "inherit",
     ":hover": {
@@ -2875,7 +2897,7 @@ const useStyles$9 = createStyles((theme) => ({
   }
 }));
 const TrialHome = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$8();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Badge$1, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -2935,7 +2957,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const useStyles$8 = createStyles((theme, { checked }) => ({
+const useStyles$7 = createStyles((theme, { checked }) => ({
   button: {
     display: "flex",
     alignItems: "center",
@@ -2977,7 +2999,7 @@ function ImageCheckbox(_a) {
     finalValue: false,
     onChange
   });
-  const { classes, cx } = useStyles$8({ checked: value });
+  const { classes, cx } = useStyles$7({ checked: value });
   return /* @__PURE__ */ React.createElement(
     UnstyledButton,
     __spreadProps$4(__spreadValues$4({}, others), {
@@ -3038,7 +3060,7 @@ var __spreadValues$3 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$7 = createStyles((theme) => ({
+const useStyles$6 = createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
     boxSizing: "border-box",
@@ -3101,7 +3123,7 @@ const OPTIONS = [
   { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
 ];
 const TrialRegistration = (props) => {
-  const { classes } = useStyles$7();
+  const { classes } = useStyles$6();
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
   const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
@@ -3216,7 +3238,7 @@ var __spreadValues$2 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const useStyles$6 = createStyles((theme, props) => ({
+const useStyles$5 = createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
     paddingBottom: theme.spacing.md,
@@ -3303,7 +3325,7 @@ const useStyles$6 = createStyles((theme, props) => ({
   }
 }));
 const App = (props) => {
-  const { classes } = useStyles$6(props);
+  const { classes } = useStyles$5(props);
   const account = useAccount(props.account, props.accounts, props.onAccountChange);
   return /* @__PURE__ */ React.createElement(
     AppShell,
@@ -3430,7 +3452,7 @@ function Table$3(props) {
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$5 = createStyles((theme) => ({
+const useStyles$4 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -3443,7 +3465,7 @@ const useStyles$5 = createStyles((theme) => ({
   }
 }));
 const Pathways = (props) => {
-  const { classes } = useStyles$5();
+  const { classes } = useStyles$4();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Pathways"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Pathways"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore all your unique pathway requirements in one clear space"))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
     Table$3,
     {
@@ -3453,7 +3475,7 @@ const Pathways = (props) => {
   ))));
 };
 
-const useStyles$4 = createStyles((theme) => ({
+const useStyles$3 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -3468,7 +3490,7 @@ const useStyles$4 = createStyles((theme) => ({
   }
 }));
 const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$4();
+  const { classes, theme } = useStyles$3();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -3525,7 +3547,10 @@ var __spreadValues$1 = (a, b) => {
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 function Table$2(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => {
+    console.group("Pathway Table Data Check");
+    console.log("Raw items from props:", props.items);
+    console.log("Categories available:", props.categories);
+    const mapped = props.items.map((item) => {
       const flatItem = __spreadProps$1(__spreadValues$1({}, item), {
         status: item.isComplete ? 1 : 0
       });
@@ -3536,6 +3561,19 @@ function Table$2(props) {
       }
       return flatItem;
     });
+    console.log("Transformed items (Flat):", mapped);
+    if (mapped.length > 0 && props.categories.length > 0) {
+      const firstStudent = mapped[0];
+      const firstCatId = props.categories[0].categoryId;
+      console.log(
+        `Matching Check: Does student have key [${firstCatId}]?`,
+        firstStudent.hasOwnProperty(firstCatId) ? "YES \u2705" : "NO \u274C",
+        "Value:",
+        firstStudent[firstCatId]
+      );
+    }
+    console.groupEnd();
+    return mapped;
   }, [props.items, props.categories]);
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
   if (props.items.length === 0) {
@@ -3600,21 +3638,6 @@ function Table$2(props) {
   ));
 }
 
-const useStyles$3 = 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$3();
-  const Icon = sorted ? reversed ? IconChevronUp : IconChevronDown : IconSelector;
-  return /* @__PURE__ */ React.createElement("th", { className: classes.th }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React.createElement(Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: 1.5 })))));
-}
 function Table$1(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
@@ -3628,27 +3651,40 @@ function Table$1(props) {
       }
     );
   }
-  const rows = sortedItems.map((row) => {
-    const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
-    return /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.badgeName)), /* @__PURE__ */ React.createElement("td", null, percentageCompletion, "%"));
-  });
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
-    Th,
-    {
-      sorted: sortConfig.key === "badgeName",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("badgeName")
-    },
-    "Badge Name"
-  ), /* @__PURE__ */ React.createElement(
-    Th,
+  const sortStatus = {
+    columnAccessor: sortConfig.key,
+    direction: sortConfig.direction === "desc" ? "desc" : "asc"
+  };
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
+    DataTable,
     {
-      sorted: sortConfig.key === "percentageCompletion",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("percentageCompletion")
-    },
-    "Badge Completion"
-  ))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+      verticalSpacing: "sm",
+      sx: { minWidth: 700 },
+      highlightOnHover: true,
+      striped: true,
+      records: sortedItems,
+      idAccessor: "badgeId",
+      sortStatus,
+      onSortStatusChange: (status) => requestSort(status.columnAccessor),
+      columns: [
+        {
+          accessor: "badgeName",
+          title: "Badge Name",
+          sortable: true,
+          render: (row) => /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href, color: "blue" }, row.badgeName)
+        },
+        {
+          accessor: "percentageCompletion",
+          title: "Badge Completion",
+          sortable: true,
+          render: (row) => {
+            const roundedValue = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
+            return `${roundedValue}%`;
+          }
+        }
+      ]
+    }
+  ));
 }
 
 const useStyles$2 = createStyles((theme) => ({
@@ -3777,7 +3813,18 @@ const SplitButton = (props) => {
 function Stack(props) {
   if (!props.items.length)
     return null;
-  return /* @__PURE__ */ React.createElement(Grid, { gutter: "md", sx: { padding: 20, minWidth: 700 } }, /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "By link")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "By badge")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "By Lesson")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "By Question")), props.items.map((row, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement("a", { href: row.link, target: "_blank", rel: "noopener noreferrer" }, "View File")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, null, row.badgeName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, null, row.lessonName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, null, row.question)))));
+  return /* @__PURE__ */ React.createElement(Grid, { gutter: "md", sx: { padding: 20, minWidth: 700 } }, /* @__PURE__ */ React.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "Link")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "Badge")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "Lesson")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "Question")), props.items.map((row, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, /* @__PURE__ */ React.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      component: "a",
+      href: row.link,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      size: "xs",
+      variant: "light"
+    },
+    "View File"
+  )), /* @__PURE__ */ React.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React.createElement(Text, null, row.badgeName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React.createElement(Text, null, row.lessonName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 3 }, /* @__PURE__ */ React.createElement(Text, null, row.question)))));
 }
 
 var __defProp = Object.defineProperty;