@local-civics/mgmt-ui 0.1.51 → 0.1.53

package/dist/index.mjs

@@ -0,0 +1,1702 @@
+import { NotificationsProvider } from '@mantine/notifications';
+export { showNotification, updateNotification } from '@mantine/notifications';
+import { IconArrowLeft, IconCategory2, IconCheck, IconTrash, IconPlaylistAdd, 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, Title, Image, UnstyledButton, Group, Avatar, Badge as Badge$1, ScrollArea, Table as Table$g, Container, Stack as Stack$1, Grid, ActionIcon, Button, 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 { Dropzone, MIME_TYPES } from '@mantine/dropzone';
+import { useForm } from '@mantine/form';
+import * as papa from 'papaparse';
+import { openConfirmModal, ModalsProvider } from '@mantine/modals';
+import { Chart } from 'react-charts';
+
+const useStyles$c = createStyles((theme) => ({
+  root: {
+    display: "flex",
+    backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
+    padding: theme.spacing.xl * 1.5,
+    borderRadius: theme.radius.md,
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column"
+    }
+  },
+  title: {
+    color: theme.white,
+    textTransform: "uppercase",
+    fontWeight: 700,
+    fontSize: theme.fontSizes.sm
+  },
+  count: {
+    color: theme.white,
+    fontSize: 32,
+    lineHeight: 1,
+    fontWeight: 700,
+    marginBottom: theme.spacing.md,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`
+  },
+  description: {
+    color: theme.colors[theme.primaryColor][0],
+    fontSize: theme.fontSizes.sm,
+    marginTop: 5
+  },
+  stat: {
+    flex: 1,
+    "& + &": {
+      paddingLeft: theme.spacing.xl,
+      marginLeft: theme.spacing.xl,
+      borderLeft: `1px solid ${theme.colors[theme.primaryColor][3]}`,
+      [theme.fn.smallerThan("sm")]: {
+        paddingLeft: 0,
+        marginLeft: 0,
+        borderLeft: 0,
+        paddingTop: theme.spacing.xl,
+        marginTop: theme.spacing.xl,
+        borderTop: `1px solid ${theme.colors[theme.primaryColor][3]}`
+      }
+    }
+  }
+}));
+const StatsGroup = ({ data }) => {
+  const { classes } = useStyles$c();
+  const stats = data.map((stat) => {
+    const value = (() => {
+      if (stat.unit === "%") {
+        return Math.round((stat.value + Number.EPSILON) * 100);
+      }
+      return stat.value;
+    })();
+    return /* @__PURE__ */ React.createElement("div", { key: stat.title, className: classes.stat }, /* @__PURE__ */ React.createElement(Text, { className: classes.count }, value.toLocaleString(), stat.unit), /* @__PURE__ */ React.createElement(Text, { className: classes.title }, stat.title));
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, stats);
+};
+
+const Tabs = (props) => {
+  var _a;
+  const tabs = (_a = props.data) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(Tabs$1.Tab, { key: item.value, value: item.value }, item.label || item.value));
+  return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
+};
+
+const useStyles$b = createStyles((theme) => ({
+  wrapper: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing.xl * 2,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white,
+    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      flexDirection: "column-reverse",
+      padding: theme.spacing.xl
+    }
+  },
+  image: {
+    maxWidth: "40%",
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      maxWidth: "100%"
+    }
+  },
+  body: {
+    paddingRight: theme.spacing.xl * 4,
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      paddingRight: 0,
+      marginTop: theme.spacing.xl
+    }
+  },
+  title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    lineHeight: 1,
+    marginBottom: theme.spacing.md
+  },
+  controls: {
+    display: "flex",
+    marginTop: theme.spacing.xl
+  },
+  inputWrapper: {
+    width: "100%",
+    flex: "1"
+  },
+  input: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    borderRight: 0
+  },
+  control: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  }
+}));
+const PlaceholderBanner = (props) => {
+  const { classes } = useStyles$b();
+  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 }));
+};
+
+function Table$f(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No badges to display",
+        description: "There has not been any badge progress just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.name }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(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, { size: "xs", color: "dimmed" }, row.email))))), /* @__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, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Badge Status"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+}
+
+function Table$e(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No lessons to display",
+        description: "There are not lessons in badge.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  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(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)));
+}
+
+const useStyles$a = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Badge = (props) => {
+  const { classes } = useStyles$a();
+  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$1, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__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 })),
+      size: "lg"
+    },
+    "Badges"
+  ), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$1, { 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$1, { ml: "auto" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "gradient",
+      onClick: props.onPreviewClick
+    },
+    "Preview"
+  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$1, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+    {
+      title: "BADGE COMPLETION",
+      value: percentageOfBadgesEarned,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      clearable: true,
+      clearButtonLabel: "Clear class selection",
+      size: "sm",
+      placeholder: "Select a class",
+      nothingFound: "No options",
+      value: props.classId,
+      onChange: props.onClassChange,
+      icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
+      data: props.classes.map((g) => {
+        return { value: g.classId, label: g.name };
+      })
+    }
+  ), /* @__PURE__ */ React.createElement(Stack$1, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "By lesson", value: "lessons" },
+        { label: "By student", value: "students" }
+      ],
+      onChange: setTab
+    }
+  ), tab === "lessons" && /* @__PURE__ */ React.createElement(
+    Table$e,
+    {
+      loading: props.loading,
+      items: props.lessons,
+      onClick: props.onLessonClick
+    }
+  ), tab === "students" && /* @__PURE__ */ React.createElement(
+    Table$f,
+    {
+      loading: props.loading,
+      items: props.students,
+      onClick: props.onUserClick
+    }
+  )))))));
+};
+
+function Table$d(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No badges to display",
+        description: "We don't have any badges to show you just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
+    UnstyledButton,
+    {
+      sx: (theme) => ({
+        display: "block",
+        width: "100%",
+        padding: theme.spacing.md,
+        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+        "&: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)));
+}
+
+const useStyles$9 = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Badges = (props) => {
+  const { classes } = useStyles$9();
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$1, { 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,
+    {
+      placeholder: "Search for a badge that fits your needs",
+      data: props.badges.map((item) => item.name),
+      onChange: props.onAutocompleteChange
+    }
+  ), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
+    Table$d,
+    {
+      loading: props.loading,
+      items: props.badges,
+      onClick: props.onBadgeClick
+    }
+  ))));
+};
+
+function Table$c(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No students to display",
+        description: "You don't have any students yet, add them and revisit.",
+        loading: props.loading,
+        icon: "groups"
+      }
+    );
+  }
+  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)));
+}
+
+const units = [
+  { unit: "year", ms: 31536e6 },
+  { unit: "month", ms: 2628e6 },
+  { unit: "day", ms: 864e5 },
+  { unit: "hour", ms: 36e5 },
+  { unit: "minute", ms: 6e4 },
+  { unit: "second", ms: 1e3 }
+];
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+function relativeTimeFromDates(relative, pivot = new Date()) {
+  if (!relative)
+    return "";
+  const elapsed = relative.getTime() - pivot.getTime();
+  return relativeTimeFromElapsed(elapsed);
+}
+function relativeTimeFromElapsed(elapsed) {
+  for (const { unit, ms } of units) {
+    if (Math.abs(elapsed) >= ms || unit === "second") {
+      return rtf.format(Math.round(elapsed / ms), unit);
+    }
+  }
+  return "";
+}
+
+function Table$b(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No reflections to display",
+        description: "There has not been any lesson progress just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  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)));
+}
+
+function Table$a(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No impact statements to display",
+        description: "There are no students with impact statements yet.",
+        loading: props.loading,
+        icon: "kindergarten"
+      }
+    );
+  }
+  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)));
+}
+
+function Table$9(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No badges to display",
+        description: "We don't have any badges to show you just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  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)));
+}
+
+function Table$8(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No lessons to display",
+        description: "We don't have any lessons to show you just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  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)));
+}
+
+const Dashboard = (props) => {
+  const [tab, setTab] = useState("students");
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$1, null, /* @__PURE__ */ React.createElement(Stack$1, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { size: "h3" }, "Dashboard"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm", mt: "md" }, "Fast-track learning for your students.")), /* @__PURE__ */ React.createElement(Stack$1, null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$1, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+    {
+      title: "# OF STUDENTS",
+      value: props.students.length
+    },
+    {
+      title: "ACCOUNT CREATION",
+      value: props.percentageOfAccountsCreated,
+      unit: "%"
+    },
+    {
+      title: "BADGE COMPLETION",
+      value: props.percentageOfBadgesEarned,
+      unit: "%"
+    },
+    {
+      title: "LESSON COMPLETION",
+      value: props.percentageOfLessonsCompleted,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      clearable: true,
+      clearButtonLabel: "Clear class selection",
+      size: "sm",
+      placeholder: "Select a class",
+      nothingFound: "No options",
+      value: props.classId,
+      onChange: props.onClassChange,
+      icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
+      data: props.classes.map((g) => {
+        return { value: g.classId, label: g.name };
+      })
+    }
+  ), /* @__PURE__ */ React.createElement(Stack$1, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "My students", value: "students" },
+        { label: "Impact statements", value: "impact" },
+        { label: "Reflections", value: "reflections" },
+        { label: "Badges", value: "badges" },
+        { label: "Lessons", value: "lessons" }
+      ],
+      onChange: setTab
+    }
+  ), tab === "impact" && /* @__PURE__ */ React.createElement(
+    Table$a,
+    {
+      loading: props.loading,
+      items: props.impacts
+    }
+  ), tab === "reflections" && /* @__PURE__ */ React.createElement(
+    Table$b,
+    {
+      loading: props.loading,
+      items: props.reflections
+    }
+  ), tab === "badges" && /* @__PURE__ */ React.createElement(
+    Table$9,
+    {
+      loading: props.loading,
+      items: props.badges,
+      onClick: props.onBadgeClick
+    }
+  ), tab === "lessons" && /* @__PURE__ */ React.createElement(
+    Table$8,
+    {
+      loading: props.loading,
+      items: props.lessons,
+      onClick: props.onLessonClick
+    }
+  ), tab === "students" && /* @__PURE__ */ React.createElement(
+    Table$c,
+    {
+      loading: props.loading,
+      items: props.students,
+      onViewProfile: props.onViewStudentProfile
+    }
+  )))))));
+};
+
+function Table$7(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No students to display",
+        description: "You have not rostered any students yet.",
+        loading: props.loading,
+        icon: "groups"
+      }
+    );
+  }
+  const openDeleteModal = (student) => openConfirmModal({
+    title: `Delete "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}"?`,
+    centered: true,
+    children: /* @__PURE__ */ React.createElement(Text, { size: "sm" }, "Are you sure you want to delete this person? This action is destructive and you will have to contact support to restore your data."),
+    labels: { confirm: "Delete", cancel: "No don't delete them" },
+    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)));
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const useStyles$8 = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  },
+  wrapper: {
+    position: "relative",
+    marginBottom: 30
+  },
+  dropzone: {
+    borderWidth: 1,
+    paddingBottom: 50
+  },
+  icon: {
+    color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
+  },
+  control: {
+    position: "absolute",
+    width: 250,
+    left: "calc(50% - 125px)",
+    bottom: -20
+  }
+}));
+const Class = (props) => {
+  const { classes } = useStyles$8();
+  const form = useForm({
+    initialValues: {
+      classId: "",
+      studentId: "",
+      email: "",
+      givenName: "",
+      familyName: "",
+      avatar: "",
+      role: "",
+      readonly: false,
+      lastActivity: null,
+      hasAccount: false,
+      lessonsCompleted: 0,
+      badgesEarned: 0
+    },
+    validate: {
+      email: (value) => /^\S+@\S+$/.test(value) && props.students.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
+    }
+  });
+  const [opened, setOpened] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Drawer,
+    {
+      opened,
+      onClose: () => setOpened(false),
+      title: /* @__PURE__ */ React.createElement(Title, { size: "h5" }, "Add students"),
+      padding: "xl",
+      size: "xl"
+    },
+    /* @__PURE__ */ React.createElement(Stack$1, { 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(() => {
+      const values = form.values;
+      form.reset();
+      setOpened(false);
+      props.onCreateStudents && props.onCreateStudents([values]);
+    }) }, /* @__PURE__ */ React.createElement(Stack$1, null, /* @__PURE__ */ React.createElement(
+      TextInput,
+      __spreadValues$3({
+        withAsterisk: true,
+        label: "Email",
+        placeholder: "Email"
+      }, form.getInputProps("email"))
+    ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
+      TextInput,
+      __spreadValues$3({
+        label: "Given name",
+        placeholder: "Given name"
+      }, form.getInputProps("givenName"))
+    ), /* @__PURE__ */ React.createElement(
+      TextInput,
+      __spreadValues$3({
+        label: "Family name",
+        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$1, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__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 })),
+      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(
+    Button,
+    {
+      onClick: () => setOpened(true),
+      leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 })
+    },
+    "Add students"
+  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$1, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+    {
+      title: "# OF STUDENTS",
+      value: props.students.length
+    },
+    {
+      title: "ACCOUNT CREATION",
+      value: props.percentageOfAccountsCreated,
+      unit: "%"
+    },
+    {
+      title: "BADGE COMPLETION",
+      value: props.percentageOfBadgesEarned,
+      unit: "%"
+    },
+    {
+      title: "LESSON COMPLETION",
+      value: props.percentageOfLessonsCompleted,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React.createElement(
+    Table$7,
+    {
+      loading: props.loading,
+      items: props.students,
+      onDelete: props.onDeleteStudent,
+      onViewProfile: (student) => props.onStudentClick(student)
+    }
+  ))))));
+};
+const DropzoneButton = (props) => {
+  const { classes, theme } = useStyles$8();
+  const openRef = React.useRef(null);
+  const [loading, setLoading] = React.useState(false);
+  const onDrop = React.useCallback((acceptedFiles) => {
+    setLoading(true);
+    acceptedFiles.forEach((file) => {
+      papa.parse(file, {
+        download: true,
+        header: true,
+        dynamicTyping: true,
+        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);
+          setLoading(false);
+          props.close();
+        }
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(
+    Dropzone,
+    {
+      loading,
+      openRef,
+      onDrop,
+      className: classes.dropzone,
+      radius: "md",
+      accept: [MIME_TYPES.csv],
+      maxSize: 5 * 1024 ** 2
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React.createElement(Group, { position: "center" }, /* @__PURE__ */ React.createElement(Dropzone.Accept, null, /* @__PURE__ */ React.createElement(IconDownload, { size: 50, color: theme.colors[theme.primaryColor][6], stroke: 1.5 })), /* @__PURE__ */ React.createElement(Dropzone.Reject, null, /* @__PURE__ */ React.createElement(IconX, { size: 50, color: theme.colors.red[6], stroke: 1.5 })), /* @__PURE__ */ React.createElement(Dropzone.Idle, null, /* @__PURE__ */ React.createElement(
+      IconCloudUpload,
+      {
+        size: 50,
+        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+        stroke: 1.5
+      }
+    ))), /* @__PURE__ */ React.createElement(Text, { align: "center", weight: 700, size: "lg", mt: "xl" }, /* @__PURE__ */ React.createElement(Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React.createElement(Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React.createElement(Dropzone.Idle, null, "Upload multiple")), /* @__PURE__ */ React.createElement(Text, { align: "center", size: "sm", mt: "xs", color: "dimmed" }, "Drag'n'drop files here to upload. We can accept only ", /* @__PURE__ */ React.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
+  ), /* @__PURE__ */ React.createElement(Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
+    var _a;
+    return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
+  } }, "Select file"));
+};
+
+function Table$6(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No classes to display",
+        description: "You don't have any classes yet. Try creating one first...",
+        loading: props.loading,
+        icon: "groups"
+      }
+    );
+  }
+  const openDeleteModal = (group) => openConfirmModal({
+    title: `Delete "${group.name}"?`,
+    centered: true,
+    children: /* @__PURE__ */ React.createElement(Text, { size: "sm" }, "Are you sure you want to delete this class? This action is destructive and you will have to contact support to restore your data."),
+    labels: { confirm: "Delete class", cancel: "No don't delete it" },
+    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)));
+}
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+const useStyles$7 = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Classes = (props) => {
+  const { classes } = useStyles$7();
+  const form = useForm({
+    initialValues: {
+      classId: "",
+      name: "",
+      description: ""
+    },
+    validate: {
+      name: (val) => val.length <= 6 ? "Name should include at least 6 characters" : null
+    }
+  });
+  const [opened, setOpened] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Drawer,
+    {
+      opened,
+      onClose: () => setOpened(false),
+      title: /* @__PURE__ */ React.createElement(Group, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { size: "h5" }, "Create a class"), /* @__PURE__ */ React.createElement(Tooltip, { label: "Classes settings cannot be modified once created" }, /* @__PURE__ */ React.createElement(ActionIcon, null, /* @__PURE__ */ React.createElement(IconInfoCircle, { color: "#3b82f6", size: 14 })))),
+      padding: "xl",
+      size: "xl"
+    },
+    /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+      const values = form.values;
+      form.reset();
+      setOpened(false);
+      props.onCreateClass && props.onCreateClass(values);
+    }) }, /* @__PURE__ */ React.createElement(Stack$1, null, /* @__PURE__ */ React.createElement(
+      TextInput,
+      __spreadValues$2({
+        withAsterisk: true,
+        label: "Name",
+        placeholder: "Class name"
+      }, form.getInputProps("name"))
+    ), /* @__PURE__ */ React.createElement(
+      TextInput,
+      __spreadValues$2({
+        label: "Description",
+        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$1, { 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(
+    Button,
+    {
+      onClick: () => setOpened(true),
+      leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 })
+    },
+    "Create class"
+  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$1, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+    {
+      title: "# OF CLASSES",
+      value: props.classes.length
+    }
+  ] }), /* @__PURE__ */ React.createElement(
+    Table$6,
+    {
+      loading: props.loading,
+      items: props.classes,
+      onDeleteClass: props.onDeleteClass,
+      onClick: props.onClassClick
+    }
+  ))))));
+};
+
+const useStyles$6 = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    marginTop: 16,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const UserInfo = (props) => {
+  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));
+};
+
+function Table$5(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No badges to display",
+        description: "There has not been any badge progress just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  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)));
+}
+
+function Table$4(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No answers to display",
+        description: "There has not been any lesson progress just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  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)));
+}
+
+function Table$3(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No reflections to display",
+        description: "There has not been any lesson progress just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  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 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$1, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__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 })),
+      size: "lg"
+    },
+    "Students"
+  ), /* @__PURE__ */ React.createElement(
+    UserInfo,
+    {
+      variant: "compact",
+      name: props.name,
+      impactStatement: props.impactStatement
+    }
+  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$1, { spacing: "lg" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+    {
+      title: "PROBLEMS SOLVED",
+      value: props.numberOfProblemsSolved
+    },
+    {
+      title: "LESSON COMPLETION",
+      value: props.percentageOfLessonsCompleted,
+      unit: "%"
+    },
+    {
+      title: "BADGE COMPLETION",
+      value: percentageOfBadgesEarned,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React.createElement(Stack$1, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "My badges", value: "badges" },
+        { label: "My answers", value: "answers" },
+        { label: "My reflections", value: "reflections" }
+      ],
+      onChange: setTab
+    }
+  ), tab === "badges" && /* @__PURE__ */ React.createElement(
+    Table$5,
+    {
+      loading: props.loading,
+      items: props.badges,
+      onClick: props.onBadgeClick
+    }
+  ), tab === "answers" && /* @__PURE__ */ React.createElement(
+    Table$4,
+    {
+      loading: props.loading,
+      items: props.answers,
+      onClick: props.onAnswerClick
+    }
+  ), tab === "reflections" && /* @__PURE__ */ React.createElement(
+    Table$3,
+    {
+      loading: props.loading,
+      items: props.reflections,
+      onClick: props.onReflectionClick
+    }
+  ))))));
+};
+
+const useStyles$5 = createStyles((theme, props) => {
+  const from = props.from || "blue";
+  const to = props.to || "green";
+  return {
+    card: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden",
+      transition: "transform 150ms ease, box-shadow 100ms ease",
+      padding: theme.spacing.xl,
+      paddingLeft: theme.spacing.xl * 2,
+      "&:hover": {
+        boxShadow: theme.shadows.md,
+        transform: "scale(1.02)"
+      },
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: 6,
+        backgroundImage: theme.fn.linearGradient(0, theme.colors[from][6], theme.colors[to][6])
+      }
+    }
+  };
+});
+function CardGradient(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 });
+  return /* @__PURE__ */ React.createElement(Paper, { withBorder: true, radius: "md", className: classes.card, onClick: props.onClick }, /* @__PURE__ */ React.createElement(
+    ThemeIcon,
+    {
+      size: "xl",
+      radius: "md",
+      variant: "gradient",
+      gradient: { deg: 0, from, to }
+    },
+    icon
+  ), /* @__PURE__ */ React.createElement(Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React.createElement(Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
+}
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const useStyles$4 = createStyles((theme) => ({
+  card: {
+    height: 240,
+    backgroundSize: "cover",
+    backgroundPosition: "center"
+  },
+  content: {
+    position: "absolute",
+    padding: theme.spacing.xl,
+    zIndex: 1,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0
+  },
+  action: {
+    position: "absolute",
+    bottom: theme.spacing.xl,
+    right: theme.spacing.xl
+  },
+  title: {
+    color: theme.white,
+    marginBottom: theme.spacing.xs / 2
+  },
+  description: {
+    color: theme.white,
+    maxWidth: 220
+  }
+}));
+const TenantBanner = (_a) => {
+  var _b = _a, {
+    title,
+    description,
+    image,
+    action,
+    style,
+    className
+  } = _b, others = __objRest(_b, [
+    "title",
+    "description",
+    "image",
+    "action",
+    "style",
+    "className"
+  ]);
+  const { classes, cx, theme } = useStyles$4();
+  return /* @__PURE__ */ React.createElement(
+    Card,
+    __spreadValues$1({
+      radius: "md",
+      style: __spreadValues$1({ backgroundImage: `url(${image})` }, style),
+      className: cx(classes.card, className)
+    }, others),
+    /* @__PURE__ */ React.createElement(
+      Overlay,
+      {
+        gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[4]} 100%)`,
+        opacity: 0.55,
+        zIndex: 0
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        className: classes.action,
+        variant: "white",
+        color: "dark",
+        component: "a",
+        size: "xs",
+        href: action.link,
+        target: "_blank"
+      },
+      action.label
+    ))
+  );
+};
+
+const Home = (props) => {
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Stack$1, { spacing: "lg" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { md: 6 }, /* @__PURE__ */ React.createElement(
+    UserInfo,
+    {
+      variant: "compact",
+      name: props.name,
+      impactStatement: props.impactStatement
+    }
+  )), /* @__PURE__ */ React.createElement(Grid.Col, { md: 6 }, /* @__PURE__ */ React.createElement(
+    TenantBanner,
+    {
+      title: props.organization.name,
+      description: props.organization.description,
+      image: props.organization.image,
+      action: {
+        label: "Visit website",
+        link: props.organization.website
+      }
+    }
+  ))), /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "Dashboard",
+      description: "Track class performance across core areas of focus.",
+      onClick: props.onDashboardClick
+    }
+  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "Classes",
+      description: "Organize students into classes.",
+      onClick: props.onClassesClick
+    }
+  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "Lessons",
+      description: "Explore units of instruction and/or see corresponding class progress.",
+      onClick: props.onLessonsClick
+    }
+  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "Badges",
+      description: "Project-sized skills acquisition and standards alignment.",
+      onClick: props.onBadgesClick
+    }
+  )))));
+};
+
+function Table$2(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No reflections to display",
+        description: "There has not been any lesson progress just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  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)));
+}
+
+function Table$1(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No students to display",
+        description: "You don't have any student data yet for this lesson",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.name }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(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, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React.createElement("td", 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"))));
+  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, "Status"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+}
+
+function Stack(props) {
+  const primaryAxis = React.useMemo(
+    () => ({
+      position: "left",
+      getValue: (datum) => datum.primary
+    }),
+    []
+  );
+  const secondaryAxes = React.useMemo(
+    () => [
+      {
+        position: "bottom",
+        getValue: (datum) => datum.secondary
+      }
+    ],
+    []
+  );
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No questions to display",
+        description: "There are no questions in this lesson.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => {
+    if (row.chart) {
+      const labelMap = {};
+      const choices = row.choices || [];
+      choices.forEach((c) => {
+        labelMap[c] = 0;
+      });
+      row.answers.forEach((a) => a.forEach((r) => {
+        if (r in labelMap) {
+          labelMap[r] = labelMap[r] ? labelMap[r] + 1 : 1;
+        }
+      }));
+      return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$1, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement("div", { style: { background: "white", height: "300px", width: "100%", position: "relative" } }, /* @__PURE__ */ React.createElement(
+        Chart,
+        {
+          options: {
+            data: [{
+              label: "",
+              data: choices.map((k) => {
+                return {
+                  primary: truncateWithEllipses(k, 50),
+                  secondary: labelMap[k]
+                };
+              })
+            }],
+            primaryAxis,
+            secondaryAxes
+          }
+        }
+      ))));
+    }
+    return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$1, { 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$1, { 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));
+    })))));
+  });
+  return /* @__PURE__ */ React.createElement(Stack$1, { py: 4, spacing: 10, sx: { minWidth: 700 } }, rows);
+}
+const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
+
+const useStyles$3 = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Lesson = (props) => {
+  const { classes } = useStyles$3();
+  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$1, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__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 })),
+      size: "lg"
+    },
+    "Lessons"
+  ), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$1, { 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$1, { ml: "auto" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "gradient",
+      onClick: props.onPreviewClick
+    },
+    "Preview"
+  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$1, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+    {
+      title: "LESSON COMPLETION",
+      value: percentageOfLessonsCompleted,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      clearable: true,
+      clearButtonLabel: "Clear class selection",
+      size: "sm",
+      placeholder: "Select a class",
+      nothingFound: "No options",
+      value: props.classId,
+      onChange: props.onClassChange,
+      icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
+      data: props.classes.map((g) => {
+        return { value: g.classId, label: g.name };
+      })
+    }
+  ), /* @__PURE__ */ React.createElement(Stack$1, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "By question", value: "question" },
+        { label: "By reflection", value: "reflections" },
+        { label: "By student", value: "students" }
+      ],
+      onChange: setTab
+    }
+  ), tab === "question" && /* @__PURE__ */ React.createElement(
+    Stack,
+    {
+      loading: props.loading,
+      items: props.questions
+    }
+  ), tab === "reflections" && /* @__PURE__ */ React.createElement(
+    Table$2,
+    {
+      loading: props.loading,
+      items: props.reflections
+    }
+  ), tab === "students" && /* @__PURE__ */ React.createElement(
+    Table$1,
+    {
+      loading: props.loading,
+      items: props.students,
+      onClick: props.onUserClick
+    }
+  )))))));
+};
+
+function Table(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No lessons to display",
+        description: "We don't have any lessons to show you just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
+    UnstyledButton,
+    {
+      sx: (theme) => ({
+        display: "block",
+        width: "100%",
+        padding: theme.spacing.md,
+        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+        "&: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)));
+}
+
+const useStyles$2 = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Lessons = (props) => {
+  const { classes } = useStyles$2();
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$1, { 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,
+    {
+      placeholder: "Search for a lesson that fits your needs",
+      data: props.lessons.map((item) => item.name),
+      onChange: props.onAutocompleteChange
+    }
+  ), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      loading: props.loading,
+      items: props.lessons,
+      onClick: props.onLessonClick
+    }
+  ))));
+};
+
+const mycCache = createEmotionCache({
+  key: "mantine",
+  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)));
+};
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+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$1, { justify: "center", spacing: 0 }, links)), /* @__PURE__ */ React.createElement(Navbar$1.Section, null, /* @__PURE__ */ React.createElement(Stack$1, { 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
+    }
+  ))));
+};
+
+const useStyles = createStyles((theme) => ({
+  footer: {
+    paddingTop: theme.spacing.xl * 2,
+    paddingBottom: theme.spacing.xl * 2,
+    paddingLeft: theme.spacing.xl * 3,
+    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]}`
+  },
+  logo: {
+    maxWidth: 200,
+    [theme.fn.smallerThan("sm")]: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    }
+  },
+  description: {
+    marginTop: 5,
+    [theme.fn.smallerThan("sm")]: {
+      marginTop: theme.spacing.xs,
+      textAlign: "center"
+    }
+  },
+  inner: {
+    display: "flex",
+    justifyContent: "space-between",
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column",
+      alignItems: "center"
+    }
+  },
+  groups: {
+    display: "flex",
+    flexWrap: "wrap",
+    [theme.fn.smallerThan("sm")]: {
+      display: "none"
+    }
+  },
+  wrapper: {
+    width: 160
+  },
+  link: {
+    display: "block",
+    color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[6],
+    fontSize: theme.fontSizes.sm,
+    paddingTop: 3,
+    paddingBottom: 3,
+    "&:hover": {
+      textDecoration: "underline"
+    }
+  },
+  title: {
+    fontSize: theme.fontSizes.md,
+    fontWeight: 700,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    marginBottom: theme.spacing.xs / 2,
+    color: theme.colorScheme === "dark" ? theme.white : theme.black
+  },
+  afterFooter: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: theme.spacing.xl,
+    paddingTop: theme.spacing.xl,
+    paddingBottom: theme.spacing.xl,
+    borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column"
+    }
+  },
+  social: {
+    [theme.fn.smallerThan("sm")]: {
+      marginTop: theme.spacing.xs
+    }
+  }
+}));
+const App = (props) => {
+  const { classes } = useStyles();
+  const account = useAccount(props.account, props.accounts, props.onAccountChange);
+  return /* @__PURE__ */ React.createElement(
+    AppShell,
+    {
+      padding: "xs",
+      navbar: /* @__PURE__ */ React.createElement(
+        Navbar,
+        {
+          active: props.navbar.props.active,
+          navigate: props.navbar.props.navigate,
+          onLogout: props.navbar.props.onLogout,
+          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,
+        {
+          className: classes.link,
+          component: "a",
+          href: "https://www.localcivics.io",
+          target: "_blank"
+        },
+        "About"
+      ), /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          className: classes.link,
+          component: "a",
+          href: "https://www.localcivics.io/terms-of-service",
+          target: "_blank"
+        },
+        "Terms"
+      ), /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          className: classes.link,
+          component: "a",
+          href: "https://www.localcivics.io/privacy-policy",
+          target: "_blank"
+        },
+        "Privacy"
+      ), /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          className: classes.link,
+          component: "a",
+          href: "https://localcivics.notion.site/Help-Center-b52300f587b64fc0a61f512686e7626d",
+          target: "_blank"
+        },
+        "Help Center"
+      )))), /* @__PURE__ */ React.createElement(Container, { className: classes.afterFooter }, /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm" }, "\xA9 ", new Date().getFullYear(), " Local Civics. All rights reserved."), /* @__PURE__ */ React.createElement(Group, { spacing: 0, className: classes.social, position: "right", noWrap: true }, /* @__PURE__ */ React.createElement(ActionIcon, { component: "a", target: "_blank", href: "https://www.instagram.com/localcivics/", size: "lg" }, /* @__PURE__ */ React.createElement(IconBrandInstagram, { size: 18, stroke: 1.5 })), /* @__PURE__ */ React.createElement(ActionIcon, { component: "a", target: "_blank", href: "https://www.linkedin.com/company/localcivics", size: "lg" }, /* @__PURE__ */ React.createElement(IconBrandLinkedin, { size: 18, stroke: 1.5 })), /* @__PURE__ */ React.createElement(ActionIcon, { component: "a", target: "_blank", href: "https://www.facebook.com/localcivics/", size: "lg" }, /* @__PURE__ */ React.createElement(IconBrandFacebook, { size: 18, stroke: 1.5 })))))),
+      styles: (theme) => ({
+        main: { backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0] }
+      })
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, (props.loading || account.opened) && /* @__PURE__ */ React.createElement(Center, { style: { height: 400 } }, /* @__PURE__ */ React.createElement(Loader, null)), !props.loading && !account.opened && props.page),
+    /* @__PURE__ */ React.createElement(
+      SwitchAccount,
+      {
+        opened: account.opened,
+        account: account.account,
+        accounts: account.accounts,
+        onChange: account.onAccountChange,
+        onClose: () => account.setChangeModalOpen(false)
+      }
+    )
+  );
+};
+const useAccount = (account, accounts, onAccountChange) => {
+  const accountsKey = JSON.stringify(accounts);
+  const [changeModalOpen, setChangeModalOpen] = useState(false);
+  const [active, setActive] = useState(account);
+  React.useEffect(() => {
+    setActive(account);
+  }, [account, accountsKey]);
+  return {
+    opened: changeModalOpen,
+    account: active,
+    accounts,
+    setChangeModalOpen,
+    onAccountChange: (account2) => {
+      setActive(account2);
+      setChangeModalOpen(false);
+      onAccountChange(account2);
+    }
+  };
+};
+
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, Home, Lesson, Lessons, Navbar, Student, SwitchAccount };
+//# sourceMappingURL=index.mjs.map