@local-civics/mgmt-ui 0.1.194 → 0.1.196

package/dist/index.mjs

@@ -163,8 +163,8 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
 }
 
 var __defProp$d = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
 var __hasOwnProp$d = Object.prototype.hasOwnProperty;
 var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
@@ -180,7 +180,7 @@ var __spreadValues$d = (a, b) => {
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 const useStyles$u = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
@@ -212,7 +212,7 @@ const useStyles$u = createStyles((theme, _params, getRef) => {
       color: theme.colorScheme === "dark" ? theme.white : theme.black,
       borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
     },
-    link: __spreadProps$a(__spreadValues$d({}, theme.fn.focusStyles()), {
+    link: __spreadProps$9(__spreadValues$d({}, theme.fn.focusStyles()), {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
@@ -295,7 +295,7 @@ function Navbar(props) {
     }
     return /* @__PURE__ */ React.createElement(
       LinksGroup,
-      __spreadProps$a(__spreadValues$d(__spreadValues$d({
+      __spreadProps$9(__spreadValues$d(__spreadValues$d({
         key: item.label,
         active: props.active
       }, item), context), {
@@ -637,8 +637,6 @@ function useSortableData(items, config = { key: "", direction: null }) {
     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 });
   };
@@ -646,8 +644,8 @@ function useSortableData(items, config = { key: "", direction: null }) {
 }
 
 var __defProp$c = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
 var __hasOwnProp$c = Object.prototype.hasOwnProperty;
 var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -663,10 +661,10 @@ var __spreadValues$c = (a, b) => {
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function Table$k(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$9(__spreadValues$c({}, item), {
+    return props.items.map((item) => __spreadProps$8(__spreadValues$c({}, item), {
       status: item.isComplete ? 1 : 0
     }));
   }, [props.items]);
@@ -1118,8 +1116,8 @@ const SplitButton$4 = (props) => {
 };
 
 var __defProp$b = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
 var __hasOwnProp$b = Object.prototype.hasOwnProperty;
 var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
@@ -1135,14 +1133,14 @@ var __spreadValues$b = (a, b) => {
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function Table$c(props) {
-  React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$8(__spreadValues$b({}, item), {
+  const preparedItems = React.useMemo(() => {
+    return props.items.map((item) => __spreadProps$7(__spreadValues$b({}, item), {
       fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
     }));
   }, [props.items]);
-  const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1236,8 +1234,8 @@ function Table$c(props) {
 }
 
 var __defProp$a = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
 var __hasOwnProp$a = Object.prototype.hasOwnProperty;
 var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -1253,7 +1251,7 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 const useStyles$m = createStyles((theme) => ({
   title: {
     fontSize: 34,
@@ -1319,7 +1317,7 @@ const Class = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$7(__spreadValues$a({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$6(__spreadValues$a({}, 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);
@@ -2052,8 +2050,8 @@ function Stack$3(props) {
 }
 
 var __defProp$7 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
 var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
 var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
@@ -2069,10 +2067,10 @@ var __spreadValues$7 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 function Table$6(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$6(__spreadValues$7({}, item), {
+    return props.items.map((item) => __spreadProps$5(__spreadValues$7({}, item), {
       status: item.isComplete ? 2 : item.isStarted ? 1 : 0
     }));
   }, [props.items]);
@@ -2560,8 +2558,8 @@ function Table$4(props) {
 }
 
 var __defProp$6 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -2577,7 +2575,7 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const useStyles$a = createStyles((theme) => ({
   title: {
     fontSize: 34,
@@ -2639,7 +2637,7 @@ const People = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$5(__spreadValues$6({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$4(__spreadValues$6({}, 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);
@@ -2927,8 +2925,8 @@ const TrialHome = (props) => {
 };
 
 var __defProp$4 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
 var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
 var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -2944,7 +2942,7 @@ var __spreadValues$4 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3002,7 +3000,7 @@ function ImageCheckbox(_a) {
   const { classes, cx } = useStyles$7({ checked: value });
   return /* @__PURE__ */ React.createElement(
     UnstyledButton,
-    __spreadProps$4(__spreadValues$4({}, others), {
+    __spreadProps$3(__spreadValues$4({}, others), {
       onClick: () => handleChange(!value),
       className: cx(classes.button, className)
     }),
@@ -3023,7 +3021,7 @@ function ImageCheckbox(_a) {
 function SelectGrid(props) {
   const items = props.items.map((item) => /* @__PURE__ */ React.createElement(
     ImageCheckbox,
-    __spreadProps$4(__spreadValues$4({}, item), {
+    __spreadProps$3(__spreadValues$4({}, item), {
       key: item.title,
       onChange: (checked) => props.onChange(item.title, checked)
     })
@@ -3042,8 +3040,8 @@ function SelectGrid(props) {
 }
 
 var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
 var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -3059,7 +3057,7 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const useStyles$6 = createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
@@ -3169,7 +3167,7 @@ const TrialRegistration = (props) => {
       label: "School/Organization Name",
       placeholder: "What's the name of your school?",
       data: props.organizations.map((o) => {
-        return __spreadProps$3(__spreadValues$3({}, o), { value: o.displayName });
+        return __spreadProps$2(__spreadValues$3({}, o), { value: o.displayName });
       }),
       onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
       onChange: (next) => {
@@ -3181,7 +3179,7 @@ const TrialRegistration = (props) => {
     SelectGrid,
     {
       items: OPTIONS,
-      onChange: (e, checked) => setInterests(__spreadProps$3(__spreadValues$3({}, interests), { [e]: checked }))
+      onChange: (e, checked) => setInterests(__spreadProps$2(__spreadValues$3({}, interests), { [e]: checked }))
     }
   ), /* @__PURE__ */ React.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -3220,8 +3218,8 @@ const AdminProvider = (props) => {
 };
 
 var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
 var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
 var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
@@ -3237,7 +3235,7 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const useStyles$5 = createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
@@ -3333,7 +3331,7 @@ const App = (props) => {
       padding: "xs",
       navbar: props.navbar && /* @__PURE__ */ React.createElement(
         Navbar,
-        __spreadProps$2(__spreadValues$2({}, props.navbar.props), {
+        __spreadProps$1(__spreadValues$2({}, props.navbar.props), {
           onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
         })
       ),
@@ -3527,8 +3525,6 @@ function Stack$1(props) {
 }
 
 var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
 var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
 var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
@@ -3544,39 +3540,12 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 function Table$2(props) {
   const preparedItems = React.useMemo(() => {
-    console.group("Pathway Table Data Check");
-    console.log("Raw items from props:", props.items);
-    console.log("Categories available:", props.categories);
-    const mapped = props.items.map((item) => {
-      const flatItem = __spreadProps$1(__spreadValues$1({}, item), {
-        status: item.isComplete ? 1 : 0
-      });
-      if (item.categoryPoints) {
-        Object.keys(item.categoryPoints).forEach((catId) => {
-          flatItem[catId] = item.categoryPoints[catId];
-        });
-      }
-      return flatItem;
-    });
-    console.log("Transformed items (Flat):", mapped);
-    if (mapped.length > 0 && props.categories.length > 0) {
-      const firstStudent = mapped[0];
-      const firstCatId = props.categories[0].categoryId;
-      console.log(
-        `Matching Check: Does student have key [${firstCatId}]?`,
-        firstStudent.hasOwnProperty(firstCatId) ? "YES \u2705" : "NO \u274C",
-        "Value:",
-        firstStudent[firstCatId]
-      );
-    }
-    console.groupEnd();
-    return mapped;
-  }, [props.items, props.categories]);
+    return (props.items || []).map((item) => __spreadValues$1(__spreadValues$1({}, item), item.categoryPoints));
+  }, [props.items]);
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
-  if (props.items.length === 0) {
+  if (props.loading && props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
       {
@@ -3614,7 +3583,7 @@ function Table$2(props) {
           render: (row) => /* @__PURE__ */ React.createElement(Group, { spacing: "sm", noWrap: true }, /* @__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)))
         },
         {
-          accessor: "status",
+          accessor: "isComplete",
           title: "Status",
           sortable: true,
           titleStyle: { whiteSpace: "nowrap" },
@@ -3659,6 +3628,8 @@ function Table$1(props) {
     DataTable,
     {
       verticalSpacing: "sm",
+      withBorder: false,
+      borderRadius: "sm",
       sx: { minWidth: 700 },
       highlightOnHover: true,
       striped: true,
@@ -3671,7 +3642,23 @@ function Table$1(props) {
           accessor: "badgeName",
           title: "Badge Name",
           sortable: true,
-          render: (row) => /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href, color: "blue" }, row.badgeName)
+          render: (row) => /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              component: Link,
+              to: row.href,
+              sx: (theme) => ({
+                color: theme.colorScheme === "dark" ? theme.white : theme.black,
+                textDecoration: "none",
+                fontWeight: 500,
+                "&:hover": {
+                  textDecoration: "underline",
+                  color: theme.colors.blue[6]
+                }
+              })
+            },
+            row.badgeName
+          )
         },
         {
           accessor: "percentageCompletion",