@local-civics/mgmt-ui 0.1.54 → 0.1.56

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 (6) hide show
  1. package/dist/index.d.ts +55 -35
  2. package/dist/index.js +125 -19
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +154 -48
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +2 -1
package/dist/index.d.ts CHANGED
@@ -4,18 +4,28 @@ import * as React from 'react';
4
4
  /**
5
5
  * Item
6
6
  */
7
- interface Item$g {
7
+ interface Item$i {
8
+ lessonName: string;
9
+ isStarted?: boolean;
10
+ isComplete?: boolean;
11
+ }
12
+
13
+ /**
14
+ * Item
15
+ */
16
+ interface Item$h {
8
17
  userId: string;
9
18
  avatar: string;
10
19
  name: string;
11
20
  email: string;
12
21
  isComplete?: boolean;
22
+ lessons: Item$i[];
13
23
  }
14
24
 
15
25
  /**
16
26
  * Item
17
27
  */
18
- interface Item$f {
28
+ interface Item$g {
19
29
  lessonId: string;
20
30
  lessonName: string;
21
31
  percentageCompletion: number;
@@ -24,7 +34,7 @@ interface Item$f {
24
34
  /**
25
35
  * BadgeUserItem
26
36
  */
27
- type BadgeUserItem = Item$g;
37
+ type BadgeUserItem = Item$h;
28
38
  /**
29
39
  * BadgeClass
30
40
  */
@@ -41,14 +51,14 @@ type BadgeProps = {
41
51
  displayName: string;
42
52
  description: string;
43
53
  classes: BadgeClass[];
44
- lessons: Item$f[];
54
+ lessons: Item$g[];
45
55
  classId: string;
46
56
  students: BadgeUserItem[];
47
57
  onBackClick: () => void;
48
58
  onClassChange: (classId: string) => void;
49
59
  onPreviewClick: () => void;
50
60
  onUserClick: (user: BadgeUserItem) => void;
51
- onLessonClick: (lesson: Item$f) => void;
61
+ onLessonClick: (lesson: Item$g) => void;
52
62
  };
53
63
  /**
54
64
  * Badge
@@ -60,7 +70,7 @@ declare const Badge: (props: BadgeProps) => JSX.Element;
60
70
  /**
61
71
  * Item
62
72
  */
63
- interface Item$e {
73
+ interface Item$f {
64
74
  badgeId: string;
65
75
  name: string;
66
76
  description: string;
@@ -69,7 +79,7 @@ interface Item$e {
69
79
  /**
70
80
  * BadgeItem
71
81
  */
72
- type BadgeItem = Item$e;
82
+ type BadgeItem = Item$f;
73
83
  /**
74
84
  * BadgesProps
75
85
  */
@@ -89,7 +99,7 @@ declare const Badges: (props: BadgesProps) => JSX.Element;
89
99
  /**
90
100
  * Item
91
101
  */
92
- interface Item$d {
102
+ interface Item$e {
93
103
  studentId: string;
94
104
  studentName: string;
95
105
  className: string;
@@ -98,7 +108,7 @@ interface Item$d {
98
108
  /**
99
109
  * Item
100
110
  */
101
- interface Item$c {
111
+ interface Item$d {
102
112
  lessonName: string;
103
113
  studentName: string;
104
114
  reflection: string;
@@ -108,7 +118,7 @@ interface Item$c {
108
118
  /**
109
119
  * Item
110
120
  */
111
- interface Item$b {
121
+ interface Item$c {
112
122
  studentName: string;
113
123
  impactStatement: string;
114
124
  }
@@ -116,7 +126,7 @@ interface Item$b {
116
126
  /**
117
127
  * Item
118
128
  */
119
- interface Item$a {
129
+ interface Item$b {
120
130
  badgeId: string;
121
131
  name: string;
122
132
  description: string;
@@ -126,7 +136,7 @@ interface Item$a {
126
136
  /**
127
137
  * Item
128
138
  */
129
- interface Item$9 {
139
+ interface Item$a {
130
140
  lessonId: string;
131
141
  name: string;
132
142
  description: string;
@@ -145,20 +155,20 @@ type DashboardClass = {
145
155
  */
146
156
  type DashboardProps = {
147
157
  loading: boolean;
148
- students: Item$d[];
149
- impacts: Item$b[];
150
- reflections: Item$c[];
158
+ students: Item$e[];
159
+ impacts: Item$c[];
160
+ reflections: Item$d[];
151
161
  classes: DashboardClass[];
152
- badges: Item$a[];
153
- lessons: Item$9[];
162
+ badges: Item$b[];
163
+ lessons: Item$a[];
154
164
  classId: string;
155
165
  percentageOfAccountsCreated: number;
156
166
  percentageOfBadgesEarned: number;
157
167
  percentageOfLessonsCompleted: number;
158
168
  onClassChange: (classId: string) => void;
159
- onViewStudentProfile: (student: Item$d) => void;
160
- onBadgeClick: (badge: Item$a) => void;
161
- onLessonClick: (lesson: Item$9) => void;
169
+ onViewStudentProfile: (student: Item$e) => void;
170
+ onBadgeClick: (badge: Item$b) => void;
171
+ onLessonClick: (lesson: Item$a) => void;
162
172
  };
163
173
  /**
164
174
  * Dashboard
@@ -170,7 +180,7 @@ declare const Dashboard: (props: DashboardProps) => JSX.Element;
170
180
  /**
171
181
  * Item
172
182
  */
173
- type Item$8 = {
183
+ type Item$9 = {
174
184
  classId: string;
175
185
  studentId: string;
176
186
  avatar: string;
@@ -187,7 +197,7 @@ type Item$8 = {
187
197
  /**
188
198
  * StudentItem
189
199
  */
190
- type StudentItem = Item$8;
200
+ type StudentItem = Item$9;
191
201
  /**
192
202
  * ClassProps
193
203
  */
@@ -203,6 +213,7 @@ type ClassProps = {
203
213
  onCreateStudents: (students: StudentItem[]) => void;
204
214
  onDeleteStudent: (student: StudentItem) => void;
205
215
  onStudentClick: (student: StudentItem) => void;
216
+ onCopyLinkClick: () => void;
206
217
  };
207
218
  /**
208
219
  * Class
@@ -214,7 +225,7 @@ declare const Class: (props: ClassProps) => JSX.Element;
214
225
  /**
215
226
  * Item
216
227
  */
217
- type Item$7 = {
228
+ type Item$8 = {
218
229
  classId: string;
219
230
  name: string;
220
231
  description: string;
@@ -223,7 +234,7 @@ type Item$7 = {
223
234
  /**
224
235
  * ClassItem
225
236
  */
226
- type ClassItem = Item$7;
237
+ type ClassItem = Item$8;
227
238
  /**
228
239
  * ClassesProps
229
240
  */
@@ -244,7 +255,7 @@ declare const Classes: (props: ClassesProps) => JSX.Element;
244
255
  /**
245
256
  * Item
246
257
  */
247
- interface Item$6 {
258
+ interface Item$7 {
248
259
  badgeId: string;
249
260
  badgeName: string;
250
261
  isComplete?: boolean;
@@ -253,7 +264,7 @@ interface Item$6 {
253
264
  /**
254
265
  * Item
255
266
  */
256
- interface Item$5 {
267
+ interface Item$6 {
257
268
  lessonId: string;
258
269
  lessonName: string;
259
270
  questionName: string;
@@ -263,7 +274,7 @@ interface Item$5 {
263
274
  /**
264
275
  * Item
265
276
  */
266
- interface Item$4 {
277
+ interface Item$5 {
267
278
  lessonId: string;
268
279
  lessonName: string;
269
280
  reflection: string;
@@ -279,13 +290,13 @@ type StudentProps = {
279
290
  impactStatement: string;
280
291
  numberOfProblemsSolved: number;
281
292
  percentageOfLessonsCompleted: number;
282
- badges: Item$6[];
283
- answers: Item$5[];
284
- reflections: Item$4[];
293
+ badges: Item$7[];
294
+ answers: Item$6[];
295
+ reflections: Item$5[];
285
296
  onBackClick: () => void;
286
- onBadgeClick: (item: Item$6) => void;
287
- onAnswerClick: (item: Item$5) => void;
288
- onReflectionClick: (item: Item$4) => void;
297
+ onBadgeClick: (item: Item$7) => void;
298
+ onAnswerClick: (item: Item$6) => void;
299
+ onReflectionClick: (item: Item$5) => void;
289
300
  };
290
301
  declare const Student: (props: StudentProps) => JSX.Element;
291
302
 
@@ -318,12 +329,20 @@ declare const Home: (props: HomeProps) => JSX.Element;
318
329
  /**
319
330
  * Item
320
331
  */
321
- interface Item$3 {
332
+ interface Item$4 {
322
333
  studentName: string;
323
334
  reflection: string;
324
335
  rating: number;
325
336
  }
326
337
 
338
+ /**
339
+ * Item
340
+ */
341
+ interface Item$3 {
342
+ questionName: string;
343
+ answer: string[];
344
+ }
345
+
327
346
  /**
328
347
  * Item
329
348
  */
@@ -332,6 +351,7 @@ interface Item$2 {
332
351
  avatar: string;
333
352
  name: string;
334
353
  email: string;
354
+ answers: Item$3[];
335
355
  isStarted?: boolean;
336
356
  isComplete?: boolean;
337
357
  }
@@ -368,7 +388,7 @@ type LessonProps = {
368
388
  classId: string;
369
389
  classes: LessonClass[];
370
390
  students: LessonUserItem[];
371
- reflections: Item$3[];
391
+ reflections: Item$4[];
372
392
  questions: Item$1[];
373
393
  onBackClick: () => void;
374
394
  onClassChange: (classId: string) => void;
package/dist/index.js CHANGED
@@ -4,6 +4,7 @@ var notifications = require('@mantine/notifications');
4
4
  var icons = require('@tabler/icons');
5
5
  var React = require('react');
6
6
  var core = require('@mantine/core');
7
+ var mantineDatatable = require('mantine-datatable');
7
8
  var dropzone = require('@mantine/dropzone');
8
9
  var form = require('@mantine/form');
9
10
  var papa = require('papaparse');
@@ -30,7 +31,7 @@ function _interopNamespaceDefault(e) {
30
31
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
31
32
  var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
32
33
 
33
- const useStyles$c = core.createStyles((theme) => ({
34
+ const useStyles$d = core.createStyles((theme) => ({
34
35
  root: {
35
36
  display: "flex",
36
37
  backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -77,7 +78,7 @@ const useStyles$c = core.createStyles((theme) => ({
77
78
  }
78
79
  }));
79
80
  const StatsGroup = ({ data }) => {
80
- const { classes } = useStyles$c();
81
+ const { classes } = useStyles$d();
81
82
  const stats = data.map((stat) => {
82
83
  const value = (() => {
83
84
  if (stat.unit === "%") {
@@ -96,7 +97,7 @@ const Tabs = (props) => {
96
97
  return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
97
98
  };
98
99
 
99
- const useStyles$b = core.createStyles((theme) => ({
100
+ const useStyles$c = core.createStyles((theme) => ({
100
101
  wrapper: {
101
102
  display: "flex",
102
103
  alignItems: "center",
@@ -147,12 +148,20 @@ const useStyles$b = core.createStyles((theme) => ({
147
148
  }
148
149
  }));
149
150
  const PlaceholderBanner = (props) => {
150
- const { classes } = useStyles$b();
151
+ const { classes } = useStyles$c();
151
152
  const title = props.title || "Nothing to display";
152
153
  const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
153
154
  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React__namespace.createElement(core.Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
154
155
  };
155
156
 
157
+ function Stack$2(props) {
158
+ if (props.items.length === 0) {
159
+ return null;
160
+ }
161
+ const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dark.4", size: "lg" }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, !!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"))));
162
+ return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
163
+ }
164
+
156
165
  function Table$f(props) {
157
166
  if (props.items.length === 0) {
158
167
  return /* @__PURE__ */ React__namespace.createElement(
@@ -165,8 +174,31 @@ function Table$f(props) {
165
174
  }
166
175
  );
167
176
  }
168
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.name }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(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))))), /* @__PURE__ */ React__namespace.createElement("td", 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"))));
169
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Badge Status"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
177
+ return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(
178
+ mantineDatatable.DataTable,
179
+ {
180
+ verticalSpacing: "sm",
181
+ sx: { minWidth: 700 },
182
+ withBorder: false,
183
+ borderRadius: "sm",
184
+ withColumnBorders: true,
185
+ striped: true,
186
+ highlightOnHover: true,
187
+ records: props.items,
188
+ idAccessor: "userId",
189
+ columns: [{
190
+ accessor: "name",
191
+ title: "Student Name",
192
+ 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))))
193
+ }, {
194
+ accessor: "status",
195
+ 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"))
196
+ }],
197
+ rowExpansion: {
198
+ content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$2, { items: record.lessons })
199
+ }
200
+ }
201
+ ));
170
202
  }
171
203
 
172
204
  function Table$e(props) {
@@ -188,7 +220,7 @@ function Table$e(props) {
188
220
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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)));
189
221
  }
190
222
 
191
- const useStyles$a = core.createStyles((theme) => ({
223
+ const useStyles$b = core.createStyles((theme) => ({
192
224
  title: {
193
225
  fontSize: 34,
194
226
  fontWeight: 900,
@@ -201,7 +233,7 @@ const useStyles$a = core.createStyles((theme) => ({
201
233
  }
202
234
  }));
203
235
  const Badge = (props) => {
204
- const { classes } = useStyles$a();
236
+ const { classes } = useStyles$b();
205
237
  const [tab, setTab] = React.useState("lessons");
206
238
  const numberOfStudents = props.students.length;
207
239
  const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -299,7 +331,7 @@ function Table$d(props) {
299
331
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
300
332
  }
301
333
 
302
- const useStyles$9 = core.createStyles((theme) => ({
334
+ const useStyles$a = core.createStyles((theme) => ({
303
335
  title: {
304
336
  fontSize: 34,
305
337
  fontWeight: 900,
@@ -312,7 +344,7 @@ const useStyles$9 = core.createStyles((theme) => ({
312
344
  }
313
345
  }));
314
346
  const Badges = (props) => {
315
- const { classes } = useStyles$9();
347
+ const { classes } = useStyles$a();
316
348
  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React__namespace.createElement(
317
349
  core.Autocomplete,
318
350
  {
@@ -520,6 +552,50 @@ const Dashboard = (props) => {
520
552
  )))))));
521
553
  };
522
554
 
555
+ const useStyles$9 = core.createStyles((theme) => ({
556
+ button: {
557
+ borderTopRightRadius: 0,
558
+ borderBottomRightRadius: 0,
559
+ marginLeft: 0,
560
+ marginRight: 0
561
+ },
562
+ menuControl: {
563
+ borderTopLeftRadius: 0,
564
+ borderBottomLeftRadius: 0,
565
+ border: 0,
566
+ borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
567
+ }
568
+ }));
569
+ const SplitButton = (props) => {
570
+ const { classes, theme } = useStyles$9();
571
+ const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
572
+ return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
573
+ core.Button,
574
+ {
575
+ className: classes.button,
576
+ leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 }),
577
+ onClick: props.onAddStudentsClick
578
+ },
579
+ "Add students"
580
+ ), /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
581
+ core.ActionIcon,
582
+ {
583
+ variant: "filled",
584
+ color: theme.primaryColor,
585
+ size: 36,
586
+ className: classes.menuControl
587
+ },
588
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
589
+ )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, /* @__PURE__ */ React__namespace.createElement(
590
+ core.Menu.Item,
591
+ {
592
+ icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
593
+ onClick: props.onCopyClassLinkClick
594
+ },
595
+ "Copy class link"
596
+ ))));
597
+ };
598
+
523
599
  function Table$7(props) {
524
600
  if (props.items.length === 0) {
525
601
  return /* @__PURE__ */ React__namespace.createElement(
@@ -657,12 +733,11 @@ const Class = (props) => {
657
733
  },
658
734
  "Classes"
659
735
  ), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
660
- core.Button,
736
+ SplitButton,
661
737
  {
662
- onClick: () => setOpened(true),
663
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 })
664
- },
665
- "Add students"
738
+ onAddStudentsClick: () => setOpened(true),
739
+ onCopyClassLinkClick: props.onCopyLinkClick
740
+ }
666
741
  ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
667
742
  {
668
743
  title: "# OF STUDENTS",
@@ -1206,6 +1281,14 @@ function Table$2(props) {
1206
1281
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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)));
1207
1282
  }
1208
1283
 
1284
+ function Stack$1(props) {
1285
+ if (props.items.length === 0) {
1286
+ return null;
1287
+ }
1288
+ const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0, key: row.questionName }, /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dark.4", size: "lg" }, row.questionName), /* @__PURE__ */ React__namespace.createElement(core.Text, null, row.answer.join(",") || "No answer.")));
1289
+ return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows));
1290
+ }
1291
+
1209
1292
  function Table$1(props) {
1210
1293
  if (props.items.length === 0) {
1211
1294
  return /* @__PURE__ */ React__namespace.createElement(
@@ -1218,8 +1301,31 @@ function Table$1(props) {
1218
1301
  }
1219
1302
  );
1220
1303
  }
1221
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.name }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(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))))), /* @__PURE__ */ React__namespace.createElement("td", 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"))));
1222
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__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, "Status"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
1304
+ return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(
1305
+ mantineDatatable.DataTable,
1306
+ {
1307
+ verticalSpacing: "sm",
1308
+ sx: { minWidth: 700 },
1309
+ withBorder: false,
1310
+ borderRadius: "sm",
1311
+ withColumnBorders: true,
1312
+ striped: true,
1313
+ highlightOnHover: true,
1314
+ idAccessor: "userId",
1315
+ records: props.items,
1316
+ columns: [{
1317
+ accessor: "name",
1318
+ title: "Student Name",
1319
+ 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))))
1320
+ }, {
1321
+ accessor: "status",
1322
+ 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"))
1323
+ }],
1324
+ rowExpansion: {
1325
+ content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$1, { items: record.answers })
1326
+ }
1327
+ }
1328
+ ));
1223
1329
  }
1224
1330
 
1225
1331
  function Stack(props) {
@@ -1349,8 +1455,8 @@ const Lesson = (props) => {
1349
1455
  value: tab,
1350
1456
  data: [
1351
1457
  { label: "By question", value: "question" },
1352
- { label: "By reflection", value: "reflections" },
1353
- { label: "By student", value: "students" }
1458
+ { label: "By student", value: "students" },
1459
+ { label: "By reflection", value: "reflections" }
1354
1460
  ],
1355
1461
  onChange: setTab
1356
1462
  }