@local-civics/mgmt-ui 0.1.188 → 0.1.190

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +260 -142
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +261 -143
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -34,30 +34,30 @@ function _interopNamespaceDefault(e) {
34
34
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
35
35
  var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
36
36
 
37
- var __defProp$a = Object.defineProperty;
38
- var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
39
- var __hasOwnProp$a = Object.prototype.hasOwnProperty;
40
- var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
41
- var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
42
- var __spreadValues$a = (a, b) => {
37
+ var __defProp$c = Object.defineProperty;
38
+ var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
39
+ var __hasOwnProp$c = Object.prototype.hasOwnProperty;
40
+ var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
41
+ var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
42
+ var __spreadValues$c = (a, b) => {
43
43
  for (var prop in b || (b = {}))
44
- if (__hasOwnProp$a.call(b, prop))
45
- __defNormalProp$a(a, prop, b[prop]);
46
- if (__getOwnPropSymbols$a)
47
- for (var prop of __getOwnPropSymbols$a(b)) {
48
- if (__propIsEnum$a.call(b, prop))
49
- __defNormalProp$a(a, prop, b[prop]);
44
+ if (__hasOwnProp$c.call(b, prop))
45
+ __defNormalProp$c(a, prop, b[prop]);
46
+ if (__getOwnPropSymbols$c)
47
+ for (var prop of __getOwnPropSymbols$c(b)) {
48
+ if (__propIsEnum$c.call(b, prop))
49
+ __defNormalProp$c(a, prop, b[prop]);
50
50
  }
51
51
  return a;
52
52
  };
53
53
  var __objRest$2 = (source, exclude) => {
54
54
  var target = {};
55
55
  for (var prop in source)
56
- if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
56
+ if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
57
57
  target[prop] = source[prop];
58
- if (source != null && __getOwnPropSymbols$a)
59
- for (var prop of __getOwnPropSymbols$a(source)) {
60
- if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
58
+ if (source != null && __getOwnPropSymbols$c)
59
+ for (var prop of __getOwnPropSymbols$c(source)) {
60
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
61
61
  target[prop] = source[prop];
62
62
  }
63
63
  return target;
@@ -74,7 +74,7 @@ const useStyles$w = core.createStyles((theme) => ({
74
74
  function UserButton(_a) {
75
75
  var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
76
76
  const { classes } = useStyles$w();
77
- return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$a({ 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)));
77
+ return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$c({ 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)));
78
78
  }
79
79
 
80
80
  const compact = (num) => {
@@ -182,25 +182,25 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
182
182
  ), hasLinks ? /* @__PURE__ */ React__namespace.createElement(core.Collapse, { in: opened }, items) : null);
183
183
  }
184
184
 
185
- var __defProp$9 = Object.defineProperty;
186
- var __defProps$6 = Object.defineProperties;
187
- var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
188
- var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
189
- var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
190
- var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
191
- var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
192
- var __spreadValues$9 = (a, b) => {
185
+ var __defProp$b = Object.defineProperty;
186
+ var __defProps$8 = Object.defineProperties;
187
+ var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
188
+ var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
189
+ var __hasOwnProp$b = Object.prototype.hasOwnProperty;
190
+ var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
191
+ var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
192
+ var __spreadValues$b = (a, b) => {
193
193
  for (var prop in b || (b = {}))
194
- if (__hasOwnProp$9.call(b, prop))
195
- __defNormalProp$9(a, prop, b[prop]);
196
- if (__getOwnPropSymbols$9)
197
- for (var prop of __getOwnPropSymbols$9(b)) {
198
- if (__propIsEnum$9.call(b, prop))
199
- __defNormalProp$9(a, prop, b[prop]);
194
+ if (__hasOwnProp$b.call(b, prop))
195
+ __defNormalProp$b(a, prop, b[prop]);
196
+ if (__getOwnPropSymbols$b)
197
+ for (var prop of __getOwnPropSymbols$b(b)) {
198
+ if (__propIsEnum$b.call(b, prop))
199
+ __defNormalProp$b(a, prop, b[prop]);
200
200
  }
201
201
  return a;
202
202
  };
203
- var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
203
+ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
204
204
  const useStyles$u = core.createStyles((theme, _params, getRef) => {
205
205
  const icon = getRef("icon");
206
206
  return {
@@ -232,7 +232,7 @@ const useStyles$u = core.createStyles((theme, _params, getRef) => {
232
232
  color: theme.colorScheme === "dark" ? theme.white : theme.black,
233
233
  borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
234
234
  },
235
- link: __spreadProps$6(__spreadValues$9({}, theme.fn.focusStyles()), {
235
+ link: __spreadProps$8(__spreadValues$b({}, theme.fn.focusStyles()), {
236
236
  display: "flex",
237
237
  alignItems: "center",
238
238
  textDecoration: "none",
@@ -314,12 +314,12 @@ function Navbar(props) {
314
314
  }
315
315
  return /* @__PURE__ */ React__namespace.createElement(
316
316
  LinksGroup,
317
- __spreadProps$6(__spreadValues$9(__spreadValues$9({
317
+ __spreadProps$8(__spreadValues$b(__spreadValues$b({
318
318
  key: item.label,
319
319
  active: props.active
320
320
  }, item), context), {
321
321
  links: (item.links || []).map((link) => {
322
- return __spreadValues$9(__spreadValues$9({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
322
+ return __spreadValues$b(__spreadValues$b({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
323
323
  })
324
324
  })
325
325
  );
@@ -624,7 +624,72 @@ function Stack$3(props) {
624
624
  return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
625
625
  }
626
626
 
627
+ function useSortableData(items, config = { key: "", direction: null }) {
628
+ const [sortConfig, setSortConfig] = React.useState(config);
629
+ const sortedItems = React.useMemo(() => {
630
+ let sortableItems = [...items];
631
+ if (sortConfig.direction !== null) {
632
+ sortableItems.sort((a, b) => {
633
+ const aValue = a[sortConfig.key];
634
+ const bValue = b[sortConfig.key];
635
+ if (aValue === bValue)
636
+ return 0;
637
+ if (aValue === null || aValue === void 0)
638
+ return 1;
639
+ if (bValue === null || bValue === void 0)
640
+ return -1;
641
+ if (typeof aValue === "number" && typeof bValue === "number") {
642
+ return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
643
+ }
644
+ if (typeof aValue === "boolean" && typeof bValue === "boolean") {
645
+ return sortConfig.direction === "asc" ? aValue === bValue ? 0 : aValue ? 1 : -1 : aValue === bValue ? 0 : aValue ? -1 : 1;
646
+ }
647
+ if (aValue instanceof Date && bValue instanceof Date) {
648
+ return sortConfig.direction === "asc" ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime();
649
+ }
650
+ return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
651
+ });
652
+ }
653
+ return sortableItems;
654
+ }, [items, sortConfig]);
655
+ const requestSort = (key) => {
656
+ let direction = "asc";
657
+ if (sortConfig.key === key && sortConfig.direction === "asc") {
658
+ direction = "desc";
659
+ } else if (sortConfig.key === key && sortConfig.direction === "desc") {
660
+ direction = null;
661
+ }
662
+ setSortConfig({ key, direction });
663
+ };
664
+ return { items: sortedItems, requestSort, sortConfig };
665
+ }
666
+
667
+ var __defProp$a = Object.defineProperty;
668
+ var __defProps$7 = Object.defineProperties;
669
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
670
+ var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
671
+ var __hasOwnProp$a = Object.prototype.hasOwnProperty;
672
+ var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
673
+ var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
674
+ var __spreadValues$a = (a, b) => {
675
+ for (var prop in b || (b = {}))
676
+ if (__hasOwnProp$a.call(b, prop))
677
+ __defNormalProp$a(a, prop, b[prop]);
678
+ if (__getOwnPropSymbols$a)
679
+ for (var prop of __getOwnPropSymbols$a(b)) {
680
+ if (__propIsEnum$a.call(b, prop))
681
+ __defNormalProp$a(a, prop, b[prop]);
682
+ }
683
+ return a;
684
+ };
685
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
627
686
  function Table$j(props) {
687
+ const preparedItems = React__namespace.useMemo(() => {
688
+ return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
689
+ status: item.isComplete ? 1 : 0
690
+ }));
691
+ }, [props.items]);
692
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
628
693
  if (props.items.length === 0) {
629
694
  return /* @__PURE__ */ React__namespace.createElement(
630
695
  PlaceholderBanner,
@@ -636,6 +701,10 @@ function Table$j(props) {
636
701
  }
637
702
  );
638
703
  }
704
+ const sortStatus = {
705
+ columnAccessor: sortConfig.key,
706
+ direction: sortConfig.direction === "desc" ? "desc" : "asc"
707
+ };
639
708
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
640
709
  mantineDatatable.DataTable,
641
710
  {
@@ -646,14 +715,19 @@ function Table$j(props) {
646
715
  withColumnBorders: true,
647
716
  striped: true,
648
717
  highlightOnHover: true,
649
- records: props.items,
718
+ records: sortedItems,
719
+ sortStatus,
720
+ onSortStatusChange: (status) => requestSort(status.columnAccessor),
650
721
  idAccessor: "userId",
651
722
  columns: [{
652
723
  accessor: "name",
653
724
  title: "Student Name",
725
+ sortable: true,
654
726
  render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email)))
655
727
  }, {
656
728
  accessor: "status",
729
+ title: "Status",
730
+ sortable: true,
657
731
  render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Incomplete"))
658
732
  }],
659
733
  rowExpansion: {
@@ -664,6 +738,7 @@ function Table$j(props) {
664
738
  }
665
739
 
666
740
  function Table$i(props) {
741
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
667
742
  if (props.items.length === 0) {
668
743
  return /* @__PURE__ */ React__namespace.createElement(
669
744
  PlaceholderBanner,
@@ -675,11 +750,36 @@ function Table$i(props) {
675
750
  }
676
751
  );
677
752
  }
678
- const rows = props.items.map((row) => {
679
- const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
680
- return /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, percentageCompletion, "%"));
681
- });
682
- 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)));
753
+ const sortStatus = {
754
+ columnAccessor: sortConfig.key,
755
+ direction: sortConfig.direction === "desc" ? "desc" : "asc"
756
+ };
757
+ return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
758
+ mantineDatatable.DataTable,
759
+ {
760
+ verticalSpacing: "sm",
761
+ sx: { minWidth: 700 },
762
+ highlightOnHover: true,
763
+ striped: true,
764
+ records: sortedItems,
765
+ sortStatus,
766
+ onSortStatusChange: (status) => requestSort(status.columnAccessor),
767
+ columns: [
768
+ {
769
+ accessor: "lessonName",
770
+ title: "Lesson Name",
771
+ sortable: true,
772
+ render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href }, row.lessonName)
773
+ },
774
+ {
775
+ accessor: "percentageCompletion",
776
+ title: "Lesson Completion",
777
+ sortable: true,
778
+ render: (row) => `${Math.round((row.percentageCompletion + Number.EPSILON) * 100)}%`
779
+ }
780
+ ]
781
+ }
782
+ ));
683
783
  }
684
784
 
685
785
  const useStyles$o = core.createStyles((theme) => ({
@@ -1036,46 +1136,6 @@ const SplitButton$3 = (props) => {
1036
1136
  ));
1037
1137
  };
1038
1138
 
1039
- function useSortableData(items, config = { key: "", direction: null }) {
1040
- const [sortConfig, setSortConfig] = React.useState(config);
1041
- const sortedItems = React.useMemo(() => {
1042
- let sortableItems = [...items];
1043
- if (sortConfig.direction !== null) {
1044
- sortableItems.sort((a, b) => {
1045
- const aValue = a[sortConfig.key];
1046
- const bValue = b[sortConfig.key];
1047
- if (aValue === bValue)
1048
- return 0;
1049
- if (aValue === null || aValue === void 0)
1050
- return 1;
1051
- if (bValue === null || bValue === void 0)
1052
- return -1;
1053
- if (typeof aValue === "number" && typeof bValue === "number") {
1054
- return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
1055
- }
1056
- if (typeof aValue === "boolean" && typeof bValue === "boolean") {
1057
- return sortConfig.direction === "asc" ? aValue === bValue ? 0 : aValue ? 1 : -1 : aValue === bValue ? 0 : aValue ? -1 : 1;
1058
- }
1059
- if (aValue instanceof Date && bValue instanceof Date) {
1060
- return sortConfig.direction === "asc" ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime();
1061
- }
1062
- return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
1063
- });
1064
- }
1065
- return sortableItems;
1066
- }, [items, sortConfig]);
1067
- const requestSort = (key) => {
1068
- let direction = "asc";
1069
- if (sortConfig.key === key && sortConfig.direction === "asc") {
1070
- direction = "desc";
1071
- } else if (sortConfig.key === key && sortConfig.direction === "desc") {
1072
- direction = null;
1073
- }
1074
- setSortConfig({ key, direction });
1075
- };
1076
- return { items: sortedItems, requestSort, sortConfig };
1077
- }
1078
-
1079
1139
  const useStyles$m = core.createStyles((theme) => ({
1080
1140
  th: { padding: "0 !important" },
1081
1141
  control: {
@@ -1112,7 +1172,7 @@ function Table$b(props) {
1112
1172
  confirmProps: { color: "red" },
1113
1173
  onConfirm: () => props.onDelete && props.onDelete(student)
1114
1174
  });
1115
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.email }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: row.href }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Box, { maw: 150 }, /* @__PURE__ */ React__namespace.createElement(
1175
+ const rows = sortedItems.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.email }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: row.href }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Box, { maw: 150 }, /* @__PURE__ */ React__namespace.createElement(
1116
1176
  core.Select,
1117
1177
  {
1118
1178
  size: "sm",
@@ -1172,25 +1232,25 @@ function Table$b(props) {
1172
1232
  ), /* @__PURE__ */ React__namespace.createElement("th", null), " ")), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
1173
1233
  }
1174
1234
 
1175
- var __defProp$8 = Object.defineProperty;
1176
- var __defProps$5 = Object.defineProperties;
1177
- var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
1178
- var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
1179
- var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
1180
- var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
1181
- var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1182
- var __spreadValues$8 = (a, b) => {
1235
+ var __defProp$9 = Object.defineProperty;
1236
+ var __defProps$6 = Object.defineProperties;
1237
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
1238
+ var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
1239
+ var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
1240
+ var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
1241
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1242
+ var __spreadValues$9 = (a, b) => {
1183
1243
  for (var prop in b || (b = {}))
1184
- if (__hasOwnProp$8.call(b, prop))
1185
- __defNormalProp$8(a, prop, b[prop]);
1186
- if (__getOwnPropSymbols$8)
1187
- for (var prop of __getOwnPropSymbols$8(b)) {
1188
- if (__propIsEnum$8.call(b, prop))
1189
- __defNormalProp$8(a, prop, b[prop]);
1244
+ if (__hasOwnProp$9.call(b, prop))
1245
+ __defNormalProp$9(a, prop, b[prop]);
1246
+ if (__getOwnPropSymbols$9)
1247
+ for (var prop of __getOwnPropSymbols$9(b)) {
1248
+ if (__propIsEnum$9.call(b, prop))
1249
+ __defNormalProp$9(a, prop, b[prop]);
1190
1250
  }
1191
1251
  return a;
1192
1252
  };
1193
- var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
1253
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
1194
1254
  const useStyles$l = core.createStyles((theme) => ({
1195
1255
  title: {
1196
1256
  fontSize: 34,
@@ -1256,27 +1316,27 @@ const Class = (props) => {
1256
1316
  padding: "xl",
1257
1317
  size: "xl"
1258
1318
  },
1259
- /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$5(__spreadValues$8({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
1319
+ /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$6(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
1260
1320
  const values = form$1.values;
1261
1321
  form$1.reset();
1262
1322
  setOpened(false);
1263
1323
  props.onCreateMembers && props.onCreateMembers([values]);
1264
1324
  }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
1265
1325
  core.TextInput,
1266
- __spreadValues$8({
1326
+ __spreadValues$9({
1267
1327
  withAsterisk: true,
1268
1328
  label: "Email",
1269
1329
  placeholder: "Email"
1270
1330
  }, form$1.getInputProps("email"))
1271
1331
  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
1272
1332
  core.TextInput,
1273
- __spreadValues$8({
1333
+ __spreadValues$9({
1274
1334
  label: "Given name",
1275
1335
  placeholder: "Given name"
1276
1336
  }, form$1.getInputProps("givenName"))
1277
1337
  ), /* @__PURE__ */ React__namespace.createElement(
1278
1338
  core.TextInput,
1279
- __spreadValues$8({
1339
+ __spreadValues$9({
1280
1340
  label: "Family name",
1281
1341
  placeholder: "Family name"
1282
1342
  }, form$1.getInputProps("familyName"))
@@ -1427,19 +1487,19 @@ function Table$a(props) {
1427
1487
  ), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
1428
1488
  }
1429
1489
 
1430
- var __defProp$7 = Object.defineProperty;
1431
- var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
1432
- var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
1433
- var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
1434
- var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1435
- var __spreadValues$7 = (a, b) => {
1490
+ var __defProp$8 = Object.defineProperty;
1491
+ var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
1492
+ var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
1493
+ var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
1494
+ var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1495
+ var __spreadValues$8 = (a, b) => {
1436
1496
  for (var prop in b || (b = {}))
1437
- if (__hasOwnProp$7.call(b, prop))
1438
- __defNormalProp$7(a, prop, b[prop]);
1439
- if (__getOwnPropSymbols$7)
1440
- for (var prop of __getOwnPropSymbols$7(b)) {
1441
- if (__propIsEnum$7.call(b, prop))
1442
- __defNormalProp$7(a, prop, b[prop]);
1497
+ if (__hasOwnProp$8.call(b, prop))
1498
+ __defNormalProp$8(a, prop, b[prop]);
1499
+ if (__getOwnPropSymbols$8)
1500
+ for (var prop of __getOwnPropSymbols$8(b)) {
1501
+ if (__propIsEnum$8.call(b, prop))
1502
+ __defNormalProp$8(a, prop, b[prop]);
1443
1503
  }
1444
1504
  return a;
1445
1505
  };
@@ -1486,14 +1546,14 @@ const Classes = (props) => {
1486
1546
  props.onCreateClass && props.onCreateClass(values);
1487
1547
  }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
1488
1548
  core.TextInput,
1489
- __spreadValues$7({
1549
+ __spreadValues$8({
1490
1550
  withAsterisk: true,
1491
1551
  label: "Name",
1492
1552
  placeholder: "Class name"
1493
1553
  }, form$1.getInputProps("name"))
1494
1554
  ), /* @__PURE__ */ React__namespace.createElement(
1495
1555
  core.TextInput,
1496
- __spreadValues$7({
1556
+ __spreadValues$8({
1497
1557
  label: "Description",
1498
1558
  placeholder: "A class for my first period English students"
1499
1559
  }, form$1.getInputProps("description"))
@@ -1723,30 +1783,30 @@ function CardGradient(props) {
1723
1783
  ), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
1724
1784
  }
1725
1785
 
1726
- var __defProp$6 = Object.defineProperty;
1727
- var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
1728
- var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
1729
- var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
1730
- var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1731
- var __spreadValues$6 = (a, b) => {
1786
+ var __defProp$7 = Object.defineProperty;
1787
+ var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
1788
+ var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
1789
+ var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
1790
+ var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1791
+ var __spreadValues$7 = (a, b) => {
1732
1792
  for (var prop in b || (b = {}))
1733
- if (__hasOwnProp$6.call(b, prop))
1734
- __defNormalProp$6(a, prop, b[prop]);
1735
- if (__getOwnPropSymbols$6)
1736
- for (var prop of __getOwnPropSymbols$6(b)) {
1737
- if (__propIsEnum$6.call(b, prop))
1738
- __defNormalProp$6(a, prop, b[prop]);
1793
+ if (__hasOwnProp$7.call(b, prop))
1794
+ __defNormalProp$7(a, prop, b[prop]);
1795
+ if (__getOwnPropSymbols$7)
1796
+ for (var prop of __getOwnPropSymbols$7(b)) {
1797
+ if (__propIsEnum$7.call(b, prop))
1798
+ __defNormalProp$7(a, prop, b[prop]);
1739
1799
  }
1740
1800
  return a;
1741
1801
  };
1742
1802
  var __objRest$1 = (source, exclude) => {
1743
1803
  var target = {};
1744
1804
  for (var prop in source)
1745
- if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
1805
+ if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
1746
1806
  target[prop] = source[prop];
1747
- if (source != null && __getOwnPropSymbols$6)
1748
- for (var prop of __getOwnPropSymbols$6(source)) {
1749
- if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
1807
+ if (source != null && __getOwnPropSymbols$7)
1808
+ for (var prop of __getOwnPropSymbols$7(source)) {
1809
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
1750
1810
  target[prop] = source[prop];
1751
1811
  }
1752
1812
  return target;
@@ -1813,9 +1873,9 @@ const TenantBanner = (_a) => {
1813
1873
  };
1814
1874
  return /* @__PURE__ */ React__namespace.createElement(
1815
1875
  core.Card,
1816
- __spreadValues$6({
1876
+ __spreadValues$7({
1817
1877
  radius: "md",
1818
- style: __spreadValues$6({ backgroundImage: `url(${image})` }, style),
1878
+ style: __spreadValues$7({ backgroundImage: `url(${image})` }, style),
1819
1879
  className: cx(classes.card, className)
1820
1880
  }, others),
1821
1881
  /* @__PURE__ */ React__namespace.createElement(
@@ -1898,6 +1958,7 @@ const Home = (props) => {
1898
1958
  };
1899
1959
 
1900
1960
  function Table$6(props) {
1961
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
1901
1962
  if (props.items.length === 0) {
1902
1963
  return /* @__PURE__ */ React__namespace.createElement(
1903
1964
  PlaceholderBanner,
@@ -1909,8 +1970,23 @@ function Table$6(props) {
1909
1970
  }
1910
1971
  );
1911
1972
  }
1912
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, row.rating.toLocaleString())));
1913
- 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, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
1973
+ const sortStatus = {
1974
+ columnAccessor: sortConfig.key,
1975
+ direction: sortConfig.direction === "desc" ? "desc" : "asc"
1976
+ };
1977
+ return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1978
+ mantineDatatable.DataTable,
1979
+ {
1980
+ records: sortedItems,
1981
+ sortStatus,
1982
+ onSortStatusChange: (status) => requestSort(status.columnAccessor),
1983
+ columns: [
1984
+ { accessor: "studentName", title: "Student Name", sortable: true },
1985
+ { accessor: "reflection", title: "Reflection" },
1986
+ { accessor: "rating", title: "Rating", sortable: true }
1987
+ ]
1988
+ }
1989
+ ));
1914
1990
  }
1915
1991
 
1916
1992
  const useStyles$f = core.createStyles((theme) => ({
@@ -1965,7 +2041,31 @@ function Stack$2(props) {
1965
2041
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
1966
2042
  }
1967
2043
 
2044
+ var __defProp$6 = Object.defineProperty;
2045
+ var __defProps$5 = Object.defineProperties;
2046
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2047
+ var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
2048
+ var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
2049
+ var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
2050
+ var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2051
+ var __spreadValues$6 = (a, b) => {
2052
+ for (var prop in b || (b = {}))
2053
+ if (__hasOwnProp$6.call(b, prop))
2054
+ __defNormalProp$6(a, prop, b[prop]);
2055
+ if (__getOwnPropSymbols$6)
2056
+ for (var prop of __getOwnPropSymbols$6(b)) {
2057
+ if (__propIsEnum$6.call(b, prop))
2058
+ __defNormalProp$6(a, prop, b[prop]);
2059
+ }
2060
+ return a;
2061
+ };
2062
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
1968
2063
  function Table$5(props) {
2064
+ const preparedItems = React__namespace.useMemo(() => {
2065
+ return props.items.map((item) => __spreadProps$5(__spreadValues$6({}, item), {
2066
+ status: item.isComplete ? 2 : item.isStarted ? 1 : 0
2067
+ }));
2068
+ }, [props.items]);
1969
2069
  if (props.items.length === 0) {
1970
2070
  return /* @__PURE__ */ React__namespace.createElement(
1971
2071
  PlaceholderBanner,
@@ -1977,6 +2077,11 @@ function Table$5(props) {
1977
2077
  }
1978
2078
  );
1979
2079
  }
2080
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
2081
+ const sortStatus = {
2082
+ columnAccessor: sortConfig.key,
2083
+ direction: sortConfig.direction === "desc" ? "desc" : "asc"
2084
+ };
1980
2085
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1981
2086
  mantineDatatable.DataTable,
1982
2087
  {
@@ -1988,13 +2093,18 @@ function Table$5(props) {
1988
2093
  striped: true,
1989
2094
  highlightOnHover: true,
1990
2095
  idAccessor: "userId",
1991
- records: props.items,
2096
+ records: sortedItems,
2097
+ sortStatus,
2098
+ onSortStatusChange: (status) => requestSort(status.columnAccessor),
1992
2099
  columns: [{
1993
2100
  accessor: "name",
1994
2101
  title: "Student Name",
2102
+ sortable: true,
1995
2103
  render: (row) => /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, null, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))
1996
2104
  }, {
1997
2105
  accessor: "status",
2106
+ title: "Status",
2107
+ sortable: true,
1998
2108
  render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, "In progress"))
1999
2109
  }],
2000
2110
  rowExpansion: {
@@ -3427,10 +3537,18 @@ var __spreadValues = (a, b) => {
3427
3537
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
3428
3538
  function Table$1(props) {
3429
3539
  const preparedItems = React__namespace.useMemo(() => {
3430
- return props.items.map((item) => __spreadValues(__spreadProps(__spreadValues({}, item), {
3431
- status: item.isComplete
3432
- }), item.categoryPoints));
3433
- }, [props.items]);
3540
+ return props.items.map((item) => {
3541
+ const flatItem = __spreadProps(__spreadValues({}, item), {
3542
+ status: item.isComplete ? 1 : 0
3543
+ });
3544
+ if (item.categoryPoints) {
3545
+ Object.keys(item.categoryPoints).forEach((catId) => {
3546
+ flatItem[catId] = item.categoryPoints[catId];
3547
+ });
3548
+ }
3549
+ return flatItem;
3550
+ });
3551
+ }, [props.items, props.categories]);
3434
3552
  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
3435
3553
  if (props.items.length === 0) {
3436
3554
  return /* @__PURE__ */ React__namespace.createElement(
@@ -3482,8 +3600,8 @@ function Table$1(props) {
3482
3600
  sortable: true,
3483
3601
  titleStyle: { whiteSpace: "nowrap" },
3484
3602
  render: (row) => {
3485
- var _a, _b;
3486
- return /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "blue", variant: "filled" }, (_b = (_a = row.categoryPoints) == null ? void 0 : _a[category.categoryId]) != null ? _b : 0, " pts");
3603
+ var _a;
3604
+ return /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "blue", variant: "filled" }, (_a = row[category.categoryId]) != null ? _a : 0, " pts");
3487
3605
  }
3488
3606
  }))
3489
3607
  ],