@local-civics/mgmt-ui 0.1.71 → 0.1.72

package/dist/index.d.ts

@@ -227,8 +227,8 @@ type DashboardProps = {
     lessons: Item$b[];
     classId: string;
     percentageOfAccountsCreated: number;
-    percentageOfBadgesEarned: number;
-    percentageOfLessonsCompleted: number;
+    numberOfBadgesEarned: number;
+    numberOfLessonsCompleted: number;
     onClassChange: (classId: string) => void;
     onViewStudentProfile: (student: Item$f) => void;
     onBadgeClick: (badge: Item$c) => void;
@@ -275,7 +275,6 @@ type ClassProps = {
     percentageOfAccountsCreated: number;
     numberOfBadgesEarned: number;
     numberOfLessonsCompleted: number;
-    withClassLink?: boolean;
     onBackClick: () => void;
     onCreateMembers: (members: MemberItem[]) => void;
     onDeleteMember: (student: MemberItem) => void;

package/dist/index.js

@@ -32,7 +32,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
 
-const useStyles$n = core.createStyles((theme) => ({
+const useStyles$m = core.createStyles((theme) => ({
   link: {
     width: 50,
     height: 50,
@@ -60,7 +60,7 @@ const data$1 = [
   { icon: icons.IconLambda, label: "Lessons", href: "/lessons" }
 ];
 const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
-  const { classes, cx } = useStyles$n();
+  const { classes, cx } = useStyles$m();
   return /* @__PURE__ */ React__namespace.createElement(core.Tooltip, { label, position: "right", transitionDuration: 0 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick, className: cx(classes.link, { [classes.active]: active }) }, /* @__PURE__ */ React__namespace.createElement(Icon, { stroke: 1.5 })));
 };
 const Navbar = (props) => {
@@ -119,7 +119,7 @@ var __objRest$1 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$m = core.createStyles((theme) => ({
+const useStyles$l = core.createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -130,7 +130,7 @@ const useStyles$m = core.createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$1(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$m();
+  const { classes } = useStyles$l();
   return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$6({ className: classes.user }, others), /* @__PURE__ */ React__namespace.createElement(core.Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React__namespace.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs" }, email)));
 }
 
@@ -141,7 +141,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$l = core.createStyles((theme, _params, getRef) => {
+const useStyles$k = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -194,7 +194,7 @@ const useStyles$l = core.createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$l();
+  const { classes, theme, cx } = useStyles$k();
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = React.useState(initiallyOpened || hasActiveLinks || false);
@@ -258,7 +258,7 @@ var __spreadValues$5 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$k = core.createStyles((theme, _params, getRef) => {
+const useStyles$j = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -352,7 +352,7 @@ const data = [
   }
 ];
 function NestedNavbar(props) {
-  const { classes, cx } = useStyles$k();
+  const { classes, cx } = useStyles$j();
   const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -389,7 +389,7 @@ function NestedNavbar(props) {
   } }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$j = core.createStyles((theme) => ({
+const useStyles$i = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -430,7 +430,7 @@ const useStyles$j = core.createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$j();
+  const { classes, theme } = useStyles$i();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -447,7 +447,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$i = core.createStyles((theme) => ({
+const useStyles$h = core.createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -494,7 +494,7 @@ const useStyles$i = core.createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data }) => {
-  const { classes } = useStyles$i();
+  const { classes } = useStyles$h();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -513,7 +513,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
 };
 
-const useStyles$h = core.createStyles((theme) => ({
+const useStyles$g = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -528,7 +528,7 @@ const useStyles$h = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$3 = (props) => {
-  const { classes, theme } = useStyles$h();
+  const { classes, theme } = useStyles$g();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -565,7 +565,7 @@ const SplitButton$3 = (props) => {
   ))));
 };
 
-const useStyles$g = core.createStyles((theme) => ({
+const useStyles$f = core.createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -616,7 +616,7 @@ const useStyles$g = core.createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$g();
+  const { classes } = useStyles$f();
   const title = props.title || "Nothing to display";
   const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
   return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React__namespace.createElement(core.Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -688,7 +688,7 @@ function Table$f(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$f = core.createStyles((theme) => ({
+const useStyles$e = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -701,7 +701,7 @@ const useStyles$f = core.createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$e();
   const [tab, setTab] = React.useState("lessons");
   const numberOfStudents = props.students.length;
   const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -798,7 +798,7 @@ function Table$e(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$e = core.createStyles((theme) => ({
+const useStyles$d = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -811,7 +811,7 @@ const useStyles$e = core.createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$d();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -945,14 +945,12 @@ const Dashboard = (props) => {
       unit: "%"
     },
     {
-      title: "BADGE COMPLETION",
-      value: props.percentageOfBadgesEarned,
-      unit: "%"
+      title: "BADGES EARNED",
+      value: props.numberOfBadgesEarned
     },
     {
-      title: "LESSON COMPLETION",
-      value: props.percentageOfLessonsCompleted,
-      unit: "%"
+      title: "LESSONS COMPLETED",
+      value: props.numberOfLessonsCompleted
     }
   ] }), /* @__PURE__ */ React__namespace.createElement(
     core.Select,
@@ -1018,49 +1016,22 @@ const Dashboard = (props) => {
   )))))));
 };
 
-const useStyles$d = core.createStyles((theme) => ({
-  button: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    marginLeft: 0,
-    marginRight: 0
-  },
-  menuControl: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    border: 0,
-    borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
-  }
-}));
 const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$d();
-  const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
-  const hasMenu = !!props.withClassLink;
-  return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
     {
-      className: hasMenu ? classes.button : "",
       leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 }),
       onClick: props.onAddMembersClick
     },
     "Add students"
-  ), hasMenu && /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
-    core.ActionIcon,
-    {
-      variant: "filled",
-      color: theme.primaryColor,
-      size: 36,
-      className: classes.menuControl
-    },
-    /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
-  )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, !!props.withClassLink && /* @__PURE__ */ React__namespace.createElement(
-    core.Menu.Item,
+  ), /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
     {
-      icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
+      leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
       onClick: props.onCopyClassLinkClick
     },
     "Copy class link"
-  ))));
+  ));
 };
 
 function Table$8(props) {
@@ -1087,9 +1058,9 @@ function Table$8(props) {
     core.Select,
     {
       size: "sm",
-      value: row.isAdmin ? "admin" : "student",
+      value: row.isAdmin ? "educator" : "student",
       onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
-      data: [{ value: "student", label: "Student" }, { value: "admin", label: "Admin" }]
+      data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }]
     }
   ))), /* @__PURE__ */ React__namespace.createElement("td", null, row.badgesEarned), /* @__PURE__ */ React__namespace.createElement("td", null, row.lessonsCompleted), /* @__PURE__ */ React__namespace.createElement("td", null, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { color: "green" })), /* @__PURE__ */ React__namespace.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red" }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Role"), /* @__PURE__ */ React__namespace.createElement("th", null, "Badges Earned"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lessons Completed"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "Last Active"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
@@ -1215,7 +1186,6 @@ const Class = (props) => {
   )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
     SplitButton$2,
     {
-      withClassLink: props.withClassLink,
       onAddMembersClick: () => setOpened(true),
       onCopyClassLinkClick: props.onCopyLinkClick
     }