@local-civics/mgmt-ui 0.1.62 → 0.1.64

package/dist/index.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var notifications = require('@mantine/notifications');
-var icons = require('@tabler/icons');
 var React = require('react');
 var core = require('@mantine/core');
+var icons = require('@tabler/icons');
+var notifications = require('@mantine/notifications');
 var mantineDatatable = require('mantine-datatable');
 var dropzone = require('@mantine/dropzone');
 var form = require('@mantine/form');
@@ -31,7 +31,422 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
 
+const useStyles$j = core.createStyles((theme) => ({
+  link: {
+    width: 50,
+    height: 50,
+    borderRadius: theme.radius.md,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
+    "&:hover": {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[0]
+    }
+  },
+  active: {
+    "&, &:hover": {
+      backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
+      color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
+    }
+  }
+}));
+const data$1 = [
+  { icon: icons.IconHome2, label: "Home", href: "/home" },
+  { icon: icons.IconGauge, label: "Dashboard", href: "/dashboard" },
+  { icon: icons.IconCategory2, label: "Classes", href: "/classes" },
+  { icon: icons.IconAlbum, label: "Badges", href: "/badges" },
+  { icon: icons.IconLambda, label: "Lessons", href: "/lessons" }
+];
+const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
+  const { classes, cx } = useStyles$j();
+  return /* @__PURE__ */ React__namespace.createElement(core.Tooltip, { label, position: "right", transitionDuration: 0 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick, className: cx(classes.link, { [classes.active]: active }) }, /* @__PURE__ */ React__namespace.createElement(Icon, { stroke: 1.5 })));
+};
+const Navbar = (props) => {
+  const links = data$1.map((link) => /* @__PURE__ */ React__namespace.createElement(
+    NavbarLink,
+    {
+      key: link.label,
+      label: link.label,
+      icon: link.icon,
+      active: link.label === props.active,
+      onClick: () => props.navigate(link.href)
+    }
+  ));
+  return /* @__PURE__ */ React__namespace.createElement(core.Navbar, { width: { base: 80 }, p: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React__namespace.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React__namespace.createElement(core.Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { grow: true, mt: 50 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { justify: "center", spacing: 0 }, links)), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { justify: "center", spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+    NavbarLink,
+    {
+      icon: icons.IconSwitchHorizontal,
+      label: "Switch accounts",
+      onClick: props.onSwitchAccounts
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    NavbarLink,
+    {
+      icon: icons.IconLogout,
+      label: "Logout",
+      onClick: props.onLogout
+    }
+  ))));
+};
+
+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) => {
+  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]);
+    }
+  return a;
+};
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$5.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))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const useStyles$i = core.createStyles((theme) => ({
+  user: {
+    display: "block",
+    width: "100%",
+    padding: theme.spacing.md,
+    cursor: "default",
+    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
+  }
+}));
+function UserButton(_a) {
+  var _b = _a, { image, name, email, icon } = _b, others = __objRest$1(_b, ["image", "name", "email", "icon"]);
+  const { classes } = useStyles$i();
+  return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$5({ 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) => {
+  return Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(num || 0);
+};
+
+const useStyles$h = core.createStyles((theme, _params, getRef) => {
+  const icon = getRef("icon");
+  return {
+    control: {
+      fontWeight: 500,
+      width: "100%",
+      padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+      fontSize: theme.fontSizes.sm,
+      "&:hover": {
+        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0],
+        color: theme.colorScheme === "dark" ? theme.white : theme.black
+      }
+    },
+    controlButton: {
+      cursor: "pointer"
+    },
+    badge: {
+      pointerEvents: "none"
+    },
+    link: {
+      fontWeight: 500,
+      display: "block",
+      textDecoration: "none",
+      padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+      paddingLeft: 31,
+      marginLeft: 30,
+      fontSize: theme.fontSizes.sm,
+      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
+      borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
+      "&:hover": {
+        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0],
+        color: theme.colorScheme === "dark" ? theme.white : theme.black
+      }
+    },
+    linkActive: {
+      "&, &:hover": {
+        backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
+        color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color,
+        [`& .${icon}`]: {
+          color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
+        }
+      }
+    },
+    chevron: {
+      transition: "transform 200ms ease"
+    },
+    linkIcon: {
+      ref: icon
+    }
+  };
+});
+function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
+  const { classes, theme, cx } = useStyles$h();
+  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);
+  React__namespace.useEffect(() => {
+    setOpened(hasActiveLinks);
+  }, [hasActiveLinks]);
+  const ChevronIcon = theme.dir === "ltr" ? icons.IconChevronRight : icons.IconChevronLeft;
+  const items = (hasLinks ? links : []).map((link) => {
+    return /* @__PURE__ */ React__namespace.createElement(
+      core.Box,
+      {
+        className: cx(classes.link, { [classes.linkActive]: !!active && active === `${label}/${link.label}` }),
+        key: link.label
+      },
+      /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: "a", href: link.href }, link.label), !!link.notifications && /* @__PURE__ */ React__namespace.createElement(core.Badge, { size: "sm", variant: "filled", className: classes.badge }, compact(link.notifications)))
+    );
+  });
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+    core.Group,
+    {
+      className: cx(classes.control, {
+        [classes.linkActive]: !!active && !hasLinks && label === active,
+        [classes.controlButton]: hasLinks
+      }),
+      onClick: () => setOpened((o) => !o),
+      position: "apart",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__namespace.createElement(core.Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React__namespace.createElement(core.ThemeIcon, { variant: "light", size: 30 }, /* @__PURE__ */ React__namespace.createElement(Icon, { className: classes.linkIcon, size: 18 })), /* @__PURE__ */ React__namespace.createElement(core.Box, { ml: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: "a", href }, label))),
+    !!notifications && /* @__PURE__ */ React__namespace.createElement(core.Badge, { size: "sm", variant: "filled", className: classes.badge }, compact(notifications)),
+    hasLinks && /* @__PURE__ */ React__namespace.createElement(
+      ChevronIcon,
+      {
+        className: classes.chevron,
+        size: 14,
+        stroke: 1.5,
+        style: {
+          transform: opened ? `rotate(${theme.dir === "rtl" ? -90 : 90}deg)` : "none"
+        }
+      }
+    )
+  ), hasLinks ? /* @__PURE__ */ React__namespace.createElement(core.Collapse, { in: opened }, items) : null);
+}
+
+var __defProp$4 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = 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) => {
+  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]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const useStyles$g = core.createStyles((theme, _params, getRef) => {
+  const icon = getRef("icon");
+  return {
+    navbar: {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white
+    },
+    navHeader: {
+      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+        height: 71,
+        position: "absolute",
+        top: 0
+      }
+    },
+    navBody: {
+      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+        display: "none"
+      }
+    },
+    burger: {
+      [theme.fn.largerThan("sm")]: {
+        display: "none"
+      }
+    },
+    header: {
+      padding: theme.spacing.md,
+      paddingTop: 0,
+      marginLeft: -theme.spacing.md,
+      marginRight: -theme.spacing.md,
+      color: theme.colorScheme === "dark" ? theme.white : theme.black,
+      borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
+    },
+    link: __spreadProps$2(__spreadValues$4({}, theme.fn.focusStyles()), {
+      display: "flex",
+      alignItems: "center",
+      textDecoration: "none",
+      fontSize: theme.fontSizes.sm,
+      color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
+      padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+      borderRadius: theme.radius.sm,
+      fontWeight: 500,
+      "&:hover": {
+        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+        color: theme.colorScheme === "dark" ? theme.white : theme.black,
+        [`& .${icon}`]: {
+          color: theme.colorScheme === "dark" ? theme.white : theme.black
+        }
+      }
+    }),
+    linkIcon: {
+      ref: icon,
+      color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
+      marginRight: theme.spacing.sm
+    },
+    links: {
+      marginLeft: -theme.spacing.md,
+      marginRight: -theme.spacing.md
+    },
+    user: {
+      margin: theme.spacing.md,
+      marginLeft: 0,
+      marginRight: 0
+    },
+    linksInner: {
+      paddingBottom: theme.spacing.xl
+    },
+    footer: {
+      paddingTop: theme.spacing.md,
+      paddingBottom: theme.spacing.md,
+      borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`
+    },
+    active: {
+      "&, &:hover": {
+        backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
+        color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
+      }
+    }
+  };
+});
+const data = [
+  { label: "Home", icon: icons.IconHome2 },
+  { label: "Dashboard", icon: icons.IconGauge },
+  { label: "Classes", icon: icons.IconCategory2 },
+  { label: "Badges", icon: icons.IconAlbum },
+  { label: "Lessons", icon: icons.IconLambda },
+  {
+    label: "Organization",
+    icon: icons.IconBuilding,
+    links: [
+      { label: "Overview" },
+      { label: "People" }
+    ]
+  }
+];
+function NestedNavbar(props) {
+  const { classes, cx } = useStyles$g();
+  const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
+  const toggle = () => setBurgerOpen(!burgerOpen);
+  const links = data.map((item) => {
+    const context = props.links[item.label] || { notifications: 0, href: "" };
+    if (context.hidden) {
+      return null;
+    }
+    return /* @__PURE__ */ React__namespace.createElement(
+      LinksGroup,
+      __spreadProps$2(__spreadValues$4(__spreadValues$4({
+        key: item.label,
+        active: props.active
+      }, item), context), {
+        links: (item.links || []).map((link) => {
+          return __spreadValues$4(__spreadValues$4({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
+        })
+      })
+    );
+  });
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Navbar, { width: { sm: 300 }, p: "md", className: cx(classes.navbar, { [classes.navHeader]: !burgerOpen }) }, /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { className: classes.header }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React__namespace.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React__namespace.createElement(core.Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.Code, { sx: { fontWeight: 700 } }, props.version), /* @__PURE__ */ React__namespace.createElement(core.Burger, { opened: burgerOpen, onClick: toggle, className: classes.burger, size: "sm" })))), /* @__PURE__ */ React__namespace.createElement("div", { className: cx({ [classes.navBody]: !burgerOpen }) }, /* @__PURE__ */ React__namespace.createElement(
+    UserButton,
+    {
+      className: classes.user,
+      image: props.image,
+      name: props.name,
+      email: props.email
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { grow: true, className: classes.links, component: core.ScrollArea }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.linksInner }, links)), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { className: classes.footer }, !!props.onSwitchAccounts && /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
+    event.preventDefault();
+    props.onSwitchAccounts && props.onSwitchAccounts();
+  } }, /* @__PURE__ */ React__namespace.createElement(icons.IconSwitchHorizontal, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Change account")), /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
+    event.preventDefault();
+    props.onLogout();
+  } }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
+}
+
 const useStyles$f = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600,
+    margin: "auto",
+    "&::after": {
+      content: '""',
+      display: "block",
+      backgroundColor: theme.fn.primaryColor(),
+      width: 45,
+      height: 2,
+      marginTop: theme.spacing.sm,
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+  },
+  card: {
+    transition: "box-shadow 150ms ease, transform 100ms ease",
+    "&:hover": {
+      boxShadow: `${theme.shadows.md} !important`,
+      transform: "scale(1.05)"
+    }
+  },
+  cardTitle: {
+    "&::after": {
+      content: '""',
+      display: "block",
+      backgroundColor: theme.fn.primaryColor(),
+      width: 45,
+      height: 2,
+      marginTop: theme.spacing.sm
+    }
+  }
+}));
+const SwitchAccount = (props) => {
+  const { classes, theme } = useStyles$f();
+  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")));
+  });
+  return /* @__PURE__ */ React__namespace.createElement(
+    core.Modal,
+    {
+      centered: true,
+      fullScreen: true,
+      opened: props.opened,
+      onClose: () => props.onClose && props.onClose(),
+      size: "sm"
+    },
+    /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, props.loading && /* @__PURE__ */ React__namespace.createElement(core.Center, { style: { height: 400 } }, /* @__PURE__ */ React__namespace.createElement(core.Loader, null)), !props.loading && /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 3, spacing: "xl", breakpoints: [{ maxWidth: "md", cols: 1 }] }, options)))
+  );
+};
+
+const useStyles$e = core.createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -78,7 +493,7 @@ const useStyles$f = core.createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data }) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$e();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -97,7 +512,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$e = core.createStyles((theme) => ({
+const useStyles$d = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -112,14 +527,15 @@ const useStyles$e = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$e();
+  const { classes, theme } = useStyles$d();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
     {
+      component: "a",
+      href: props.href,
       className: classes.button,
-      variant: "gradient",
-      onClick: props.onPreviewClick
+      variant: "gradient"
     },
     "Preview"
   ), /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
@@ -148,7 +564,7 @@ const SplitButton$2 = (props) => {
   ))));
 };
 
-const useStyles$d = core.createStyles((theme) => ({
+const useStyles$c = core.createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -199,7 +615,7 @@ const useStyles$d = core.createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$d();
+  const { classes } = useStyles$c();
   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 }));
@@ -209,7 +625,7 @@ function Stack$2(props) {
   if (props.items.length === 0) {
     return null;
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dark.4", size: "lg" }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: "a", href: row.href, color: "dark.4", weight: "bold", size: "md" }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
   return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
 }
 
@@ -225,7 +641,7 @@ function Table$f(props) {
       }
     );
   }
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
     mantineDatatable.DataTable,
     {
       verticalSpacing: "sm",
@@ -240,7 +656,7 @@ function Table$f(props) {
       columns: [{
         accessor: "name",
         title: "Student Name",
-        render: (row) => /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, null, /* @__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))))
+        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, { component: "a", 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"))
@@ -266,12 +682,12 @@ function Table$e(props) {
   }
   const rows = props.items.map((row) => {
     const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
-    return /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, percentageCompletion, "%"));
+    return /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { href: row.href, component: "a" }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, percentageCompletion, "%"));
   });
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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)));
+  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$c = core.createStyles((theme) => ({
+const useStyles$b = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -284,22 +700,22 @@ const useStyles$c = core.createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$b();
   const [tab, setTab] = React.useState("lessons");
   const numberOfStudents = props.students.length;
   const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
-  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(
+  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.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
     core.Badge,
     {
       variant: "filled",
-      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
       size: "lg"
     },
     "Badges"
-  ), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+  )), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
     SplitButton$2,
     {
-      onPreviewClick: props.onPreviewClick,
+      href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
@@ -338,15 +754,13 @@ const Badge = (props) => {
     Table$e,
     {
       loading: props.loading,
-      items: props.lessons,
-      onClick: props.onLessonClick
+      items: props.lessons
     }
   ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
     Table$f,
     {
       loading: props.loading,
-      items: props.students,
-      onClick: props.onUserClick
+      items: props.students
     }
   )))))));
 };
@@ -366,6 +780,8 @@ function Table$d(props) {
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(
     core.UnstyledButton,
     {
+      component: "a",
+      href: row.href,
       sx: (theme) => ({
         display: "block",
         width: "100%",
@@ -374,15 +790,14 @@ function Table$d(props) {
         "&:hover": {
           backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
         }
-      }),
-      onClick: () => props.onClick && props.onClick(row)
+      })
     },
     /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__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.description)))
   ))));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+  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$b = core.createStyles((theme) => ({
+const useStyles$a = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -395,7 +810,7 @@ const useStyles$b = core.createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$b();
+  const { classes } = useStyles$a();
   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" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -407,8 +822,7 @@ const Badges = (props) => {
     Table$d,
     {
       loading: props.loading,
-      items: props.badges,
-      onClick: props.onBadgeClick
+      items: props.badges
     }
   ))));
 };
@@ -426,7 +840,7 @@ function Table$c(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onViewProfile(row) }, row.studentName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.className)));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Class Name"))), /* @__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", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Class Name"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 const units = [
@@ -466,7 +880,7 @@ function Table$b(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName + row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.lessonName), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, relativeTimeFromDates(new Date(row.updatedAt)))));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Updated At"))), /* @__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", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Updated At"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 function Table$a(props) {
@@ -482,7 +896,7 @@ function Table$a(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.impactStatement)));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Impact Statement"))), /* @__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", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Impact Statement"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 function Table$9(props) {
@@ -498,7 +912,7 @@ function Table$9(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React__namespace.createElement("td", null, row.description), /* @__PURE__ */ React__namespace.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "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", null, "Badge Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 function Table$8(props) {
@@ -514,7 +928,7 @@ function Table$8(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React__namespace.createElement("td", null, row.description), /* @__PURE__ */ React__namespace.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "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", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 const Dashboard = (props) => {
@@ -603,7 +1017,7 @@ const Dashboard = (props) => {
   )))))));
 };
 
-const useStyles$a = core.createStyles((theme) => ({
+const useStyles$9 = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -618,7 +1032,7 @@ const useStyles$a = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$a();
+  const { classes, theme } = useStyles$9();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   const hasMenu = !!props.withClassLink;
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
@@ -626,9 +1040,9 @@ const SplitButton$1 = (props) => {
     {
       className: hasMenu ? classes.button : "",
       leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 }),
-      onClick: props.onAddStudentsClick
+      onClick: props.onAddMembersClick
     },
-    "Add students"
+    "Add members"
   ), hasMenu && /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
     core.ActionIcon,
     {
@@ -653,7 +1067,7 @@ function Table$7(props) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
       {
-        title: "No students to display",
+        title: "No members to display",
         description: "You have not rostered any students yet.",
         loading: props.loading,
         icon: "groups"
@@ -668,13 +1082,21 @@ function Table$7(props) {
     confirmProps: { color: "red" },
     onConfirm: () => props.onDelete && props.onDelete(student)
   });
-  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.email }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onViewProfile && props.onViewProfile(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.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__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, "Student Name"), /* @__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)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.email }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: "a", href: row.href }, /* @__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.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Box, { maw: 100 }, /* @__PURE__ */ React__namespace.createElement(
+    core.Select,
+    {
+      size: "sm",
+      value: row.isAdmin ? "admin" : "member",
+      onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
+      data: [{ value: "member", label: "Member" }, { value: "admin", label: "Admin" }]
+    }
+  ))), /* @__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)));
 }
 
 var __defProp$3 = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
 var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -690,8 +1112,8 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const useStyles$9 = core.createStyles((theme) => ({
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const useStyles$8 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -702,6 +1124,9 @@ const useStyles$9 = core.createStyles((theme) => ({
   description: {
     maxWidth: 600
   },
+  autocomplete: {
+    maxWidth: 400
+  },
   wrapper: {
     position: "relative",
     marginBottom: 30
@@ -721,11 +1146,11 @@ const useStyles$9 = core.createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$8();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
-      studentId: "",
+      userId: "",
       email: "",
       givenName: "",
       familyName: "",
@@ -735,10 +1160,12 @@ const Class = (props) => {
       lastActivity: null,
       hasAccount: false,
       lessonsCompleted: 0,
-      badgesEarned: 0
+      badgesEarned: 0,
+      href: "",
+      isAdmin: false
     },
     validate: {
-      email: (value) => /^\S+@\S+$/.test(value) && props.students.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
+      email: (value) => /^\S+@\S+$/.test(value) && props.members.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
     }
   });
   const [opened, setOpened] = React.useState(false);
@@ -747,15 +1174,15 @@ const Class = (props) => {
     {
       opened,
       onClose: () => setOpened(false),
-      title: /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h5" }, "Add students"),
+      title: /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h5" }, "Add members"),
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps(__spreadValues$3({}, 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$1(__spreadValues$3({}, 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.onCreateStudents && props.onCreateStudents([values]);
+      props.onCreateMembers && props.onCreateMembers([values]);
     }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
       __spreadValues$3({
@@ -776,25 +1203,25 @@ const Class = (props) => {
         placeholder: "Family name"
       }, form$1.getInputProps("familyName"))
     )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
-  ), /* @__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(
+  ), /* @__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,
     {
       variant: "filled",
-      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
       size: "lg"
     },
     "Classes"
-  ), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
+  )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
     SplitButton$1,
     {
       withClassLink: props.withClassLink,
-      onAddStudentsClick: () => setOpened(true),
+      onAddMembersClick: () => setOpened(true),
       onCopyClassLinkClick: props.onCopyLinkClick
     }
   ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
     {
       title: "# OF STUDENTS",
-      value: props.students.length
+      value: props.members.length
     },
     {
       title: "ACCOUNT CREATION",
@@ -813,14 +1240,14 @@ const Class = (props) => {
     Table$7,
     {
       loading: props.loading,
-      items: props.students,
-      onDelete: props.onDeleteStudent,
-      onViewProfile: (student) => props.onStudentClick(student)
+      items: props.members,
+      onDelete: props.onDeleteMember,
+      onRoleChange: props.onChangeUserRole
     }
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$9();
+  const { classes, theme } = useStyles$8();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -833,8 +1260,8 @@ const DropzoneButton = (props) => {
         skipEmptyLines: true,
         worker: true,
         complete: function(results) {
-          const data = results.data.filter((v) => /^\S+@\S+$/.test(v.email) && props.students.filter((u) => u.email === v.email).length === 0);
-          data.length > 0 && props.onCreateStudents && props.onCreateStudents(data);
+          const data = results.data.filter((v) => /^\S+@\S+$/.test(v.email) && props.members.filter((u) => u.email === v.email).length === 0);
+          data.length > 0 && props.onCreateMembers && props.onCreateMembers(data);
           setLoading(false);
           props.close();
         }
@@ -886,8 +1313,8 @@ function Table$6(props) {
     confirmProps: { color: "red" },
     onConfirm: () => props.onDeleteClass(group)
   });
-  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.classId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick(row) }, /* @__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.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: 300 }, /* @__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, "Class Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.classId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: "a", href: 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", null, "Class Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "# of Students"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 var __defProp$2 = Object.defineProperty;
@@ -906,7 +1333,7 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-const useStyles$8 = core.createStyles((theme) => ({
+const useStyles$7 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -919,12 +1346,14 @@ const useStyles$8 = core.createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$7();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
       name: "",
-      description: ""
+      description: "",
+      href: "",
+      numberOfStudents: 0
     },
     validate: {
       name: (val) => val.length <= 6 ? "Name should include at least 6 characters" : null
@@ -959,7 +1388,7 @@ const Classes = (props) => {
         placeholder: "A class for my first period English students"
       }, form$1.getInputProps("description"))
     )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))
-  ), /* @__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" }, "Classes"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Organize students into classes"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "A class can be for a specific period of time, grade, team, or other cohorts.")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
+  ), /* @__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" }, "Classes"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Organize people into classes"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "A class can be for a specific period of time, grade, team, or other cohorts.")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
     core.Button,
     {
       onClick: () => setOpened(true),
@@ -972,17 +1401,23 @@ const Classes = (props) => {
       value: props.classes.length
     }
   ] }), /* @__PURE__ */ React__namespace.createElement(
+    core.Autocomplete,
+    {
+      placeholder: "Search for classes",
+      data: props.classes.map((item) => item.name),
+      onChange: props.onAutocompleteChange
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
     Table$6,
     {
       loading: props.loading,
       items: props.classes,
-      onDeleteClass: props.onDeleteClass,
-      onClick: props.onClassClick
+      onDeleteClass: props.onDeleteClass
     }
   ))))));
 };
 
-const useStyles$7 = core.createStyles((theme) => ({
+const useStyles$6 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -996,7 +1431,7 @@ const useStyles$7 = core.createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$7();
+  const { classes } = useStyles$6();
   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));
 };
 
@@ -1012,8 +1447,31 @@ function Table$5(props) {
       }
     );
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick(row) }, row.badgeName)), /* @__PURE__ */ React__namespace.createElement("td", 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"))));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Status"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
+    mantineDatatable.DataTable,
+    {
+      verticalSpacing: "sm",
+      sx: { minWidth: 700 },
+      withBorder: false,
+      borderRadius: "sm",
+      withColumnBorders: true,
+      striped: true,
+      highlightOnHover: true,
+      records: props.items,
+      idAccessor: "badgeId",
+      columns: [{
+        accessor: "name",
+        title: "Badge Name",
+        render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Text, null, row.badgeName))
+      }, {
+        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"))
+      }],
+      rowExpansion: {
+        content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$2, { items: record.lessons })
+      }
+    }
+  ));
 }
 
 function Table$4(props) {
@@ -1028,8 +1486,8 @@ function Table$4(props) {
       }
     );
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.questionName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.questionName), /* @__PURE__ */ React__namespace.createElement("td", null, row.answer.join(","))));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Question"), /* @__PURE__ */ React__namespace.createElement("th", null, "Answer"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.questionName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: "a", href: row.href }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.questionName), /* @__PURE__ */ React__namespace.createElement("td", null, row.answer.join(","))));
+  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, "Question"), /* @__PURE__ */ React__namespace.createElement("th", null, "Answer"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 function Table$3(props) {
@@ -1044,23 +1502,23 @@ function Table$3(props) {
       }
     );
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, row.rating.toLocaleString())));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: "a", href: row.href }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, row.rating.toLocaleString())));
+  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, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 const Student = (props) => {
   const [tab, setTab] = React.useState("badges");
   const numberOfBadges = props.badges.length;
   const percentageOfBadgesEarned = numberOfBadges > 0 ? props.badges.filter((b) => b.isComplete).length / numberOfBadges : 0;
-  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, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+  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, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
     core.Badge,
     {
       variant: "filled",
-      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
       size: "lg"
     },
     "Students"
-  ), /* @__PURE__ */ React__namespace.createElement(
+  )), /* @__PURE__ */ React__namespace.createElement(
     UserInfo,
     {
       variant: "compact",
@@ -1097,27 +1555,24 @@ const Student = (props) => {
     Table$5,
     {
       loading: props.loading,
-      items: props.badges,
-      onClick: props.onBadgeClick
+      items: props.badges
     }
   ), tab === "answers" && /* @__PURE__ */ React__namespace.createElement(
     Table$4,
     {
       loading: props.loading,
-      items: props.answers,
-      onClick: props.onAnswerClick
+      items: props.answers
     }
   ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
     Table$3,
     {
       loading: props.loading,
-      items: props.reflections,
-      onClick: props.onReflectionClick
+      items: props.reflections
     }
   ))))));
 };
 
-const useStyles$6 = core.createStyles((theme, props) => {
+const useStyles$5 = core.createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1145,7 +1600,7 @@ const useStyles$6 = core.createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$6(props);
+  const { classes } = useStyles$5(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 });
@@ -1189,7 +1644,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const useStyles$5 = core.createStyles((theme) => ({
+const useStyles$4 = core.createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1234,7 +1689,7 @@ const TenantBanner = (_a) => {
     "style",
     "className"
   ]);
-  const { classes, cx, theme } = useStyles$5();
+  const { classes, cx, theme } = useStyles$4();
   return /* @__PURE__ */ React__namespace.createElement(
     core.Card,
     __spreadValues$1({
@@ -1296,7 +1751,7 @@ const Home = (props) => {
     CardGradient,
     {
       title: "Classes",
-      description: "Organize students into classes.",
+      description: "Organize people into classes.",
       onClick: props.onClassesClick
     }
   )), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
@@ -1329,10 +1784,10 @@ function Table$2(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, row.rating.toLocaleString())));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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)));
+  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$4 = core.createStyles((theme) => ({
+const useStyles$3 = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1347,14 +1802,15 @@ const useStyles$4 = core.createStyles((theme) => ({
   }
 }));
 const SplitButton = (props) => {
-  const { classes, theme } = useStyles$4();
+  const { classes, theme } = useStyles$3();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
     {
+      component: "a",
+      href: props.href,
       className: classes.button,
-      variant: "gradient",
-      onClick: props.onPreviewClick
+      variant: "gradient"
     },
     "Preview"
   ), /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
@@ -1388,7 +1844,7 @@ function Stack$1(props) {
     return null;
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0, key: row.questionName }, /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dark.4", size: "lg" }, row.questionName), /* @__PURE__ */ React__namespace.createElement(core.Text, null, row.answer.join(",") || "No answer.")));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: "a", href: props.href }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
 }
 
 function Table$1(props) {
@@ -1403,7 +1859,7 @@ function Table$1(props) {
       }
     );
   }
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
     mantineDatatable.DataTable,
     {
       verticalSpacing: "sm",
@@ -1424,7 +1880,7 @@ function Table$1(props) {
         render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, "In progress"))
       }],
       rowExpansion: {
-        content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$1, { items: record.answers })
+        content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$1, { href: record.href, items: record.answers })
       }
     }
   ));
@@ -1489,7 +1945,7 @@ function Stack(props) {
         }
       ))));
     }
-    return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "lg" }, row.question), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, row.answers.map((a) => {
+    return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "lg" }, row.question), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, row.answers.map((a) => {
       const answerText = a.join("\n");
       return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React__namespace.createElement(core.Text, null, answerText));
     })))));
@@ -1498,7 +1954,7 @@ function Stack(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$3 = core.createStyles((theme) => ({
+const useStyles$2 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1511,22 +1967,22 @@ const useStyles$3 = core.createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$3();
+  const { classes } = useStyles$2();
   const [tab, setTab] = React.useState("question");
   const numberOfStudents = props.students.length;
   const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
-  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(
+  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.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
     core.Badge,
     {
       variant: "filled",
-      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
       size: "lg"
     },
     "Lessons"
-  ), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+  )), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
     SplitButton,
     {
-      onPreviewClick: props.onPreviewClick,
+      href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
@@ -1578,8 +2034,7 @@ const Lesson = (props) => {
     Table$1,
     {
       loading: props.loading,
-      items: props.students,
-      onClick: props.onUserClick
+      items: props.students
     }
   )))))));
 };
@@ -1599,6 +2054,8 @@ function Table(props) {
   const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(
     core.UnstyledButton,
     {
+      component: "a",
+      href: row.href,
       sx: (theme) => ({
         display: "block",
         width: "100%",
@@ -1607,15 +2064,14 @@ function Table(props) {
         "&:hover": {
           backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
         }
-      }),
-      onClick: () => props.onClick && props.onClick(row)
+      })
     },
     /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__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.description)))
   ))));
-  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+  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$1 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1628,7 +2084,7 @@ const useStyles$2 = core.createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$2();
+  const { classes } = useStyles$1();
   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" }, "Explore units of instruction and/or see corresponding class progress."))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -1640,8 +2096,7 @@ const Lessons = (props) => {
     Table,
     {
       loading: props.loading,
-      items: props.lessons,
-      onClick: props.onLessonClick
+      items: props.lessons
     }
   ))));
 };
@@ -1651,10 +2106,23 @@ const mycCache = core.createEmotionCache({
   prepend: false
 });
 const AdminProvider = (props) => {
-  return /* @__PURE__ */ React__namespace.createElement(core.MantineProvider, { withNormalizeCSS: true, withGlobalStyles: true, emotionCache: mycCache, theme: { loader: "bars" } }, /* @__PURE__ */ React__namespace.createElement(notifications.NotificationsProvider, { limit: props.notificationLimit || 5 }, /* @__PURE__ */ React__namespace.createElement(modals.ModalsProvider, null, props.children)));
+  return /* @__PURE__ */ React__namespace.createElement(
+    core.MantineProvider,
+    {
+      theme: {
+        loader: "bars"
+      },
+      withNormalizeCSS: true,
+      withGlobalStyles: true,
+      emotionCache: mycCache
+    },
+    /* @__PURE__ */ React__namespace.createElement(notifications.NotificationsProvider, { limit: props.notificationLimit || 5 }, /* @__PURE__ */ React__namespace.createElement(modals.ModalsProvider, null, props.children))
+  );
 };
 
 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;
@@ -1670,103 +2138,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const SwitchAccount = (props) => {
-  const form$1 = form.useForm({
-    initialValues: {
-      active: props.account
-    }
-  });
-  return /* @__PURE__ */ React__namespace.createElement(
-    core.Modal,
-    {
-      centered: true,
-      opened: props.opened,
-      onClose: () => props.onClose && props.onClose(),
-      size: "sm",
-      title: /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h5" }, "Accounts")
-    },
-    /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
-      props.onChange && props.onChange(form$1.values.active);
-    }) }, /* @__PURE__ */ React__namespace.createElement(
-      core.Select,
-      __spreadValues({
-        required: true,
-        placeholder: "Select an account",
-        defaultValue: props.account,
-        data: props.accounts.map((a) => {
-          return { value: a.accountId, label: a.name };
-        })
-      }, form$1.getInputProps("active"))
-    ), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "xl" }, "Switch"))
-  );
-};
-
-const useStyles$1 = core.createStyles((theme) => ({
-  link: {
-    width: 50,
-    height: 50,
-    borderRadius: theme.radius.md,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
-    "&:hover": {
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[0]
-    }
-  },
-  active: {
-    "&, &:hover": {
-      backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
-      color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
-    }
-  }
-}));
-const data = [
-  { icon: icons.IconHome2, label: "Home", href: "/home" },
-  { icon: icons.IconGauge, label: "Dashboard", href: "/dashboard" },
-  { icon: icons.IconCategory2, label: "Classes", href: "/classes" },
-  { icon: icons.IconAlbum, label: "Badges", href: "/badges" },
-  { icon: icons.IconLambda, label: "Lessons", href: "/lessons" }
-];
-const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
-  const { classes, cx } = useStyles$1();
-  return /* @__PURE__ */ React__namespace.createElement(core.Tooltip, { label, position: "right", transitionDuration: 0 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick, className: cx(classes.link, { [classes.active]: active }) }, /* @__PURE__ */ React__namespace.createElement(Icon, { stroke: 1.5 })));
-};
-const Navbar = (props) => {
-  const links = data.map((link) => /* @__PURE__ */ React__namespace.createElement(
-    NavbarLink,
-    {
-      key: link.label,
-      label: link.label,
-      icon: link.icon,
-      active: link.label === props.active,
-      onClick: () => props.navigate(link.href)
-    }
-  ));
-  return /* @__PURE__ */ React__namespace.createElement(core.Navbar, { width: { base: 80 }, p: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React__namespace.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React__namespace.createElement(core.Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { grow: true, mt: 50 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { justify: "center", spacing: 0 }, links)), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { justify: "center", spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
-    NavbarLink,
-    {
-      icon: icons.IconSwitchHorizontal,
-      label: "Switch accounts",
-      onClick: props.onSwitchAccounts
-    }
-  ), /* @__PURE__ */ React__namespace.createElement(
-    NavbarLink,
-    {
-      icon: icons.IconLogout,
-      label: "Logout",
-      onClick: props.onLogout
-    }
-  ))));
-};
-
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const useStyles = core.createStyles((theme) => ({
   footer: {
-    paddingTop: theme.spacing.xl * 2,
-    paddingBottom: theme.spacing.xl * 2,
-    paddingLeft: theme.spacing.xl * 3,
+    paddingTop: theme.spacing.md,
+    paddingBottom: theme.spacing.md,
+    paddingLeft: theme.spacing.md,
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
-    borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]}`
+    borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]}`,
+    [theme.fn.largerThan("sm")]: {
+      paddingTop: theme.spacing.xl * 2,
+      paddingBottom: theme.spacing.xl * 2,
+      paddingLeft: theme.spacing.xl * 13
+    }
   },
   logo: {
     maxWidth: 200,
@@ -1844,13 +2228,10 @@ const App = (props) => {
     {
       padding: "xs",
       navbar: /* @__PURE__ */ React__namespace.createElement(
-        Navbar,
-        {
-          active: props.navbar.props.active,
-          navigate: props.navbar.props.navigate,
-          onLogout: props.navbar.props.onLogout,
+        NestedNavbar,
+        __spreadProps(__spreadValues({}, props.navbar.props), {
           onSwitchAccounts: () => account.setChangeModalOpen(true)
-        }
+        })
       ),
       footer: /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !account.opened && /* @__PURE__ */ React__namespace.createElement("footer", { className: classes.footer }, /* @__PURE__ */ React__namespace.createElement(core.Container, { className: classes.inner }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.logo }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "xs" }, /* @__PURE__ */ React__namespace.createElement("div", { style: { width: 15 } }, /* @__PURE__ */ React__namespace.createElement(core.Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })), /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dimmed", size: "h5" }, "Local Civics")), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed", className: classes.description }, "We connect students to powerful civic learning experiences.")), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.groups }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(
         core.Text,
@@ -1898,9 +2279,10 @@ const App = (props) => {
       SwitchAccount,
       {
         opened: account.opened,
+        loading: account.loading,
         account: account.account,
         accounts: account.accounts,
-        onChange: account.onAccountChange,
+        onClick: account.onAccountChange,
         onClose: () => account.setChangeModalOpen(false)
       }
     )
@@ -1910,6 +2292,7 @@ const useAccount = (account, accounts, onAccountChange) => {
   const accountsKey = JSON.stringify(accounts);
   const [changeModalOpen, setChangeModalOpen] = React.useState(false);
   const [active, setActive] = React.useState(account);
+  const [loading, setLoading] = React.useState(false);
   React__namespace.useEffect(() => {
     setActive(account);
   }, [account, accountsKey]);
@@ -1917,11 +2300,15 @@ const useAccount = (account, accounts, onAccountChange) => {
     opened: changeModalOpen,
     account: active,
     accounts,
+    loading,
     setChangeModalOpen,
     onAccountChange: (account2) => {
-      setActive(account2);
-      setChangeModalOpen(false);
-      onAccountChange(account2);
+      setLoading(true);
+      onAccountChange(account2).then(() => {
+        setActive(account2);
+        setLoading(false);
+        setChangeModalOpen(false);
+      });
     }
   };
 };
@@ -1945,6 +2332,7 @@ exports.Home = Home;
 exports.Lesson = Lesson;
 exports.Lessons = Lessons;
 exports.Navbar = Navbar;
+exports.NestedNavbar = NestedNavbar;
 exports.Student = Student;
 exports.SwitchAccount = SwitchAccount;
 //# sourceMappingURL=index.js.map