@local-civics/mgmt-ui 0.1.195 → 0.1.197

package/dist/index.js

@@ -62,7 +62,7 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$w = core.createStyles((theme) => ({
+const useStyles$v = core.createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -73,7 +73,7 @@ const useStyles$w = 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$w();
+  const { classes } = useStyles$v();
   return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$e({ 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)));
 }
 
@@ -84,7 +84,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$v = core.createStyles((theme, _params, getRef) => {
+const useStyles$u = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -137,7 +137,7 @@ const useStyles$v = core.createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$v();
+  const { classes, theme, cx } = useStyles$u();
   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);
@@ -183,8 +183,8 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
 }
 
 var __defProp$d = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
 var __hasOwnProp$d = Object.prototype.hasOwnProperty;
 var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
@@ -200,8 +200,8 @@ var __spreadValues$d = (a, b) => {
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-const useStyles$u = core.createStyles((theme, _params, getRef) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+const useStyles$t = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -232,7 +232,7 @@ const useStyles$u = 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$a(__spreadValues$d({}, theme.fn.focusStyles()), {
+    link: __spreadProps$9(__spreadValues$d({}, theme.fn.focusStyles()), {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
@@ -302,7 +302,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$u();
+  const { classes, cx } = useStyles$t();
   const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -315,7 +315,7 @@ function Navbar(props) {
     }
     return /* @__PURE__ */ React__namespace.createElement(
       LinksGroup,
-      __spreadProps$a(__spreadValues$d(__spreadValues$d({
+      __spreadProps$9(__spreadValues$d(__spreadValues$d({
         key: item.label,
         active: props.active
       }, item), context), {
@@ -345,7 +345,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$t = core.createStyles((theme) => ({
+const useStyles$s = core.createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -381,7 +381,7 @@ const useStyles$t = core.createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$t();
+  const { classes } = useStyles$s();
   return /* @__PURE__ */ React__namespace.createElement(
     core.Modal,
     {
@@ -395,7 +395,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$s = core.createStyles((theme) => ({
+const useStyles$r = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -436,7 +436,7 @@ const useStyles$s = core.createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$s();
+  const { classes, theme } = useStyles$r();
   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")));
   });
@@ -453,7 +453,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$r = core.createStyles((theme) => ({
+const useStyles$q = core.createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -497,7 +497,7 @@ const useStyles$r = core.createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$r();
+  const { classes } = useStyles$q();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -517,7 +517,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$q = core.createStyles((theme) => ({
+const useStyles$p = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -532,7 +532,7 @@ const useStyles$q = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$5 = (props) => {
-  const { classes, theme } = useStyles$q();
+  const { classes, theme } = useStyles$p();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -560,7 +560,7 @@ const SplitButton$5 = (props) => {
   ));
 };
 
-const useStyles$p = core.createStyles((theme) => ({
+const useStyles$o = core.createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -611,7 +611,7 @@ const useStyles$p = core.createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$p();
+  const { classes } = useStyles$o();
   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 }));
@@ -657,8 +657,6 @@ function useSortableData(items, config = { key: "", direction: null }) {
     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 });
   };
@@ -666,8 +664,8 @@ function useSortableData(items, config = { key: "", direction: null }) {
 }
 
 var __defProp$c = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
 var __hasOwnProp$c = Object.prototype.hasOwnProperty;
 var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -683,10 +681,10 @@ var __spreadValues$c = (a, b) => {
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function Table$k(props) {
   const preparedItems = React__namespace.useMemo(() => {
-    return props.items.map((item) => __spreadProps$9(__spreadValues$c({}, item), {
+    return props.items.map((item) => __spreadProps$8(__spreadValues$c({}, item), {
       status: item.isComplete ? 1 : 0
     }));
   }, [props.items]);
@@ -783,7 +781,7 @@ function Table$j(props) {
   ));
 }
 
-const useStyles$o = core.createStyles((theme) => ({
+const useStyles$n = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -796,7 +794,7 @@ const useStyles$o = core.createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$o();
+  const { classes } = useStyles$n();
   const [tab, setTab] = React.useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -894,7 +892,7 @@ function Table$i(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$n = core.createStyles((theme) => ({
+const useStyles$m = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -907,7 +905,7 @@ const useStyles$n = core.createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$n();
+  const { classes } = useStyles$m();
   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,
     {
@@ -1138,8 +1136,8 @@ const SplitButton$4 = (props) => {
 };
 
 var __defProp$b = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
 var __hasOwnProp$b = Object.prototype.hasOwnProperty;
 var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
@@ -1155,14 +1153,14 @@ var __spreadValues$b = (a, b) => {
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function Table$c(props) {
-  React__namespace.useMemo(() => {
-    return props.items.map((item) => __spreadProps$8(__spreadValues$b({}, item), {
+  const preparedItems = React__namespace.useMemo(() => {
+    return props.items.map((item) => __spreadProps$7(__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);
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1256,8 +1254,8 @@ function Table$c(props) {
 }
 
 var __defProp$a = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
 var __hasOwnProp$a = Object.prototype.hasOwnProperty;
 var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -1273,8 +1271,8 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-const useStyles$m = core.createStyles((theme) => ({
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+const useStyles$l = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1307,7 +1305,7 @@ const useStyles$m = core.createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$m();
+  const { classes } = useStyles$l();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1339,7 +1337,7 @@ const Class = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$7(__spreadValues$a({}, 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$6(__spreadValues$a({}, 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);
@@ -1408,7 +1406,7 @@ const Class = (props) => {
   ))))));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$m();
+  const { classes, theme } = useStyles$l();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -1454,21 +1452,6 @@ const DropzoneButton$1 = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$l = 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$l();
-  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) {
@@ -1490,24 +1473,49 @@ function Table$b(props) {
     confirmProps: { color: "red" },
     onConfirm: () => props.onDeleteClass(group)
   });
-  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,
-    {
-      sorted: sortConfig.key === "name",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("name")
-    },
-    "Class Name"
-  ), /* @__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,
+  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,
     {
-      sorted: sortConfig.key === "numberOfStudents",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("numberOfStudents")
-    },
-    "# of Students"
-  ), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+      withBorder: false,
+      borderRadius: "sm",
+      verticalSpacing: "sm",
+      sx: { minWidth: 700 },
+      highlightOnHover: true,
+      striped: true,
+      records: sortedItems,
+      idAccessor: "classId",
+      sortStatus,
+      onSortStatusChange: (status) => requestSort(status.columnAccessor),
+      columns: [
+        {
+          accessor: "name",
+          title: "Class Name",
+          sortable: true,
+          render: (row) => /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: row.href }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14, weight: 500 }, row.name))
+        },
+        {
+          accessor: "description",
+          title: "Description",
+          render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.description)
+        },
+        {
+          accessor: "numberOfStudents",
+          title: "# of Students",
+          sortable: true,
+          render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.numberOfStudents || 0)
+        },
+        {
+          accessor: "actions",
+          title: "",
+          render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red", onClick: () => openDeleteModal(row) }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 16, stroke: 1.5 })))
+        }
+      ]
+    }
+  ));
 }
 
 var __defProp$9 = Object.defineProperty;
@@ -2072,8 +2080,8 @@ function Stack$3(props) {
 }
 
 var __defProp$7 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
 var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
 var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
@@ -2089,13 +2097,18 @@ var __spreadValues$7 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 function Table$6(props) {
   const preparedItems = React__namespace.useMemo(() => {
-    return props.items.map((item) => __spreadProps$6(__spreadValues$7({}, item), {
+    return props.items.map((item) => __spreadProps$5(__spreadValues$7({}, item), {
       status: item.isComplete ? 2 : item.isStarted ? 1 : 0
     }));
   }, [props.items]);
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
+  const sortStatus = {
+    columnAccessor: sortConfig.key,
+    direction: sortConfig.direction === "desc" ? "desc" : "asc"
+  };
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -2107,11 +2120,6 @@ function Table$6(props) {
       }
     );
   }
-  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
-  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,
     {
@@ -2580,8 +2588,8 @@ function Table$4(props) {
 }
 
 var __defProp$6 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -2597,7 +2605,7 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const useStyles$a = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
@@ -2659,7 +2667,7 @@ const People = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$5(__spreadValues$6({}, 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$6({}, 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);
@@ -2947,8 +2955,8 @@ const TrialHome = (props) => {
 };
 
 var __defProp$4 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+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;
@@ -2964,7 +2972,7 @@ var __spreadValues$4 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3022,7 +3030,7 @@ function ImageCheckbox(_a) {
   const { classes, cx } = useStyles$7({ checked: value });
   return /* @__PURE__ */ React__namespace.createElement(
     core.UnstyledButton,
-    __spreadProps$4(__spreadValues$4({}, others), {
+    __spreadProps$3(__spreadValues$4({}, others), {
       onClick: () => handleChange(!value),
       className: cx(classes.button, className)
     }),
@@ -3043,7 +3051,7 @@ function ImageCheckbox(_a) {
 function SelectGrid(props) {
   const items = props.items.map((item) => /* @__PURE__ */ React__namespace.createElement(
     ImageCheckbox,
-    __spreadProps$4(__spreadValues$4({}, item), {
+    __spreadProps$3(__spreadValues$4({}, item), {
       key: item.title,
       onChange: (checked) => props.onChange(item.title, checked)
     })
@@ -3062,8 +3070,8 @@ function SelectGrid(props) {
 }
 
 var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
 var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -3079,7 +3087,7 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const useStyles$6 = core.createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
@@ -3189,7 +3197,7 @@ const TrialRegistration = (props) => {
       label: "School/Organization Name",
       placeholder: "What's the name of your school?",
       data: props.organizations.map((o) => {
-        return __spreadProps$3(__spreadValues$3({}, o), { value: o.displayName });
+        return __spreadProps$2(__spreadValues$3({}, o), { value: o.displayName });
       }),
       onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
       onChange: (next) => {
@@ -3201,7 +3209,7 @@ const TrialRegistration = (props) => {
     SelectGrid,
     {
       items: OPTIONS,
-      onChange: (e, checked) => setInterests(__spreadProps$3(__spreadValues$3({}, interests), { [e]: checked }))
+      onChange: (e, checked) => setInterests(__spreadProps$2(__spreadValues$3({}, interests), { [e]: checked }))
     }
   ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -3240,8 +3248,8 @@ const AdminProvider = (props) => {
 };
 
 var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
 var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
 var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
@@ -3257,7 +3265,7 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const useStyles$5 = core.createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
@@ -3353,7 +3361,7 @@ const App = (props) => {
       padding: "xs",
       navbar: props.navbar && /* @__PURE__ */ React__namespace.createElement(
         Navbar,
-        __spreadProps$2(__spreadValues$2({}, props.navbar.props), {
+        __spreadProps$1(__spreadValues$2({}, props.navbar.props), {
           onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
         })
       ),
@@ -3547,8 +3555,6 @@ function Stack$1(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;
@@ -3564,37 +3570,12 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 function Table$2(props) {
   const preparedItems = React__namespace.useMemo(() => {
-    var _a, _b;
-    console.group("Pathway Table Data Check");
-    console.log("Raw items from props:", props);
-    console.log("Raw items from prop.itemss:", 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
-      });
-      if (item.categoryPoints) {
-        Object.keys(item.categoryPoints).forEach((catId) => {
-          flatItem[catId] = item.categoryPoints[catId];
-        });
-      }
-      return flatItem;
-    });
-    console.log("Transformed items (Flat):", mapped);
-    const firstCatId = (_b = (_a = props.categories) == null ? void 0 : _a[0]) == null ? void 0 : _b.categoryId;
-    if (mapped.length > 0 && firstCatId) {
-      console.log(`Matching Check for ID [${firstCatId}]:`, mapped[0][firstCatId] !== void 0 ? "\u2705 FOUND" : "\u274C MISSING");
-      console.groupEnd();
-    } else if (props.categories) {
-      console.groupEnd();
-    }
-    return mapped;
-  }, [props.items, props.categories]);
+    return (props.items || []).map((item) => __spreadValues$1(__spreadValues$1({}, item), item.categoryPoints));
+  }, [props.items]);
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
-  if (props.items.length === 0) {
+  if (props.loading && props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
       {
@@ -3632,7 +3613,7 @@ function Table$2(props) {
           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",
+          accessor: "isComplete",
           title: "Status",
           sortable: true,
           titleStyle: { whiteSpace: "nowrap" },
@@ -3677,6 +3658,8 @@ function Table$1(props) {
     mantineDatatable.DataTable,
     {
       verticalSpacing: "sm",
+      withBorder: false,
+      borderRadius: "sm",
       sx: { minWidth: 700 },
       highlightOnHover: true,
       striped: true,
@@ -3689,7 +3672,23 @@ function Table$1(props) {
           accessor: "badgeName",
           title: "Badge Name",
           sortable: true,
-          render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href, color: "blue" }, row.badgeName)
+          render: (row) => /* @__PURE__ */ React__namespace.createElement(
+            core.Text,
+            {
+              component: reactRouterDom.Link,
+              to: row.href,
+              sx: (theme) => ({
+                color: theme.colorScheme === "dark" ? theme.white : theme.black,
+                textDecoration: "none",
+                fontWeight: 500,
+                "&:hover": {
+                  textDecoration: "underline",
+                  color: theme.colors.blue[6]
+                }
+              })
+            },
+            row.badgeName
+          )
         },
         {
           accessor: "percentageCompletion",