@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.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { useState, useMemo } from 'react';
3
- 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$4, Grid, Table as Table$k, ActionIcon, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
3
+ 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$4, Grid, ActionIcon, LoadingOverlay, Select, Table as Table$k, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
4
4
  import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconChevronUp, IconChevronDown, IconSelector, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
5
5
  import { Link } from 'react-router-dom';
6
6
  import { showNotification, NotificationsProvider } from '@mantine/notifications';
@@ -14,30 +14,30 @@ import AvatarInit from 'avatar-initials';
14
14
  import { Chart } from 'react-charts';
15
15
  import { useUncontrolled } from '@mantine/hooks';
16
16
 
17
- var __defProp$a = Object.defineProperty;
18
- var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
19
- var __hasOwnProp$a = Object.prototype.hasOwnProperty;
20
- var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
21
- var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
22
- var __spreadValues$a = (a, b) => {
17
+ var __defProp$c = Object.defineProperty;
18
+ var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
19
+ var __hasOwnProp$c = Object.prototype.hasOwnProperty;
20
+ var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
21
+ var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
22
+ var __spreadValues$c = (a, b) => {
23
23
  for (var prop in b || (b = {}))
24
- if (__hasOwnProp$a.call(b, prop))
25
- __defNormalProp$a(a, prop, b[prop]);
26
- if (__getOwnPropSymbols$a)
27
- for (var prop of __getOwnPropSymbols$a(b)) {
28
- if (__propIsEnum$a.call(b, prop))
29
- __defNormalProp$a(a, prop, b[prop]);
24
+ if (__hasOwnProp$c.call(b, prop))
25
+ __defNormalProp$c(a, prop, b[prop]);
26
+ if (__getOwnPropSymbols$c)
27
+ for (var prop of __getOwnPropSymbols$c(b)) {
28
+ if (__propIsEnum$c.call(b, prop))
29
+ __defNormalProp$c(a, prop, b[prop]);
30
30
  }
31
31
  return a;
32
32
  };
33
33
  var __objRest$2 = (source, exclude) => {
34
34
  var target = {};
35
35
  for (var prop in source)
36
- if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
36
+ if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
37
37
  target[prop] = source[prop];
38
- if (source != null && __getOwnPropSymbols$a)
39
- for (var prop of __getOwnPropSymbols$a(source)) {
40
- if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
38
+ if (source != null && __getOwnPropSymbols$c)
39
+ for (var prop of __getOwnPropSymbols$c(source)) {
40
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
41
41
  target[prop] = source[prop];
42
42
  }
43
43
  return target;
@@ -54,7 +54,7 @@ const useStyles$w = createStyles((theme) => ({
54
54
  function UserButton(_a) {
55
55
  var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
56
56
  const { classes } = useStyles$w();
57
- return /* @__PURE__ */ React.createElement(Group, __spreadValues$a({ 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)));
57
+ return /* @__PURE__ */ React.createElement(Group, __spreadValues$c({ 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)));
58
58
  }
59
59
 
60
60
  const compact = (num) => {
@@ -162,25 +162,25 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
162
162
  ), hasLinks ? /* @__PURE__ */ React.createElement(Collapse, { in: opened }, items) : null);
163
163
  }
164
164
 
165
- var __defProp$9 = Object.defineProperty;
166
- var __defProps$6 = Object.defineProperties;
167
- var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
168
- var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
169
- var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
170
- var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
171
- var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
172
- var __spreadValues$9 = (a, b) => {
165
+ var __defProp$b = Object.defineProperty;
166
+ var __defProps$8 = Object.defineProperties;
167
+ var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
168
+ var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
169
+ var __hasOwnProp$b = Object.prototype.hasOwnProperty;
170
+ var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
171
+ var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
172
+ var __spreadValues$b = (a, b) => {
173
173
  for (var prop in b || (b = {}))
174
- if (__hasOwnProp$9.call(b, prop))
175
- __defNormalProp$9(a, prop, b[prop]);
176
- if (__getOwnPropSymbols$9)
177
- for (var prop of __getOwnPropSymbols$9(b)) {
178
- if (__propIsEnum$9.call(b, prop))
179
- __defNormalProp$9(a, prop, b[prop]);
174
+ if (__hasOwnProp$b.call(b, prop))
175
+ __defNormalProp$b(a, prop, b[prop]);
176
+ if (__getOwnPropSymbols$b)
177
+ for (var prop of __getOwnPropSymbols$b(b)) {
178
+ if (__propIsEnum$b.call(b, prop))
179
+ __defNormalProp$b(a, prop, b[prop]);
180
180
  }
181
181
  return a;
182
182
  };
183
- var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
183
+ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
184
184
  const useStyles$u = createStyles((theme, _params, getRef) => {
185
185
  const icon = getRef("icon");
186
186
  return {
@@ -212,7 +212,7 @@ const useStyles$u = createStyles((theme, _params, getRef) => {
212
212
  color: theme.colorScheme === "dark" ? theme.white : theme.black,
213
213
  borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
214
214
  },
215
- link: __spreadProps$6(__spreadValues$9({}, theme.fn.focusStyles()), {
215
+ link: __spreadProps$8(__spreadValues$b({}, theme.fn.focusStyles()), {
216
216
  display: "flex",
217
217
  alignItems: "center",
218
218
  textDecoration: "none",
@@ -294,12 +294,12 @@ function Navbar(props) {
294
294
  }
295
295
  return /* @__PURE__ */ React.createElement(
296
296
  LinksGroup,
297
- __spreadProps$6(__spreadValues$9(__spreadValues$9({
297
+ __spreadProps$8(__spreadValues$b(__spreadValues$b({
298
298
  key: item.label,
299
299
  active: props.active
300
300
  }, item), context), {
301
301
  links: (item.links || []).map((link) => {
302
- return __spreadValues$9(__spreadValues$9({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
302
+ return __spreadValues$b(__spreadValues$b({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
303
303
  })
304
304
  })
305
305
  );
@@ -604,7 +604,72 @@ function Stack$3(props) {
604
604
  return /* @__PURE__ */ React.createElement(Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
605
605
  }
606
606
 
607
+ function useSortableData(items, config = { key: "", direction: null }) {
608
+ const [sortConfig, setSortConfig] = useState(config);
609
+ const sortedItems = useMemo(() => {
610
+ let sortableItems = [...items];
611
+ if (sortConfig.direction !== null) {
612
+ sortableItems.sort((a, b) => {
613
+ const aValue = a[sortConfig.key];
614
+ const bValue = b[sortConfig.key];
615
+ if (aValue === bValue)
616
+ return 0;
617
+ if (aValue === null || aValue === void 0)
618
+ return 1;
619
+ if (bValue === null || bValue === void 0)
620
+ return -1;
621
+ if (typeof aValue === "number" && typeof bValue === "number") {
622
+ return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
623
+ }
624
+ if (typeof aValue === "boolean" && typeof bValue === "boolean") {
625
+ return sortConfig.direction === "asc" ? aValue === bValue ? 0 : aValue ? 1 : -1 : aValue === bValue ? 0 : aValue ? -1 : 1;
626
+ }
627
+ if (aValue instanceof Date && bValue instanceof Date) {
628
+ return sortConfig.direction === "asc" ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime();
629
+ }
630
+ return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
631
+ });
632
+ }
633
+ return sortableItems;
634
+ }, [items, sortConfig]);
635
+ const requestSort = (key) => {
636
+ let direction = "asc";
637
+ if (sortConfig.key === key && sortConfig.direction === "asc") {
638
+ direction = "desc";
639
+ } else if (sortConfig.key === key && sortConfig.direction === "desc") {
640
+ direction = null;
641
+ }
642
+ setSortConfig({ key, direction });
643
+ };
644
+ return { items: sortedItems, requestSort, sortConfig };
645
+ }
646
+
647
+ var __defProp$a = Object.defineProperty;
648
+ var __defProps$7 = Object.defineProperties;
649
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
650
+ var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
651
+ var __hasOwnProp$a = Object.prototype.hasOwnProperty;
652
+ var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
653
+ var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
654
+ var __spreadValues$a = (a, b) => {
655
+ for (var prop in b || (b = {}))
656
+ if (__hasOwnProp$a.call(b, prop))
657
+ __defNormalProp$a(a, prop, b[prop]);
658
+ if (__getOwnPropSymbols$a)
659
+ for (var prop of __getOwnPropSymbols$a(b)) {
660
+ if (__propIsEnum$a.call(b, prop))
661
+ __defNormalProp$a(a, prop, b[prop]);
662
+ }
663
+ return a;
664
+ };
665
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
607
666
  function Table$j(props) {
667
+ const preparedItems = React.useMemo(() => {
668
+ return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
669
+ status: item.isComplete ? 1 : 0
670
+ }));
671
+ }, [props.items]);
672
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
608
673
  if (props.items.length === 0) {
609
674
  return /* @__PURE__ */ React.createElement(
610
675
  PlaceholderBanner,
@@ -616,6 +681,10 @@ function Table$j(props) {
616
681
  }
617
682
  );
618
683
  }
684
+ const sortStatus = {
685
+ columnAccessor: sortConfig.key,
686
+ direction: sortConfig.direction === "desc" ? "desc" : "asc"
687
+ };
619
688
  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
620
689
  DataTable,
621
690
  {
@@ -626,14 +695,19 @@ function Table$j(props) {
626
695
  withColumnBorders: true,
627
696
  striped: true,
628
697
  highlightOnHover: true,
629
- records: props.items,
698
+ records: sortedItems,
699
+ sortStatus,
700
+ onSortStatusChange: (status) => requestSort(status.columnAccessor),
630
701
  idAccessor: "userId",
631
702
  columns: [{
632
703
  accessor: "name",
633
704
  title: "Student Name",
705
+ sortable: true,
634
706
  render: (row) => /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__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)))
635
707
  }, {
636
708
  accessor: "status",
709
+ title: "Status",
710
+ sortable: true,
637
711
  render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Incomplete"))
638
712
  }],
639
713
  rowExpansion: {
@@ -644,6 +718,7 @@ function Table$j(props) {
644
718
  }
645
719
 
646
720
  function Table$i(props) {
721
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
647
722
  if (props.items.length === 0) {
648
723
  return /* @__PURE__ */ React.createElement(
649
724
  PlaceholderBanner,
@@ -655,11 +730,36 @@ function Table$i(props) {
655
730
  }
656
731
  );
657
732
  }
658
- const rows = props.items.map((row) => {
659
- const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
660
- return /* @__PURE__ */ React.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, percentageCompletion, "%"));
661
- });
662
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$k, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
733
+ const sortStatus = {
734
+ columnAccessor: sortConfig.key,
735
+ direction: sortConfig.direction === "desc" ? "desc" : "asc"
736
+ };
737
+ return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
738
+ DataTable,
739
+ {
740
+ verticalSpacing: "sm",
741
+ sx: { minWidth: 700 },
742
+ highlightOnHover: true,
743
+ striped: true,
744
+ records: sortedItems,
745
+ sortStatus,
746
+ onSortStatusChange: (status) => requestSort(status.columnAccessor),
747
+ columns: [
748
+ {
749
+ accessor: "lessonName",
750
+ title: "Lesson Name",
751
+ sortable: true,
752
+ render: (row) => /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.lessonName)
753
+ },
754
+ {
755
+ accessor: "percentageCompletion",
756
+ title: "Lesson Completion",
757
+ sortable: true,
758
+ render: (row) => `${Math.round((row.percentageCompletion + Number.EPSILON) * 100)}%`
759
+ }
760
+ ]
761
+ }
762
+ ));
663
763
  }
664
764
 
665
765
  const useStyles$o = createStyles((theme) => ({
@@ -1016,46 +1116,6 @@ const SplitButton$3 = (props) => {
1016
1116
  ));
1017
1117
  };
1018
1118
 
1019
- function useSortableData(items, config = { key: "", direction: null }) {
1020
- const [sortConfig, setSortConfig] = useState(config);
1021
- const sortedItems = useMemo(() => {
1022
- let sortableItems = [...items];
1023
- if (sortConfig.direction !== null) {
1024
- sortableItems.sort((a, b) => {
1025
- const aValue = a[sortConfig.key];
1026
- const bValue = b[sortConfig.key];
1027
- if (aValue === bValue)
1028
- return 0;
1029
- if (aValue === null || aValue === void 0)
1030
- return 1;
1031
- if (bValue === null || bValue === void 0)
1032
- return -1;
1033
- if (typeof aValue === "number" && typeof bValue === "number") {
1034
- return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
1035
- }
1036
- if (typeof aValue === "boolean" && typeof bValue === "boolean") {
1037
- return sortConfig.direction === "asc" ? aValue === bValue ? 0 : aValue ? 1 : -1 : aValue === bValue ? 0 : aValue ? -1 : 1;
1038
- }
1039
- if (aValue instanceof Date && bValue instanceof Date) {
1040
- return sortConfig.direction === "asc" ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime();
1041
- }
1042
- return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
1043
- });
1044
- }
1045
- return sortableItems;
1046
- }, [items, sortConfig]);
1047
- const requestSort = (key) => {
1048
- let direction = "asc";
1049
- if (sortConfig.key === key && sortConfig.direction === "asc") {
1050
- direction = "desc";
1051
- } else if (sortConfig.key === key && sortConfig.direction === "desc") {
1052
- direction = null;
1053
- }
1054
- setSortConfig({ key, direction });
1055
- };
1056
- return { items: sortedItems, requestSort, sortConfig };
1057
- }
1058
-
1059
1119
  const useStyles$m = createStyles((theme) => ({
1060
1120
  th: { padding: "0 !important" },
1061
1121
  control: {
@@ -1092,7 +1152,7 @@ function Table$b(props) {
1092
1152
  confirmProps: { color: "red" },
1093
1153
  onConfirm: () => props.onDelete && props.onDelete(student)
1094
1154
  });
1095
- const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.email }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__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.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Box, { maw: 150 }, /* @__PURE__ */ React.createElement(
1155
+ const rows = sortedItems.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.email }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__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.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Box, { maw: 150 }, /* @__PURE__ */ React.createElement(
1096
1156
  Select,
1097
1157
  {
1098
1158
  size: "sm",
@@ -1152,25 +1212,25 @@ function Table$b(props) {
1152
1212
  ), /* @__PURE__ */ React.createElement("th", null), " ")), /* @__PURE__ */ React.createElement("tbody", null, rows)));
1153
1213
  }
1154
1214
 
1155
- var __defProp$8 = Object.defineProperty;
1156
- var __defProps$5 = Object.defineProperties;
1157
- var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
1158
- var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
1159
- var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
1160
- var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
1161
- var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1162
- var __spreadValues$8 = (a, b) => {
1215
+ var __defProp$9 = Object.defineProperty;
1216
+ var __defProps$6 = Object.defineProperties;
1217
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
1218
+ var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
1219
+ var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
1220
+ var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
1221
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1222
+ var __spreadValues$9 = (a, b) => {
1163
1223
  for (var prop in b || (b = {}))
1164
- if (__hasOwnProp$8.call(b, prop))
1165
- __defNormalProp$8(a, prop, b[prop]);
1166
- if (__getOwnPropSymbols$8)
1167
- for (var prop of __getOwnPropSymbols$8(b)) {
1168
- if (__propIsEnum$8.call(b, prop))
1169
- __defNormalProp$8(a, prop, b[prop]);
1224
+ if (__hasOwnProp$9.call(b, prop))
1225
+ __defNormalProp$9(a, prop, b[prop]);
1226
+ if (__getOwnPropSymbols$9)
1227
+ for (var prop of __getOwnPropSymbols$9(b)) {
1228
+ if (__propIsEnum$9.call(b, prop))
1229
+ __defNormalProp$9(a, prop, b[prop]);
1170
1230
  }
1171
1231
  return a;
1172
1232
  };
1173
- var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
1233
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
1174
1234
  const useStyles$l = createStyles((theme) => ({
1175
1235
  title: {
1176
1236
  fontSize: 34,
@@ -1236,27 +1296,27 @@ const Class = (props) => {
1236
1296
  padding: "xl",
1237
1297
  size: "xl"
1238
1298
  },
1239
- /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$5(__spreadValues$8({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
1299
+ /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$6(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
1240
1300
  const values = form.values;
1241
1301
  form.reset();
1242
1302
  setOpened(false);
1243
1303
  props.onCreateMembers && props.onCreateMembers([values]);
1244
1304
  }) }, /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(
1245
1305
  TextInput,
1246
- __spreadValues$8({
1306
+ __spreadValues$9({
1247
1307
  withAsterisk: true,
1248
1308
  label: "Email",
1249
1309
  placeholder: "Email"
1250
1310
  }, form.getInputProps("email"))
1251
1311
  ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
1252
1312
  TextInput,
1253
- __spreadValues$8({
1313
+ __spreadValues$9({
1254
1314
  label: "Given name",
1255
1315
  placeholder: "Given name"
1256
1316
  }, form.getInputProps("givenName"))
1257
1317
  ), /* @__PURE__ */ React.createElement(
1258
1318
  TextInput,
1259
- __spreadValues$8({
1319
+ __spreadValues$9({
1260
1320
  label: "Family name",
1261
1321
  placeholder: "Family name"
1262
1322
  }, form.getInputProps("familyName"))
@@ -1407,19 +1467,19 @@ function Table$a(props) {
1407
1467
  ), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
1408
1468
  }
1409
1469
 
1410
- var __defProp$7 = Object.defineProperty;
1411
- var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
1412
- var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
1413
- var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
1414
- var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1415
- var __spreadValues$7 = (a, b) => {
1470
+ var __defProp$8 = Object.defineProperty;
1471
+ var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
1472
+ var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
1473
+ var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
1474
+ var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1475
+ var __spreadValues$8 = (a, b) => {
1416
1476
  for (var prop in b || (b = {}))
1417
- if (__hasOwnProp$7.call(b, prop))
1418
- __defNormalProp$7(a, prop, b[prop]);
1419
- if (__getOwnPropSymbols$7)
1420
- for (var prop of __getOwnPropSymbols$7(b)) {
1421
- if (__propIsEnum$7.call(b, prop))
1422
- __defNormalProp$7(a, prop, b[prop]);
1477
+ if (__hasOwnProp$8.call(b, prop))
1478
+ __defNormalProp$8(a, prop, b[prop]);
1479
+ if (__getOwnPropSymbols$8)
1480
+ for (var prop of __getOwnPropSymbols$8(b)) {
1481
+ if (__propIsEnum$8.call(b, prop))
1482
+ __defNormalProp$8(a, prop, b[prop]);
1423
1483
  }
1424
1484
  return a;
1425
1485
  };
@@ -1466,14 +1526,14 @@ const Classes = (props) => {
1466
1526
  props.onCreateClass && props.onCreateClass(values);
1467
1527
  }) }, /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(
1468
1528
  TextInput,
1469
- __spreadValues$7({
1529
+ __spreadValues$8({
1470
1530
  withAsterisk: true,
1471
1531
  label: "Name",
1472
1532
  placeholder: "Class name"
1473
1533
  }, form.getInputProps("name"))
1474
1534
  ), /* @__PURE__ */ React.createElement(
1475
1535
  TextInput,
1476
- __spreadValues$7({
1536
+ __spreadValues$8({
1477
1537
  label: "Description",
1478
1538
  placeholder: "A class for my first period English students"
1479
1539
  }, form.getInputProps("description"))
@@ -1703,30 +1763,30 @@ function CardGradient(props) {
1703
1763
  ), /* @__PURE__ */ React.createElement(Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React.createElement(Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
1704
1764
  }
1705
1765
 
1706
- var __defProp$6 = Object.defineProperty;
1707
- var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
1708
- var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
1709
- var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
1710
- var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1711
- var __spreadValues$6 = (a, b) => {
1766
+ var __defProp$7 = Object.defineProperty;
1767
+ var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
1768
+ var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
1769
+ var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
1770
+ var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1771
+ var __spreadValues$7 = (a, b) => {
1712
1772
  for (var prop in b || (b = {}))
1713
- if (__hasOwnProp$6.call(b, prop))
1714
- __defNormalProp$6(a, prop, b[prop]);
1715
- if (__getOwnPropSymbols$6)
1716
- for (var prop of __getOwnPropSymbols$6(b)) {
1717
- if (__propIsEnum$6.call(b, prop))
1718
- __defNormalProp$6(a, prop, b[prop]);
1773
+ if (__hasOwnProp$7.call(b, prop))
1774
+ __defNormalProp$7(a, prop, b[prop]);
1775
+ if (__getOwnPropSymbols$7)
1776
+ for (var prop of __getOwnPropSymbols$7(b)) {
1777
+ if (__propIsEnum$7.call(b, prop))
1778
+ __defNormalProp$7(a, prop, b[prop]);
1719
1779
  }
1720
1780
  return a;
1721
1781
  };
1722
1782
  var __objRest$1 = (source, exclude) => {
1723
1783
  var target = {};
1724
1784
  for (var prop in source)
1725
- if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
1785
+ if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
1726
1786
  target[prop] = source[prop];
1727
- if (source != null && __getOwnPropSymbols$6)
1728
- for (var prop of __getOwnPropSymbols$6(source)) {
1729
- if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
1787
+ if (source != null && __getOwnPropSymbols$7)
1788
+ for (var prop of __getOwnPropSymbols$7(source)) {
1789
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
1730
1790
  target[prop] = source[prop];
1731
1791
  }
1732
1792
  return target;
@@ -1793,9 +1853,9 @@ const TenantBanner = (_a) => {
1793
1853
  };
1794
1854
  return /* @__PURE__ */ React.createElement(
1795
1855
  Card,
1796
- __spreadValues$6({
1856
+ __spreadValues$7({
1797
1857
  radius: "md",
1798
- style: __spreadValues$6({ backgroundImage: `url(${image})` }, style),
1858
+ style: __spreadValues$7({ backgroundImage: `url(${image})` }, style),
1799
1859
  className: cx(classes.card, className)
1800
1860
  }, others),
1801
1861
  /* @__PURE__ */ React.createElement(
@@ -1878,6 +1938,7 @@ const Home = (props) => {
1878
1938
  };
1879
1939
 
1880
1940
  function Table$6(props) {
1941
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
1881
1942
  if (props.items.length === 0) {
1882
1943
  return /* @__PURE__ */ React.createElement(
1883
1944
  PlaceholderBanner,
@@ -1889,8 +1950,23 @@ function Table$6(props) {
1889
1950
  }
1890
1951
  );
1891
1952
  }
1892
- const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React.createElement("td", null, row.studentName), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, row.rating.toLocaleString())));
1893
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$k, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
1953
+ const sortStatus = {
1954
+ columnAccessor: sortConfig.key,
1955
+ direction: sortConfig.direction === "desc" ? "desc" : "asc"
1956
+ };
1957
+ return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
1958
+ DataTable,
1959
+ {
1960
+ records: sortedItems,
1961
+ sortStatus,
1962
+ onSortStatusChange: (status) => requestSort(status.columnAccessor),
1963
+ columns: [
1964
+ { accessor: "studentName", title: "Student Name", sortable: true },
1965
+ { accessor: "reflection", title: "Reflection" },
1966
+ { accessor: "rating", title: "Rating", sortable: true }
1967
+ ]
1968
+ }
1969
+ ));
1894
1970
  }
1895
1971
 
1896
1972
  const useStyles$f = createStyles((theme) => ({
@@ -1945,7 +2021,31 @@ function Stack$2(props) {
1945
2021
  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
1946
2022
  }
1947
2023
 
2024
+ var __defProp$6 = Object.defineProperty;
2025
+ var __defProps$5 = Object.defineProperties;
2026
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2027
+ var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
2028
+ var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
2029
+ var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
2030
+ var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2031
+ var __spreadValues$6 = (a, b) => {
2032
+ for (var prop in b || (b = {}))
2033
+ if (__hasOwnProp$6.call(b, prop))
2034
+ __defNormalProp$6(a, prop, b[prop]);
2035
+ if (__getOwnPropSymbols$6)
2036
+ for (var prop of __getOwnPropSymbols$6(b)) {
2037
+ if (__propIsEnum$6.call(b, prop))
2038
+ __defNormalProp$6(a, prop, b[prop]);
2039
+ }
2040
+ return a;
2041
+ };
2042
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
1948
2043
  function Table$5(props) {
2044
+ const preparedItems = React.useMemo(() => {
2045
+ return props.items.map((item) => __spreadProps$5(__spreadValues$6({}, item), {
2046
+ status: item.isComplete ? 2 : item.isStarted ? 1 : 0
2047
+ }));
2048
+ }, [props.items]);
1949
2049
  if (props.items.length === 0) {
1950
2050
  return /* @__PURE__ */ React.createElement(
1951
2051
  PlaceholderBanner,
@@ -1957,6 +2057,11 @@ function Table$5(props) {
1957
2057
  }
1958
2058
  );
1959
2059
  }
2060
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
2061
+ const sortStatus = {
2062
+ columnAccessor: sortConfig.key,
2063
+ direction: sortConfig.direction === "desc" ? "desc" : "asc"
2064
+ };
1960
2065
  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
1961
2066
  DataTable,
1962
2067
  {
@@ -1968,13 +2073,18 @@ function Table$5(props) {
1968
2073
  striped: true,
1969
2074
  highlightOnHover: true,
1970
2075
  idAccessor: "userId",
1971
- records: props.items,
2076
+ records: sortedItems,
2077
+ sortStatus,
2078
+ onSortStatusChange: (status) => requestSort(status.columnAccessor),
1972
2079
  columns: [{
1973
2080
  accessor: "name",
1974
2081
  title: "Student Name",
2082
+ sortable: true,
1975
2083
  render: (row) => /* @__PURE__ */ React.createElement(UnstyledButton, null, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__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))))
1976
2084
  }, {
1977
2085
  accessor: "status",
2086
+ title: "Status",
2087
+ sortable: true,
1978
2088
  render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", variant: "filled" }, "In progress"))
1979
2089
  }],
1980
2090
  rowExpansion: {
@@ -3407,10 +3517,18 @@ var __spreadValues = (a, b) => {
3407
3517
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
3408
3518
  function Table$1(props) {
3409
3519
  const preparedItems = React.useMemo(() => {
3410
- return props.items.map((item) => __spreadValues(__spreadProps(__spreadValues({}, item), {
3411
- status: item.isComplete
3412
- }), item.categoryPoints));
3413
- }, [props.items]);
3520
+ return props.items.map((item) => {
3521
+ const flatItem = __spreadProps(__spreadValues({}, item), {
3522
+ status: item.isComplete ? 1 : 0
3523
+ });
3524
+ if (item.categoryPoints) {
3525
+ Object.keys(item.categoryPoints).forEach((catId) => {
3526
+ flatItem[catId] = item.categoryPoints[catId];
3527
+ });
3528
+ }
3529
+ return flatItem;
3530
+ });
3531
+ }, [props.items, props.categories]);
3414
3532
  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
3415
3533
  if (props.items.length === 0) {
3416
3534
  return /* @__PURE__ */ React.createElement(
@@ -3462,8 +3580,8 @@ function Table$1(props) {
3462
3580
  sortable: true,
3463
3581
  titleStyle: { whiteSpace: "nowrap" },
3464
3582
  render: (row) => {
3465
- var _a, _b;
3466
- return /* @__PURE__ */ React.createElement(Badge$1, { color: "blue", variant: "filled" }, (_b = (_a = row.categoryPoints) == null ? void 0 : _a[category.categoryId]) != null ? _b : 0, " pts");
3583
+ var _a;
3584
+ return /* @__PURE__ */ React.createElement(Badge$1, { color: "blue", variant: "filled" }, (_a = row[category.categoryId]) != null ? _a : 0, " pts");
3467
3585
  }
3468
3586
  }))
3469
3587
  ],