@local-civics/mgmt-ui 0.1.61 → 0.1.63

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { NotificationsProvider } from '@mantine/notifications';
-export { showNotification, updateNotification } from '@mantine/notifications';
-import { IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconCategory2, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconAlbum, IconLambda, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
 import * as React from 'react';
 import { useState } from 'react';
-import { createStyles, Text, Tabs as Tabs$1, Group, Button, Menu, ActionIcon, Title, Image, Grid, Badge as Badge$1, ScrollArea, UnstyledButton, Avatar, Table as Table$g, Container, Stack as Stack$3, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, ThemeIcon, Card, Overlay, createEmotionCache, MantineProvider, Modal, Navbar as Navbar$1, Center, AppShell, Loader } from '@mantine/core';
+import { createStyles, Navbar as Navbar$1, Center, Avatar, Image, Stack as Stack$3, Tooltip, UnstyledButton, Group, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Burger, Code, ScrollArea, Card, Modal, Loader, SimpleGrid, Tabs as Tabs$1, Button, Menu, ActionIcon, Title, Grid, Table as Table$g, Container, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Paper, Overlay, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
+import { IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconAlbum, IconLambda, IconChevronRight, IconChevronLeft, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+import { NotificationsProvider } from '@mantine/notifications';
+export { showNotification, updateNotification } from '@mantine/notifications';
 import { DataTable } from 'mantine-datatable';
 import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
 import { useForm } from '@mantine/form';
@@ -11,7 +11,415 @@ import * as papa from 'papaparse';
 import { openConfirmModal, ModalsProvider } from '@mantine/modals';
 import { Chart } from 'react-charts';
 
+const useStyles$j = 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: IconHome2, label: "Home", href: "/home" },
+  { icon: IconGauge, label: "Dashboard", href: "/dashboard" },
+  { icon: IconCategory2, label: "Classes", href: "/classes" },
+  { icon: IconAlbum, label: "Badges", href: "/badges" },
+  { icon: IconLambda, label: "Lessons", href: "/lessons" }
+];
+const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
+  const { classes, cx } = useStyles$j();
+  return /* @__PURE__ */ React.createElement(Tooltip, { label, position: "right", transitionDuration: 0 }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick, className: cx(classes.link, { [classes.active]: active }) }, /* @__PURE__ */ React.createElement(Icon, { stroke: 1.5 })));
+};
+const Navbar = (props) => {
+  const links = data$1.map((link) => /* @__PURE__ */ React.createElement(
+    NavbarLink,
+    {
+      key: link.label,
+      label: link.label,
+      icon: link.icon,
+      active: link.label === props.active,
+      onClick: () => props.navigate(link.href)
+    }
+  ));
+  return /* @__PURE__ */ React.createElement(Navbar$1, { width: { base: 80 }, p: "md" }, /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React.createElement(Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React.createElement(Navbar$1.Section, { grow: true, mt: 50 }, /* @__PURE__ */ React.createElement(Stack$3, { justify: "center", spacing: 0 }, links)), /* @__PURE__ */ React.createElement(Navbar$1.Section, null, /* @__PURE__ */ React.createElement(Stack$3, { justify: "center", spacing: 0 }, /* @__PURE__ */ React.createElement(
+    NavbarLink,
+    {
+      icon: IconSwitchHorizontal,
+      label: "Switch accounts",
+      onClick: props.onSwitchAccounts
+    }
+  ), /* @__PURE__ */ React.createElement(
+    NavbarLink,
+    {
+      icon: 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 = 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.createElement(Group, __spreadValues$5({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
+}
+
+const compact = (num) => {
+  return Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(num || 0);
+};
+
+const useStyles$h = 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] = useState(initiallyOpened || hasActiveLinks || false);
+  React.useEffect(() => {
+    setOpened(hasActiveLinks);
+  }, [hasActiveLinks]);
+  const ChevronIcon = theme.dir === "ltr" ? IconChevronRight : IconChevronLeft;
+  const items = (hasLinks ? links : []).map((link) => {
+    return /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        className: cx(classes.link, { [classes.linkActive]: !!active && active === `${label}/${link.label}` }),
+        key: link.label
+      },
+      /* @__PURE__ */ React.createElement(Group, { position: "apart", spacing: 0 }, /* @__PURE__ */ React.createElement(Text, { component: "a", href: link.href }, link.label), !!link.notifications && /* @__PURE__ */ React.createElement(Badge$1, { size: "sm", variant: "filled", className: classes.badge }, compact(link.notifications)))
+    );
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Group,
+    {
+      className: cx(classes.control, {
+        [classes.linkActive]: !!active && !hasLinks && label === active,
+        [classes.controlButton]: hasLinks
+      }),
+      onClick: () => setOpened((o) => !o),
+      position: "apart",
+      spacing: 0
+    },
+    /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(ThemeIcon, { variant: "light", size: 30 }, /* @__PURE__ */ React.createElement(Icon, { className: classes.linkIcon, size: 18 })), /* @__PURE__ */ React.createElement(Box, { ml: "md" }, /* @__PURE__ */ React.createElement(Text, { component: "a", href }, label))),
+    !!notifications && /* @__PURE__ */ React.createElement(Badge$1, { size: "sm", variant: "filled", className: classes.badge }, compact(notifications)),
+    hasLinks && /* @__PURE__ */ React.createElement(
+      ChevronIcon,
+      {
+        className: classes.chevron,
+        size: 14,
+        stroke: 1.5,
+        style: {
+          transform: opened ? `rotate(${theme.dir === "rtl" ? -90 : 90}deg)` : "none"
+        }
+      }
+    )
+  ), hasLinks ? /* @__PURE__ */ React.createElement(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 = createStyles((theme, _params, getRef) => {
+  const icon = getRef("icon");
+  return {
+    navbar: {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white
+    },
+    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: IconHome2 },
+  { label: "Dashboard", icon: IconGauge },
+  { label: "Classes", icon: IconCategory2 },
+  { label: "Badges", icon: IconAlbum },
+  { label: "Lessons", icon: IconLambda },
+  {
+    label: "Organization",
+    icon: IconBuilding,
+    links: [
+      { label: "Overview" },
+      { label: "People" }
+    ]
+  }
+];
+function NestedNavbar(props) {
+  const { classes, cx } = useStyles$g();
+  const [burgerOpen, setBurgerOpen] = React.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.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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Burger, { opened: burgerOpen, onClick: toggle, className: classes.burger, size: "sm" }), /* @__PURE__ */ React.createElement(Navbar$1, { width: { sm: 300 }, p: "md", className: classes.navbar }, /* @__PURE__ */ React.createElement(Navbar$1.Section, { className: classes.header }, /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React.createElement(Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Code, { sx: { fontWeight: 700 } }, props.version), /* @__PURE__ */ React.createElement(Burger, { opened: burgerOpen, onClick: toggle, className: classes.burger, size: "sm" })))), /* @__PURE__ */ React.createElement("div", { className: cx({ [classes.navBody]: !burgerOpen }) }, /* @__PURE__ */ React.createElement(
+    UserButton,
+    {
+      className: classes.user,
+      image: props.image,
+      name: props.name,
+      email: props.email
+    }
+  ), /* @__PURE__ */ React.createElement(Navbar$1.Section, { grow: true, className: classes.links, component: ScrollArea }, /* @__PURE__ */ React.createElement("div", { className: classes.linksInner }, links)), /* @__PURE__ */ React.createElement(Navbar$1.Section, { className: classes.footer }, !!props.onSwitchAccounts && /* @__PURE__ */ React.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
+    event.preventDefault();
+    props.onSwitchAccounts && props.onSwitchAccounts();
+  } }, /* @__PURE__ */ React.createElement(IconSwitchHorizontal, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Change account")), /* @__PURE__ */ React.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
+    event.preventDefault();
+    props.onLogout();
+  } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
+}
+
 const useStyles$f = 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.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React.createElement(Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
+  });
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      centered: true,
+      fullScreen: true,
+      opened: props.opened,
+      onClose: () => props.onClose && props.onClose(),
+      size: "sm"
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, props.loading && /* @__PURE__ */ React.createElement(Center, { style: { height: 400 } }, /* @__PURE__ */ React.createElement(Loader, null)), !props.loading && /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(SimpleGrid, { cols: 3, spacing: "xl", breakpoints: [{ maxWidth: "md", cols: 1 }] }, options)))
+  );
+};
+
+const useStyles$e = createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -58,7 +466,7 @@ const useStyles$f = createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data }) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$e();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -77,7 +485,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
 };
 
-const useStyles$e = createStyles((theme) => ({
+const useStyles$d = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -92,14 +500,15 @@ const useStyles$e = 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.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
     Button,
     {
+      component: "a",
+      href: props.href,
       className: classes.button,
-      variant: "gradient",
-      onClick: props.onPreviewClick
+      variant: "gradient"
     },
     "Preview"
   ), /* @__PURE__ */ React.createElement(Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React.createElement(Menu.Target, null, /* @__PURE__ */ React.createElement(
@@ -128,7 +537,7 @@ const SplitButton$2 = (props) => {
   ))));
 };
 
-const useStyles$d = createStyles((theme) => ({
+const useStyles$c = createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -179,7 +588,7 @@ const useStyles$d = 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.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.body }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React.createElement(Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -189,7 +598,7 @@ function Stack$2(props) {
   if (props.items.length === 0) {
     return null;
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Title, { color: "dark.4", size: "lg" }, row.lessonName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { component: "a", href: row.href, color: "dark.4", weight: "bold", size: "md" }, row.lessonName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
   return /* @__PURE__ */ React.createElement(Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
 }
 
@@ -205,7 +614,7 @@ function Table$f(props) {
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
     DataTable,
     {
       verticalSpacing: "sm",
@@ -220,7 +629,7 @@ function Table$f(props) {
       columns: [{
         accessor: "name",
         title: "Student Name",
-        render: (row) => /* @__PURE__ */ React.createElement(UnstyledButton, null, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))
+        render: (row) => /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { component: "a", size: "xs", color: "dimmed" }, row.email)))
       }, {
         accessor: "status",
         render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Incomplete"))
@@ -246,12 +655,12 @@ function Table$e(props) {
   }
   const rows = props.items.map((row) => {
     const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
-    return /* @__PURE__ */ React.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, percentageCompletion, "%"));
+    return /* @__PURE__ */ React.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { href: row.href, component: "a" }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, percentageCompletion, "%"));
   });
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$c = createStyles((theme) => ({
+const useStyles$b = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -264,22 +673,22 @@ const useStyles$c = createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$b();
   const [tab, setTab] = useState("lessons");
   const numberOfStudents = props.students.length;
   const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
       variant: "filled",
-      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
+      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
       size: "lg"
     },
     "Badges"
-  ), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Stack$3, { ml: "auto" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Stack$3, { ml: "auto" }, /* @__PURE__ */ React.createElement(
     SplitButton$2,
     {
-      onPreviewClick: props.onPreviewClick,
+      href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
@@ -318,15 +727,13 @@ const Badge = (props) => {
     Table$e,
     {
       loading: props.loading,
-      items: props.lessons,
-      onClick: props.onLessonClick
+      items: props.lessons
     }
   ), tab === "students" && /* @__PURE__ */ React.createElement(
     Table$f,
     {
       loading: props.loading,
-      items: props.students,
-      onClick: props.onUserClick
+      items: props.students
     }
   )))))));
 };
@@ -346,6 +753,8 @@ function Table$d(props) {
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
     UnstyledButton,
     {
+      component: "a",
+      href: row.href,
       sx: (theme) => ({
         display: "block",
         width: "100%",
@@ -354,15 +763,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.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
   ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$b = createStyles((theme) => ({
+const useStyles$a = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -375,7 +783,7 @@ const useStyles$b = createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$b();
+  const { classes } = useStyles$a();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -387,8 +795,7 @@ const Badges = (props) => {
     Table$d,
     {
       loading: props.loading,
-      items: props.badges,
-      onClick: props.onBadgeClick
+      items: props.badges
     }
   ))));
 };
@@ -406,7 +813,7 @@ function Table$c(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onViewProfile(row) }, row.studentName)), /* @__PURE__ */ React.createElement("td", null, row.className)));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Class Name"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Class Name"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 const units = [
@@ -446,7 +853,7 @@ function Table$b(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName + row.lessonName }, /* @__PURE__ */ React.createElement("td", null, row.studentName), /* @__PURE__ */ React.createElement("td", null, row.lessonName), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, relativeTimeFromDates(new Date(row.updatedAt)))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Updated At"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Updated At"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 function Table$a(props) {
@@ -462,7 +869,7 @@ function Table$a(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React.createElement("td", null, row.studentName), /* @__PURE__ */ React.createElement("td", null, row.impactStatement)));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Impact Statement"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Impact Statement"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 function Table$9(props) {
@@ -478,7 +885,7 @@ function Table$9(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React.createElement("td", null, row.description), /* @__PURE__ */ React.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Badge Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Badge Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 function Table$8(props) {
@@ -494,7 +901,7 @@ function Table$8(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React.createElement("td", null, row.description), /* @__PURE__ */ React.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 const Dashboard = (props) => {
@@ -583,7 +990,7 @@ const Dashboard = (props) => {
   )))))));
 };
 
-const useStyles$a = createStyles((theme) => ({
+const useStyles$9 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -598,7 +1005,7 @@ const useStyles$a = 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.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
@@ -606,9 +1013,9 @@ const SplitButton$1 = (props) => {
     {
       className: hasMenu ? classes.button : "",
       leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 }),
-      onClick: props.onAddStudentsClick
+      onClick: props.onAddMembersClick
     },
-    "Add students"
+    "Add members"
   ), hasMenu && /* @__PURE__ */ React.createElement(Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React.createElement(Menu.Target, null, /* @__PURE__ */ React.createElement(
     ActionIcon,
     {
@@ -633,7 +1040,7 @@ function Table$7(props) {
     return /* @__PURE__ */ React.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"
@@ -648,13 +1055,21 @@ function Table$7(props) {
     confirmProps: { color: "red" },
     onConfirm: () => props.onDelete && props.onDelete(student)
   });
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.email }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onViewProfile && props.onViewProfile(row) }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React.createElement("td", null, row.badgesEarned), /* @__PURE__ */ React.createElement("td", null, row.lessonsCompleted), /* @__PURE__ */ React.createElement("td", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { color: "green" })), /* @__PURE__ */ React.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
-  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Badges Earned"), /* @__PURE__ */ React.createElement("th", null, "Lessons Completed"), /* @__PURE__ */ React.createElement("th", null, "Account Created?"), /* @__PURE__ */ React.createElement("th", null, "Last Active"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.email }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: "a", href: row.href }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Box, { maw: 100 }, /* @__PURE__ */ React.createElement(
+    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.createElement("td", null, row.badgesEarned), /* @__PURE__ */ React.createElement("td", null, row.lessonsCompleted), /* @__PURE__ */ React.createElement("td", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { color: "green" })), /* @__PURE__ */ React.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
+  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Name"), /* @__PURE__ */ React.createElement("th", null, "Role"), /* @__PURE__ */ React.createElement("th", null, "Badges Earned"), /* @__PURE__ */ React.createElement("th", null, "Lessons Completed"), /* @__PURE__ */ React.createElement("th", null, "Account Created?"), /* @__PURE__ */ React.createElement("th", null, "Last Active"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.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;
@@ -670,8 +1085,8 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const useStyles$9 = createStyles((theme) => ({
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const useStyles$8 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -682,6 +1097,9 @@ const useStyles$9 = createStyles((theme) => ({
   description: {
     maxWidth: 600
   },
+  autocomplete: {
+    maxWidth: 400
+  },
   wrapper: {
     position: "relative",
     marginBottom: 30
@@ -701,11 +1119,11 @@ const useStyles$9 = createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$8();
   const form = useForm({
     initialValues: {
       classId: "",
-      studentId: "",
+      userId: "",
       email: "",
       givenName: "",
       familyName: "",
@@ -715,10 +1133,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] = useState(false);
@@ -727,15 +1147,15 @@ const Class = (props) => {
     {
       opened,
       onClose: () => setOpened(false),
-      title: /* @__PURE__ */ React.createElement(Title, { size: "h5" }, "Add students"),
+      title: /* @__PURE__ */ React.createElement(Title, { size: "h5" }, "Add members"),
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps(__spreadValues$3({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$1(__spreadValues$3({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
       const values = form.values;
       form.reset();
       setOpened(false);
-      props.onCreateStudents && props.onCreateStudents([values]);
+      props.onCreateMembers && props.onCreateMembers([values]);
     }) }, /* @__PURE__ */ React.createElement(Stack$3, null, /* @__PURE__ */ React.createElement(
       TextInput,
       __spreadValues$3({
@@ -756,25 +1176,25 @@ const Class = (props) => {
         placeholder: "Family name"
       }, form.getInputProps("familyName"))
     )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
-  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
       variant: "filled",
-      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
+      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
       size: "lg"
     },
     "Classes"
-  ), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
     SplitButton$1,
     {
       withClassLink: props.withClassLink,
-      onAddStudentsClick: () => setOpened(true),
+      onAddMembersClick: () => setOpened(true),
       onCopyClassLinkClick: props.onCopyLinkClick
     }
   ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$3, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "# OF STUDENTS",
-      value: props.students.length
+      value: props.members.length
     },
     {
       title: "ACCOUNT CREATION",
@@ -793,14 +1213,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.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -813,8 +1233,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();
         }
@@ -866,8 +1286,8 @@ function Table$6(props) {
     confirmProps: { color: "red" },
     onConfirm: () => props.onDeleteClass(group)
   });
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.classId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick(row) }, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.name))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.description)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 300 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Class Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.classId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: "a", href: row.href }, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.name))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.description)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.numberOfStudents || 0)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Class Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "# of Students"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 var __defProp$2 = Object.defineProperty;
@@ -886,7 +1306,7 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-const useStyles$8 = createStyles((theme) => ({
+const useStyles$7 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -899,12 +1319,14 @@ const useStyles$8 = createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$7();
   const form = useForm({
     initialValues: {
       classId: "",
       name: "",
-      description: ""
+      description: "",
+      href: "",
+      numberOfStudents: 0
     },
     validate: {
       name: (val) => val.length <= 6 ? "Name should include at least 6 characters" : null
@@ -939,7 +1361,7 @@ const Classes = (props) => {
         placeholder: "A class for my first period English students"
       }, form.getInputProps("description"))
     )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))
-  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Organize students into classes"), /* @__PURE__ */ React.createElement(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.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Organize people into classes"), /* @__PURE__ */ React.createElement(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.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
     Button,
     {
       onClick: () => setOpened(true),
@@ -952,17 +1374,23 @@ const Classes = (props) => {
       value: props.classes.length
     }
   ] }), /* @__PURE__ */ React.createElement(
+    Autocomplete,
+    {
+      placeholder: "Search for classes",
+      data: props.classes.map((item) => item.name),
+      onChange: props.onAutocompleteChange
+    }
+  ), /* @__PURE__ */ React.createElement(
     Table$6,
     {
       loading: props.loading,
       items: props.classes,
-      onDeleteClass: props.onDeleteClass,
-      onClick: props.onClassClick
+      onDeleteClass: props.onDeleteClass
     }
   ))))));
 };
 
-const useStyles$7 = createStyles((theme) => ({
+const useStyles$6 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -976,7 +1404,7 @@ const useStyles$7 = createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$7();
+  const { classes } = useStyles$6();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
 };
 
@@ -992,8 +1420,31 @@ function Table$5(props) {
       }
     );
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick(row) }, row.badgeName)), /* @__PURE__ */ React.createElement("td", null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Incomplete"))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Badge Name"), /* @__PURE__ */ React.createElement("th", null, "Status"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
+    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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, null, row.badgeName))
+      }, {
+        accessor: "status",
+        render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Incomplete"))
+      }],
+      rowExpansion: {
+        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$2, { items: record.lessons })
+      }
+    }
+  ));
 }
 
 function Table$4(props) {
@@ -1008,8 +1459,8 @@ function Table$4(props) {
       }
     );
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.questionName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, row.questionName), /* @__PURE__ */ React.createElement("td", null, row.answer.join(","))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Question"), /* @__PURE__ */ React.createElement("th", null, "Answer"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.questionName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: "a", href: row.href }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, row.questionName), /* @__PURE__ */ React.createElement("td", null, row.answer.join(","))));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Question"), /* @__PURE__ */ React.createElement("th", null, "Answer"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 function Table$3(props) {
@@ -1024,23 +1475,23 @@ function Table$3(props) {
       }
     );
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, row.rating.toLocaleString())));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: "a", href: row.href }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, row.rating.toLocaleString())));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 const Student = (props) => {
   const [tab, setTab] = useState("badges");
   const numberOfBadges = props.badges.length;
   const percentageOfBadgesEarned = numberOfBadges > 0 ? props.badges.filter((b) => b.isComplete).length / numberOfBadges : 0;
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
       variant: "filled",
-      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
+      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
       size: "lg"
     },
     "Students"
-  ), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(
     UserInfo,
     {
       variant: "compact",
@@ -1077,27 +1528,24 @@ const Student = (props) => {
     Table$5,
     {
       loading: props.loading,
-      items: props.badges,
-      onClick: props.onBadgeClick
+      items: props.badges
     }
   ), tab === "answers" && /* @__PURE__ */ React.createElement(
     Table$4,
     {
       loading: props.loading,
-      items: props.answers,
-      onClick: props.onAnswerClick
+      items: props.answers
     }
   ), tab === "reflections" && /* @__PURE__ */ React.createElement(
     Table$3,
     {
       loading: props.loading,
-      items: props.reflections,
-      onClick: props.onReflectionClick
+      items: props.reflections
     }
   ))))));
 };
 
-const useStyles$6 = createStyles((theme, props) => {
+const useStyles$5 = createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1125,7 +1573,7 @@ const useStyles$6 = 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.createElement(IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1169,7 +1617,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const useStyles$5 = createStyles((theme) => ({
+const useStyles$4 = createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1214,7 +1662,7 @@ const TenantBanner = (_a) => {
     "style",
     "className"
   ]);
-  const { classes, cx, theme } = useStyles$5();
+  const { classes, cx, theme } = useStyles$4();
   return /* @__PURE__ */ React.createElement(
     Card,
     __spreadValues$1({
@@ -1276,7 +1724,7 @@ const Home = (props) => {
     CardGradient,
     {
       title: "Classes",
-      description: "Organize students into classes.",
+      description: "Organize people into classes.",
       onClick: props.onClassesClick
     }
   )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
@@ -1309,10 +1757,10 @@ function Table$2(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React.createElement("td", null, row.studentName), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, row.rating.toLocaleString())));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$4 = createStyles((theme) => ({
+const useStyles$3 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1327,14 +1775,15 @@ const useStyles$4 = 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.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
     Button,
     {
+      component: "a",
+      href: props.href,
       className: classes.button,
-      variant: "gradient",
-      onClick: props.onPreviewClick
+      variant: "gradient"
     },
     "Preview"
   ), /* @__PURE__ */ React.createElement(Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React.createElement(Menu.Target, null, /* @__PURE__ */ React.createElement(
@@ -1368,7 +1817,7 @@ function Stack$1(props) {
     return null;
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement(Stack$3, { spacing: 0, key: row.questionName }, /* @__PURE__ */ React.createElement(Title, { color: "dark.4", size: "lg" }, row.questionName), /* @__PURE__ */ React.createElement(Text, null, row.answer.join(",") || "No answer.")));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: "a", href: props.href }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
 }
 
 function Table$1(props) {
@@ -1383,7 +1832,7 @@ function Table$1(props) {
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
     DataTable,
     {
       verticalSpacing: "sm",
@@ -1404,7 +1853,7 @@ function Table$1(props) {
         render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", variant: "filled" }, "In progress"))
       }],
       rowExpansion: {
-        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$1, { items: record.answers })
+        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$1, { href: record.href, items: record.answers })
       }
     }
   ));
@@ -1469,7 +1918,7 @@ function Stack(props) {
         }
       ))));
     }
-    return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 4 }, row.answers.map((a) => {
+    return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 4 }, row.answers.map((a) => {
       const answerText = a.join("\n");
       return /* @__PURE__ */ React.createElement(Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React.createElement(Text, null, answerText));
     })))));
@@ -1478,7 +1927,7 @@ function Stack(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$3 = createStyles((theme) => ({
+const useStyles$2 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1491,22 +1940,22 @@ const useStyles$3 = createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$3();
+  const { classes } = useStyles$2();
   const [tab, setTab] = useState("question");
   const numberOfStudents = props.students.length;
   const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
       variant: "filled",
-      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
+      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
       size: "lg"
     },
     "Lessons"
-  ), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Stack$3, { ml: "auto" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Stack$3, { ml: "auto" }, /* @__PURE__ */ React.createElement(
     SplitButton,
     {
-      onPreviewClick: props.onPreviewClick,
+      href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
@@ -1558,8 +2007,7 @@ const Lesson = (props) => {
     Table$1,
     {
       loading: props.loading,
-      items: props.students,
-      onClick: props.onUserClick
+      items: props.students
     }
   )))))));
 };
@@ -1579,6 +2027,8 @@ function Table(props) {
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
     UnstyledButton,
     {
+      component: "a",
+      href: row.href,
       sx: (theme) => ({
         display: "block",
         width: "100%",
@@ -1587,15 +2037,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.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
   ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React.createElement(Table$g, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$g, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$2 = createStyles((theme) => ({
+const useStyles$1 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1608,7 +2057,7 @@ const useStyles$2 = createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$2();
+  const { classes } = useStyles$1();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore units of instruction and/or see corresponding class progress."))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -1620,8 +2069,7 @@ const Lessons = (props) => {
     Table,
     {
       loading: props.loading,
-      items: props.lessons,
-      onClick: props.onLessonClick
+      items: props.lessons
     }
   ))));
 };
@@ -1631,10 +2079,23 @@ const mycCache = createEmotionCache({
   prepend: false
 });
 const AdminProvider = (props) => {
-  return /* @__PURE__ */ React.createElement(MantineProvider, { withNormalizeCSS: true, withGlobalStyles: true, emotionCache: mycCache, theme: { loader: "bars" } }, /* @__PURE__ */ React.createElement(NotificationsProvider, { limit: props.notificationLimit || 5 }, /* @__PURE__ */ React.createElement(ModalsProvider, null, props.children)));
+  return /* @__PURE__ */ React.createElement(
+    MantineProvider,
+    {
+      theme: {
+        loader: "bars"
+      },
+      withNormalizeCSS: true,
+      withGlobalStyles: true,
+      emotionCache: mycCache
+    },
+    /* @__PURE__ */ React.createElement(NotificationsProvider, { limit: props.notificationLimit || 5 }, /* @__PURE__ */ React.createElement(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;
@@ -1650,101 +2111,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const SwitchAccount = (props) => {
-  const form = useForm({
-    initialValues: {
-      active: props.account
-    }
-  });
-  return /* @__PURE__ */ React.createElement(
-    Modal,
-    {
-      centered: true,
-      opened: props.opened,
-      onClose: () => props.onClose && props.onClose(),
-      size: "sm",
-      title: /* @__PURE__ */ React.createElement(Title, { size: "h5" }, "Accounts")
-    },
-    /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
-      props.onChange && props.onChange(form.values.active);
-    }) }, /* @__PURE__ */ React.createElement(
-      Select,
-      __spreadValues({
-        required: true,
-        placeholder: "Select an account",
-        defaultValue: props.account,
-        data: props.accounts.map((a) => {
-          return { value: a.accountId, label: a.name };
-        })
-      }, form.getInputProps("active"))
-    ), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "xl" }, "Switch"))
-  );
-};
-
-const useStyles$1 = 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: IconHome2, label: "Home", href: "/home" },
-  { icon: IconGauge, label: "Dashboard", href: "/dashboard" },
-  { icon: IconCategory2, label: "Classes", href: "/classes" },
-  { icon: IconAlbum, label: "Badges", href: "/badges" },
-  { icon: IconLambda, label: "Lessons", href: "/lessons" }
-];
-const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
-  const { classes, cx } = useStyles$1();
-  return /* @__PURE__ */ React.createElement(Tooltip, { label, position: "right", transitionDuration: 0 }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick, className: cx(classes.link, { [classes.active]: active }) }, /* @__PURE__ */ React.createElement(Icon, { stroke: 1.5 })));
-};
-const Navbar = (props) => {
-  const links = data.map((link) => /* @__PURE__ */ React.createElement(
-    NavbarLink,
-    {
-      key: link.label,
-      label: link.label,
-      icon: link.icon,
-      active: link.label === props.active,
-      onClick: () => props.navigate(link.href)
-    }
-  ));
-  return /* @__PURE__ */ React.createElement(Navbar$1, { width: { base: 80 }, p: "md" }, /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React.createElement(Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React.createElement(Navbar$1.Section, { grow: true, mt: 50 }, /* @__PURE__ */ React.createElement(Stack$3, { justify: "center", spacing: 0 }, links)), /* @__PURE__ */ React.createElement(Navbar$1.Section, null, /* @__PURE__ */ React.createElement(Stack$3, { justify: "center", spacing: 0 }, /* @__PURE__ */ React.createElement(
-    NavbarLink,
-    {
-      icon: IconSwitchHorizontal,
-      label: "Switch accounts",
-      onClick: props.onSwitchAccounts
-    }
-  ), /* @__PURE__ */ React.createElement(
-    NavbarLink,
-    {
-      icon: IconLogout,
-      label: "Logout",
-      onClick: props.onLogout
-    }
-  ))));
-};
-
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const useStyles = createStyles((theme) => ({
   footer: {
     paddingTop: theme.spacing.xl * 2,
     paddingBottom: theme.spacing.xl * 2,
-    paddingLeft: theme.spacing.xl * 3,
+    paddingLeft: theme.spacing.xl * 13,
     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]}`
   },
@@ -1824,13 +2196,10 @@ const App = (props) => {
     {
       padding: "xs",
       navbar: /* @__PURE__ */ React.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.createElement(React.Fragment, null, !account.opened && /* @__PURE__ */ React.createElement("footer", { className: classes.footer }, /* @__PURE__ */ React.createElement(Container, { className: classes.inner }, /* @__PURE__ */ React.createElement("div", { className: classes.logo }, /* @__PURE__ */ React.createElement(Group, { spacing: "xs" }, /* @__PURE__ */ React.createElement("div", { style: { width: 15 } }, /* @__PURE__ */ React.createElement(Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })), /* @__PURE__ */ React.createElement(Title, { color: "dimmed", size: "h5" }, "Local Civics")), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed", className: classes.description }, "We connect students to powerful civic learning experiences.")), /* @__PURE__ */ React.createElement("div", { className: classes.groups }, /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(
         Text,
@@ -1878,9 +2247,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)
       }
     )
@@ -1890,6 +2260,7 @@ const useAccount = (account, accounts, onAccountChange) => {
   const accountsKey = JSON.stringify(accounts);
   const [changeModalOpen, setChangeModalOpen] = useState(false);
   const [active, setActive] = useState(account);
+  const [loading, setLoading] = useState(false);
   React.useEffect(() => {
     setActive(account);
   }, [account, accountsKey]);
@@ -1897,14 +2268,18 @@ 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);
+      });
     }
   };
 };
 
-export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, Home, Lesson, Lessons, Navbar, Student, SwitchAccount };
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, Home, Lesson, Lessons, Navbar, NestedNavbar, Student, SwitchAccount };
 //# sourceMappingURL=index.mjs.map