@local-civics/mgmt-ui 0.1.196 → 0.1.197

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
 import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, Modal, Loader, Container, Button, Title, UnstyledButton, Card, SimpleGrid, Tabs as Tabs$1, Stack as Stack$5, Grid, ActionIcon, LoadingOverlay, Select, Table as Table$l, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
-import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconChevronUp, IconChevronDown, IconSelector, IconInfoCircle, IconColorSwatch, IconPointer, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconChevronDown, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
 import { Link } from 'react-router-dom';
 import { showNotification, NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
@@ -42,7 +42,7 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$w = createStyles((theme) => ({
+const useStyles$v = createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -53,7 +53,7 @@ const useStyles$w = createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$w();
+  const { classes } = useStyles$v();
   return /* @__PURE__ */ React.createElement(Group, __spreadValues$e({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
 }
 
@@ -64,7 +64,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$v = createStyles((theme, _params, getRef) => {
+const useStyles$u = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -117,7 +117,7 @@ const useStyles$v = createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$v();
+  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] = useState(initiallyOpened || hasActiveLinks || false);
@@ -181,7 +181,7 @@ var __spreadValues$d = (a, b) => {
   return a;
 };
 var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-const useStyles$u = createStyles((theme, _params, getRef) => {
+const useStyles$t = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -282,7 +282,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$u();
+  const { classes, cx } = useStyles$t();
   const [burgerOpen, setBurgerOpen] = React.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -325,7 +325,7 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$t = createStyles((theme) => ({
+const useStyles$s = createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -361,7 +361,7 @@ const useStyles$t = createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$t();
+  const { classes } = useStyles$s();
   return /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -375,7 +375,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$s = createStyles((theme) => ({
+const useStyles$r = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -416,7 +416,7 @@ const useStyles$s = createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$s();
+  const { classes, theme } = useStyles$r();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React.createElement(Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -433,7 +433,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$r = createStyles((theme) => ({
+const useStyles$q = createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -477,7 +477,7 @@ const useStyles$r = createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$r();
+  const { classes } = useStyles$q();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -497,7 +497,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
 };
 
-const useStyles$q = createStyles((theme) => ({
+const useStyles$p = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -512,7 +512,7 @@ const useStyles$q = createStyles((theme) => ({
   }
 }));
 const SplitButton$5 = (props) => {
-  const { classes, theme } = useStyles$q();
+  const { classes, theme } = useStyles$p();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -540,7 +540,7 @@ const SplitButton$5 = (props) => {
   ));
 };
 
-const useStyles$p = createStyles((theme) => ({
+const useStyles$o = createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -591,7 +591,7 @@ const useStyles$p = createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$p();
+  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.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 }));
@@ -761,7 +761,7 @@ function Table$j(props) {
   ));
 }
 
-const useStyles$o = createStyles((theme) => ({
+const useStyles$n = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -774,7 +774,7 @@ const useStyles$o = createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$o();
+  const { classes } = useStyles$n();
   const [tab, setTab] = useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -872,7 +872,7 @@ function Table$i(props) {
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$n = createStyles((theme) => ({
+const useStyles$m = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -885,7 +885,7 @@ const useStyles$n = createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$n();
+  const { classes } = useStyles$m();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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" }, "Key milestones that reflect skill development, micro-credentials, or academic progress"))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -1252,7 +1252,7 @@ var __spreadValues$a = (a, b) => {
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const useStyles$m = createStyles((theme) => ({
+const useStyles$l = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1285,7 +1285,7 @@ const useStyles$m = createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$m();
+  const { classes } = useStyles$l();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1386,7 +1386,7 @@ const Class = (props) => {
   ))))));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$m();
+  const { classes, theme } = useStyles$l();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -1432,21 +1432,6 @@ const DropzoneButton$1 = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$l = 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({ children, reversed, sorted, onSort }) {
-  const { classes } = useStyles$l();
-  const Icon = sorted ? reversed ? IconChevronUp : IconChevronDown : IconSelector;
-  return /* @__PURE__ */ React.createElement("th", { className: classes.th }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React.createElement(Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: 1.5 })))));
-}
 function Table$b(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
@@ -1468,24 +1453,49 @@ function Table$b(props) {
     confirmProps: { color: "red" },
     onConfirm: () => props.onDeleteClass(group)
   });
-  const rows = sortedItems.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.classId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.name))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.description)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.numberOfStudents || 0)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
-    Th,
-    {
-      sorted: sortConfig.key === "name",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("name")
-    },
-    "Class Name"
-  ), /* @__PURE__ */ React.createElement("th", { style: { padding: "7px 16px" } }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm" }, "Description")), /* @__PURE__ */ React.createElement(
-    Th,
+  const sortStatus = {
+    columnAccessor: sortConfig.key,
+    direction: sortConfig.direction === "desc" ? "desc" : "asc"
+  };
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
+    DataTable,
     {
-      sorted: sortConfig.key === "numberOfStudents",
-      reversed: sortConfig.direction === "desc",
-      onSort: () => requestSort("numberOfStudents")
-    },
-    "# of Students"
-  ), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+      withBorder: false,
+      borderRadius: "sm",
+      verticalSpacing: "sm",
+      sx: { minWidth: 700 },
+      highlightOnHover: true,
+      striped: true,
+      records: sortedItems,
+      idAccessor: "classId",
+      sortStatus,
+      onSortStatusChange: (status) => requestSort(status.columnAccessor),
+      columns: [
+        {
+          accessor: "name",
+          title: "Class Name",
+          sortable: true,
+          render: (row) => /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Text, { size: 14, weight: 500 }, row.name))
+        },
+        {
+          accessor: "description",
+          title: "Description",
+          render: (row) => /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.description)
+        },
+        {
+          accessor: "numberOfStudents",
+          title: "# of Students",
+          sortable: true,
+          render: (row) => /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.numberOfStudents || 0)
+        },
+        {
+          accessor: "actions",
+          title: "",
+          render: (row) => /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React.createElement(ActionIcon, { color: "red", onClick: () => openDeleteModal(row) }, /* @__PURE__ */ React.createElement(IconTrash, { size: 16, stroke: 1.5 })))
+        }
+      ]
+    }
+  ));
 }
 
 var __defProp$9 = Object.defineProperty;
@@ -2074,6 +2084,11 @@ function Table$6(props) {
       status: item.isComplete ? 2 : item.isStarted ? 1 : 0
     }));
   }, [props.items]);
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
+  const sortStatus = {
+    columnAccessor: sortConfig.key,
+    direction: sortConfig.direction === "desc" ? "desc" : "asc"
+  };
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -2085,11 +2100,6 @@ function Table$6(props) {
       }
     );
   }
-  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
-  const sortStatus = {
-    columnAccessor: sortConfig.key,
-    direction: sortConfig.direction === "desc" ? "desc" : "asc"
-  };
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
     DataTable,
     {