@local-civics/mgmt-ui 0.1.186 → 0.1.187

package/dist/index.js

@@ -62,7 +62,7 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$u = core.createStyles((theme) => ({
+const useStyles$v = core.createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -73,7 +73,7 @@ const useStyles$u = core.createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$u();
+  const { classes } = useStyles$v();
   return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$9({ className: classes.user }, others), /* @__PURE__ */ React__namespace.createElement(core.Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React__namespace.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs" }, email)));
 }
 
@@ -84,7 +84,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$t = core.createStyles((theme, _params, getRef) => {
+const useStyles$u = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -137,7 +137,7 @@ const useStyles$t = core.createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$t();
+  const { classes, theme, cx } = useStyles$u();
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = React.useState(initiallyOpened || hasActiveLinks || false);
@@ -201,7 +201,7 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$s = core.createStyles((theme, _params, getRef) => {
+const useStyles$t = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -301,7 +301,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$s();
+  const { classes, cx } = useStyles$t();
   const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -344,7 +344,7 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$r = core.createStyles((theme) => ({
+const useStyles$s = core.createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -380,7 +380,7 @@ const useStyles$r = core.createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$r();
+  const { classes } = useStyles$s();
   return /* @__PURE__ */ React__namespace.createElement(
     core.Modal,
     {
@@ -394,7 +394,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$q = core.createStyles((theme) => ({
+const useStyles$r = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -435,7 +435,7 @@ const useStyles$q = core.createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$q();
+  const { classes, theme } = useStyles$r();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -452,7 +452,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$p = core.createStyles((theme) => ({
+const useStyles$q = core.createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -496,7 +496,7 @@ const useStyles$p = core.createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$p();
+  const { classes } = useStyles$q();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -516,7 +516,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$o = core.createStyles((theme) => ({
+const useStyles$p = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -531,7 +531,7 @@ const useStyles$o = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$4 = (props) => {
-  const { classes, theme } = useStyles$o();
+  const { classes, theme } = useStyles$p();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -559,7 +559,7 @@ const SplitButton$4 = (props) => {
   ));
 };
 
-const useStyles$n = core.createStyles((theme) => ({
+const useStyles$o = core.createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -610,7 +610,7 @@ const useStyles$n = core.createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$n();
+  const { classes } = useStyles$o();
   const title = props.title || "Nothing to display";
   const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
   return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React__namespace.createElement(core.Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -682,7 +682,7 @@ function Table$i(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$m = core.createStyles((theme) => ({
+const useStyles$n = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -695,7 +695,7 @@ const useStyles$m = core.createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$m();
+  const { classes } = useStyles$n();
   const [tab, setTab] = React.useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -793,7 +793,7 @@ function Table$h(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$l = core.createStyles((theme) => ({
+const useStyles$m = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -806,7 +806,7 @@ const useStyles$l = core.createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$l();
+  const { classes } = useStyles$m();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Key milestones that reflect skill development, micro-credentials, or academic progress"))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -1036,7 +1036,63 @@ const SplitButton$3 = (props) => {
   ));
 };
 
+function useSortableData(items, config = { key: "", direction: null }) {
+  const [sortConfig, setSortConfig] = React.useState(config);
+  const sortedItems = React.useMemo(() => {
+    let sortableItems = [...items];
+    if (sortConfig.direction !== null) {
+      sortableItems.sort((a, b) => {
+        const aValue = a[sortConfig.key];
+        const bValue = b[sortConfig.key];
+        if (aValue === bValue)
+          return 0;
+        if (aValue === null || aValue === void 0)
+          return 1;
+        if (bValue === null || bValue === void 0)
+          return -1;
+        if (typeof aValue === "number" && typeof bValue === "number") {
+          return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
+        }
+        if (typeof aValue === "boolean" && typeof bValue === "boolean") {
+          return sortConfig.direction === "asc" ? aValue === bValue ? 0 : aValue ? 1 : -1 : aValue === bValue ? 0 : aValue ? -1 : 1;
+        }
+        if (aValue instanceof Date && bValue instanceof Date) {
+          return sortConfig.direction === "asc" ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime();
+        }
+        return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
+      });
+    }
+    return sortableItems;
+  }, [items, sortConfig]);
+  const requestSort = (key) => {
+    let direction = "asc";
+    if (sortConfig.key === key && sortConfig.direction === "asc") {
+      direction = "desc";
+    } else if (sortConfig.key === key && sortConfig.direction === "desc") {
+      direction = null;
+    }
+    setSortConfig({ key, direction });
+  };
+  return { items: sortedItems, requestSort, sortConfig };
+}
+
+const useStyles$l = core.createStyles((theme) => ({
+  th: { padding: "0 !important" },
+  control: {
+    width: "100%",
+    padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+    "&:hover": {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
+    }
+  }
+}));
+function Th$1({ children, reversed, sorted, onSort }) {
+  const { classes } = useStyles$l();
+  const Icon = sorted ? reversed ? icons.IconChevronUp : icons.IconChevronDown : icons.IconSelector;
+  return /* @__PURE__ */ React__namespace.createElement("th", { className: classes.th }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm" }, children), /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 14, stroke: 1.5 })))));
+}
 function Table$b(props) {
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1065,7 +1121,55 @@ function Table$b(props) {
       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)));
+  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$1,
+    {
+      sorted: sortConfig.key === "givenName",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("givenName")
+    },
+    "Name"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$1,
+    {
+      sorted: sortConfig.key === "isAdmin",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("isAdmin")
+    },
+    "Role"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$1,
+    {
+      sorted: sortConfig.key === "badgesEarned",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("badgesEarned")
+    },
+    "Badges Earned"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$1,
+    {
+      sorted: sortConfig.key === "lessonsCompleted",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("lessonsCompleted")
+    },
+    "Lessons Completed"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$1,
+    {
+      sorted: sortConfig.key === "hasAccount",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("hasAccount")
+    },
+    "Account Created?"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Th$1,
+    {
+      sorted: sortConfig.key === "lastActivity",
+      reversed: sortConfig.direction === "desc",
+      onSort: () => requestSort("lastActivity")
+    },
+    "Last Active"
+  ), /* @__PURE__ */ React__namespace.createElement("th", null), " ")), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
 var __defProp$7 = Object.defineProperty;
@@ -1267,46 +1371,6 @@ const DropzoneButton$1 = (props) => {
   } }, "Select file"));
 };
 
-function useSortableData(items, config = { key: "", direction: null }) {
-  const [sortConfig, setSortConfig] = React.useState(config);
-  const sortedItems = React.useMemo(() => {
-    let sortableItems = [...items];
-    if (sortConfig.direction !== null) {
-      sortableItems.sort((a, b) => {
-        const aValue = a[sortConfig.key];
-        const bValue = b[sortConfig.key];
-        if (aValue === bValue)
-          return 0;
-        if (aValue === null || aValue === void 0)
-          return 1;
-        if (bValue === null || bValue === void 0)
-          return -1;
-        if (typeof aValue === "number" && typeof bValue === "number") {
-          return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
-        }
-        if (typeof aValue === "boolean" && typeof bValue === "boolean") {
-          return sortConfig.direction === "asc" ? aValue === bValue ? 0 : aValue ? 1 : -1 : aValue === bValue ? 0 : aValue ? -1 : 1;
-        }
-        if (aValue instanceof Date && bValue instanceof Date) {
-          return sortConfig.direction === "asc" ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime();
-        }
-        return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
-      });
-    }
-    return sortableItems;
-  }, [items, sortConfig]);
-  const requestSort = (key) => {
-    let direction = "asc";
-    if (sortConfig.key === key && sortConfig.direction === "asc") {
-      direction = "desc";
-    } else if (sortConfig.key === key && sortConfig.direction === "desc") {
-      direction = null;
-    }
-    setSortConfig({ key, direction });
-  };
-  return { items: sortedItems, requestSort, sortConfig };
-}
-
 const useStyles$j = core.createStyles((theme) => ({
   th: { padding: "0 !important" },
   control: {
@@ -1352,15 +1416,7 @@ function Table$a(props) {
       onSort: () => requestSort("name")
     },
     "Class Name"
-  ), /* @__PURE__ */ React__namespace.createElement(
-    Th,
-    {
-      sorted: sortConfig.key === "description",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("description")
-    },
-    "Description"
-  ), /* @__PURE__ */ React__namespace.createElement(
+  ), /* @__PURE__ */ React__namespace.createElement("th", { style: { padding: "7px 16px" } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm" }, "Description")), /* @__PURE__ */ React__namespace.createElement(
     Th,
     {
       sorted: sortConfig.key === "numberOfStudents",