@local-civics/mgmt-ui 0.1.212 → 0.1.214
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.
- package/dist/index.d.ts +77 -81
- package/dist/index.d.ts.css +44 -0
- package/dist/index.js +957 -1330
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +954 -1326
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var core = require('@mantine/core');
|
|
5
4
|
var icons = require('@tabler/icons');
|
|
5
|
+
var core = require('@mantine/core');
|
|
6
6
|
var reactRouterDom = require('react-router-dom');
|
|
7
7
|
var notifications = require('@mantine/notifications');
|
|
8
8
|
var mantineDatatable = require('mantine-datatable');
|
|
@@ -15,66 +15,65 @@ var reactCharts = require('react-charts');
|
|
|
15
15
|
var hooks = require('@mantine/hooks');
|
|
16
16
|
|
|
17
17
|
function _interopNamespaceDefault(e) {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
});
|
|
27
|
-
}
|
|
18
|
+
var n = Object.create(null);
|
|
19
|
+
if (e) {
|
|
20
|
+
Object.keys(e).forEach(function (k) {
|
|
21
|
+
if (k !== 'default') {
|
|
22
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
23
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () { return e[k]; }
|
|
28
26
|
});
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
n.default = e;
|
|
31
|
+
return Object.freeze(n);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
35
35
|
var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
};
|
|
53
|
-
var __objRest$2 = (source, exclude) => {
|
|
54
|
-
var target = {};
|
|
55
|
-
for (var prop in source)
|
|
56
|
-
if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
57
|
-
target[prop] = source[prop];
|
|
58
|
-
if (source != null && __getOwnPropSymbols$f)
|
|
59
|
-
for (var prop of __getOwnPropSymbols$f(source)) {
|
|
60
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
|
|
61
|
-
target[prop] = source[prop];
|
|
37
|
+
function styleInject(css, ref) {
|
|
38
|
+
if ( ref === void 0 ) ref = {};
|
|
39
|
+
var insertAt = ref.insertAt;
|
|
40
|
+
|
|
41
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
42
|
+
|
|
43
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
44
|
+
var style = document.createElement('style');
|
|
45
|
+
style.type = 'text/css';
|
|
46
|
+
|
|
47
|
+
if (insertAt === 'top') {
|
|
48
|
+
if (head.firstChild) {
|
|
49
|
+
head.insertBefore(style, head.firstChild);
|
|
50
|
+
} else {
|
|
51
|
+
head.appendChild(style);
|
|
62
52
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
const useStyles$v = core.createStyles((theme) => ({
|
|
66
|
-
user: {
|
|
67
|
-
display: "block",
|
|
68
|
-
width: "100%",
|
|
69
|
-
padding: theme.spacing.md,
|
|
70
|
-
cursor: "default",
|
|
71
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
|
|
53
|
+
} else {
|
|
54
|
+
head.appendChild(style);
|
|
72
55
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
56
|
+
|
|
57
|
+
if (style.styleSheet) {
|
|
58
|
+
style.styleSheet.cssText = css;
|
|
59
|
+
} else {
|
|
60
|
+
style.appendChild(document.createTextNode(css));
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
var css_248z = "@font-face{font-family:ProximaNova;src:url(https://cdn.localcivics.io/fonts/ProximaNova.otf) format(\"opentype\")}@font-face{font-family:ProximaNova;font-weight:700;src:url(https://cdn.localcivics.io/fonts/ProximaNovaBold.otf) format(\"opentype\")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\\!relative{position:relative!important}.left-3\\.5{left:.875rem}.top-1\\/2{top:50%}.left-3{left:.75rem}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-1\\.5{margin-top:.375rem}.ml-\\[29px\\]{margin-left:29px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-full{height:100%}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-9{height:2.25rem}.h-screen{height:100vh}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-7{width:1.75rem}.w-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-36{width:9rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-\\[440px\\]{width:440px}.w-40{width:10rem}.w-screen{width:100vw}.w-\\[230px\\]{width:230px}.w-24{width:6rem}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-\\[1100px\\]{max-width:1100px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[18px\\]{gap:18px}.gap-5{gap:1.25rem}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-3{gap:.75rem}.gap-3\\.5{gap:.875rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-y-4{row-gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-sky-blue-400\\/30{border-color:rgba(59,208,242,.3)}.border-mint-400\\/30{border-color:rgba(30,226,175,.3)}.border-gold-400\\/30{border-color:rgba(255,212,77,.3)}.border-transparent{border-color:transparent}.border-l-sky-blue-400{--tw-border-opacity:1;border-left-color:rgb(59 208 242/var(--tw-border-opacity))}.border-l-mint-400{--tw-border-opacity:1;border-left-color:rgb(30 226 175/var(--tw-border-opacity))}.border-l-gold-400{--tw-border-opacity:1;border-left-color:rgb(255 212 77/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-blue-400{--tw-gradient-from:#3bd0f2;--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mint-400{--tw-gradient-from:#1ee2af;--tw-gradient-to:rgba(30,226,175,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gold-400{--tw-gradient-from:#ffd44d;--tw-gradient-to:rgba(255,212,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-dark-blue-600{--tw-gradient-from:#0a0f2e;--tw-gradient-to:rgba(10,15,46,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-blue-400\\/15{--tw-gradient-from:rgba(59,208,242,.15);--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-dark-blue-400{--tw-gradient-to:rgba(35,42,58,0);--tw-gradient-stops:var(--tw-gradient-from),#232a3a,var(--tw-gradient-to)}.to-dark-blue-400{--tw-gradient-to:#232a3a}.to-\\[\\#f5c300\\]{--tw-gradient-to:#f5c300}.to-sky-blue-400{--tw-gradient-to:#3bd0f2}.to-mint-400\\/15{--tw-gradient-to:rgba(30,226,175,.15)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-8{padding:2rem}.p-4{padding:1rem}.p-1{padding:.25rem}.p-5{padding:1.25rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.py-\\[18px\\]{padding-bottom:18px;padding-top:18px}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-proxima{font-family:ProximaNova}.text-\\[15\\.5px\\]{font-size:15.5px}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-\\[11px\\]{font-size:11px}.text-\\[28px\\]{font-size:28px}.text-\\[12\\.5px\\]{font-size:12.5px}.text-base{font-size:1rem;line-height:1.5rem}.text-\\[11\\.5px\\]{font-size:11.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-dark-blue-400{--tw-text-opacity:1;color:rgb(35 42 58/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-gold-400{--tw-text-opacity:1;color:rgb(255 212 77/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\]{--tw-shadow:0 3px 12px rgba(255,212,77,.35);--tw-shadow-colored:0 3px 12px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{--tw-shadow:0 2px 10px rgba(30,226,175,.15);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{border-style:solid;border-width:0}button{background-color:transparent;background-image:none;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-transform:none}.placeholder\\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:scale-\\[1\\.02\\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-sky-blue-400:focus{--tw-border-opacity:1;border-color:rgb(59 208 242/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\\:opacity-50:disabled{opacity:.5}";
|
|
65
|
+
styleInject(css_248z);
|
|
66
|
+
|
|
67
|
+
function UserButton({ image, name, email }) {
|
|
68
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "m-3 flex items-center gap-2.5 rounded-xl border border-mint-400/30 bg-gradient-to-r from-sky-blue-400/15 to-mint-400/15 p-2.5 shadow-[0_2px_10px_rgba(30,226,175,0.15)]" }, /* @__PURE__ */ React__namespace.createElement(
|
|
69
|
+
core.Avatar,
|
|
70
|
+
{
|
|
71
|
+
src: image,
|
|
72
|
+
radius: "xl",
|
|
73
|
+
size: 32,
|
|
74
|
+
styles: { placeholder: { color: "#232A3A", backgroundColor: "rgba(30,226,175,0.2)" } }
|
|
75
|
+
}
|
|
76
|
+
), /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-[10px] text-slate-500" }, email)));
|
|
78
77
|
}
|
|
79
78
|
|
|
80
79
|
const compact = (num) => {
|
|
@@ -84,102 +83,66 @@ const compact = (num) => {
|
|
|
84
83
|
}).format(num || 0);
|
|
85
84
|
};
|
|
86
85
|
|
|
87
|
-
const
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
fontWeight: 500,
|
|
109
|
-
display: "block",
|
|
110
|
-
textDecoration: "none",
|
|
111
|
-
padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
|
|
112
|
-
paddingLeft: 31,
|
|
113
|
-
marginLeft: 30,
|
|
114
|
-
fontSize: theme.fontSizes.sm,
|
|
115
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
|
|
116
|
-
borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
|
|
117
|
-
"&:hover": {
|
|
118
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0],
|
|
119
|
-
color: theme.colorScheme === "dark" ? theme.white : theme.black
|
|
120
|
-
}
|
|
121
|
-
},
|
|
122
|
-
linkActive: {
|
|
123
|
-
"&, &:hover": {
|
|
124
|
-
backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
|
|
125
|
-
color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color,
|
|
126
|
-
[`& .${icon}`]: {
|
|
127
|
-
color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
chevron: {
|
|
132
|
-
transition: "transform 200ms ease"
|
|
133
|
-
},
|
|
134
|
-
linkIcon: {
|
|
135
|
-
ref: icon
|
|
136
|
-
}
|
|
137
|
-
};
|
|
138
|
-
});
|
|
139
|
-
function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
|
|
140
|
-
const { classes, theme, cx } = useStyles$u();
|
|
86
|
+
const ACCENT_CLASSNAMES = {
|
|
87
|
+
cyan: {
|
|
88
|
+
row: "bg-sky-blue-400/15 border-sky-blue-400/30",
|
|
89
|
+
chip: "bg-sky-blue-400/25",
|
|
90
|
+
icon: "text-sky-blue-400",
|
|
91
|
+
pill: "bg-sky-blue-400/15 text-dark-blue-400"
|
|
92
|
+
},
|
|
93
|
+
mint: {
|
|
94
|
+
row: "bg-mint-400/15 border-mint-400/30",
|
|
95
|
+
chip: "bg-mint-400/25",
|
|
96
|
+
icon: "text-mint-400",
|
|
97
|
+
pill: "bg-mint-400/15 text-dark-blue-400"
|
|
98
|
+
},
|
|
99
|
+
gold: {
|
|
100
|
+
row: "bg-gold-400/15 border-gold-400/30",
|
|
101
|
+
chip: "bg-gold-400/25",
|
|
102
|
+
icon: "text-gold-400",
|
|
103
|
+
pill: "bg-gold-400/15 text-dark-blue-400"
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened, links, active, notifications }) {
|
|
141
107
|
const hasLinks = Array.isArray(links) && links.length > 0;
|
|
142
108
|
const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
|
|
143
109
|
const [opened, setOpened] = React.useState(initiallyOpened || hasActiveLinks || false);
|
|
144
110
|
React__namespace.useEffect(() => {
|
|
145
111
|
setOpened(hasActiveLinks);
|
|
146
112
|
}, [hasActiveLinks]);
|
|
147
|
-
const
|
|
113
|
+
const isActive = !!active && !hasLinks && label === active;
|
|
114
|
+
const accentClasses = ACCENT_CLASSNAMES[accent];
|
|
148
115
|
const items = (hasLinks ? links : []).map((link) => {
|
|
116
|
+
const linkActive = !!active && active === `${label}/${link.label}`;
|
|
149
117
|
return /* @__PURE__ */ React__namespace.createElement(
|
|
150
|
-
|
|
118
|
+
reactRouterDom.Link,
|
|
151
119
|
{
|
|
152
|
-
|
|
153
|
-
|
|
120
|
+
key: link.label,
|
|
121
|
+
to: link.href,
|
|
122
|
+
className: `flex items-center justify-between gap-2 rounded-[8px] border px-3 py-2 text-xs no-underline transition-colors ${linkActive ? `${accentClasses.row} font-bold text-dark-blue-400` : "border-transparent font-medium text-slate-500 hover:bg-slate-50"}`
|
|
154
123
|
},
|
|
155
|
-
|
|
124
|
+
link.label,
|
|
125
|
+
!!link.notifications && /* @__PURE__ */ React__namespace.createElement("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-bold ${accentClasses.pill}` }, compact(link.notifications))
|
|
156
126
|
);
|
|
157
127
|
});
|
|
158
|
-
|
|
159
|
-
|
|
128
|
+
const rowInner = /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-1 items-center gap-2.5" }, /* @__PURE__ */ React__namespace.createElement("div", { className: `flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg ${isActive ? accentClasses.chip : "bg-slate-50"}` }, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 14, stroke: isActive ? 2.2 : 1.75, className: isActive ? accentClasses.icon : "text-slate-400" })), /* @__PURE__ */ React__namespace.createElement("span", { className: `flex-1 text-xs ${isActive ? "font-bold text-dark-blue-400" : "font-medium text-slate-500"}` }, label));
|
|
129
|
+
return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
|
|
130
|
+
"div",
|
|
160
131
|
{
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
[classes.controlButton]: hasLinks
|
|
164
|
-
}),
|
|
165
|
-
onClick: () => setOpened((o) => !o),
|
|
166
|
-
position: "apart",
|
|
167
|
-
spacing: 0
|
|
132
|
+
onClick: () => hasLinks && setOpened((o) => !o),
|
|
133
|
+
className: `flex items-center gap-2.5 rounded-[10px] border px-3.5 py-2.5 transition-colors ${isActive ? accentClasses.row : "border-transparent hover:bg-slate-50"} ${hasLinks ? "cursor-pointer" : ""}`
|
|
168
134
|
},
|
|
169
|
-
|
|
170
|
-
!!notifications && /* @__PURE__ */ React__namespace.createElement(
|
|
135
|
+
hasLinks ? rowInner : /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: href, className: "flex flex-1 items-center gap-2.5 no-underline" }, rowInner),
|
|
136
|
+
!!notifications && /* @__PURE__ */ React__namespace.createElement("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-bold ${accentClasses.pill}` }, compact(notifications)),
|
|
171
137
|
hasLinks && /* @__PURE__ */ React__namespace.createElement(
|
|
172
|
-
|
|
138
|
+
icons.IconChevronRight,
|
|
173
139
|
{
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
style: {
|
|
178
|
-
transform: opened ? `rotate(${theme.dir === "rtl" ? -90 : 90}deg)` : "none"
|
|
179
|
-
}
|
|
140
|
+
size: 13,
|
|
141
|
+
stroke: 2.2,
|
|
142
|
+
className: `shrink-0 text-slate-300 transition-transform ${opened ? "rotate-90" : ""}`
|
|
180
143
|
}
|
|
181
144
|
)
|
|
182
|
-
), hasLinks
|
|
145
|
+
), hasLinks && opened && /* @__PURE__ */ React__namespace.createElement("div", { className: "ml-[29px] mt-0.5 flex flex-col gap-0.5 border-l border-slate-100 pl-2.5" }, items));
|
|
183
146
|
}
|
|
184
147
|
|
|
185
148
|
var __defProp$e = Object.defineProperty;
|
|
@@ -201,100 +164,15 @@ var __spreadValues$e = (a, b) => {
|
|
|
201
164
|
return a;
|
|
202
165
|
};
|
|
203
166
|
var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
|
|
204
|
-
const useStyles$t = core.createStyles((theme, _params, getRef) => {
|
|
205
|
-
const icon = getRef("icon");
|
|
206
|
-
return {
|
|
207
|
-
navbar: {
|
|
208
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white
|
|
209
|
-
},
|
|
210
|
-
navHeader: {
|
|
211
|
-
[`@media (max-width: ${theme.breakpoints.sm}px)`]: {
|
|
212
|
-
height: 71,
|
|
213
|
-
position: "absolute",
|
|
214
|
-
top: 0
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
navBody: {
|
|
218
|
-
[`@media (max-width: ${theme.breakpoints.sm}px)`]: {
|
|
219
|
-
display: "none"
|
|
220
|
-
}
|
|
221
|
-
},
|
|
222
|
-
burger: {
|
|
223
|
-
[theme.fn.largerThan("sm")]: {
|
|
224
|
-
display: "none"
|
|
225
|
-
}
|
|
226
|
-
},
|
|
227
|
-
header: {
|
|
228
|
-
padding: theme.spacing.md,
|
|
229
|
-
paddingTop: 0,
|
|
230
|
-
marginLeft: -theme.spacing.md,
|
|
231
|
-
marginRight: -theme.spacing.md,
|
|
232
|
-
color: theme.colorScheme === "dark" ? theme.white : theme.black,
|
|
233
|
-
borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
|
|
234
|
-
},
|
|
235
|
-
link: __spreadProps$a(__spreadValues$e({}, theme.fn.focusStyles()), {
|
|
236
|
-
display: "flex",
|
|
237
|
-
alignItems: "center",
|
|
238
|
-
textDecoration: "none",
|
|
239
|
-
fontSize: theme.fontSizes.sm,
|
|
240
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
|
|
241
|
-
padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
|
|
242
|
-
borderRadius: theme.radius.sm,
|
|
243
|
-
fontWeight: 500,
|
|
244
|
-
"&:hover": {
|
|
245
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
|
|
246
|
-
color: theme.colorScheme === "dark" ? theme.white : theme.black,
|
|
247
|
-
[`& .${icon}`]: {
|
|
248
|
-
color: theme.colorScheme === "dark" ? theme.white : theme.black
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}),
|
|
252
|
-
linkIcon: {
|
|
253
|
-
ref: icon,
|
|
254
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
|
|
255
|
-
marginRight: theme.spacing.sm
|
|
256
|
-
},
|
|
257
|
-
links: {
|
|
258
|
-
marginLeft: -theme.spacing.md,
|
|
259
|
-
marginRight: -theme.spacing.md
|
|
260
|
-
},
|
|
261
|
-
user: {
|
|
262
|
-
margin: theme.spacing.md,
|
|
263
|
-
marginLeft: 0,
|
|
264
|
-
marginRight: 0
|
|
265
|
-
},
|
|
266
|
-
linksInner: {
|
|
267
|
-
paddingBottom: theme.spacing.xl
|
|
268
|
-
},
|
|
269
|
-
footer: {
|
|
270
|
-
paddingTop: theme.spacing.md,
|
|
271
|
-
paddingBottom: theme.spacing.md,
|
|
272
|
-
borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`
|
|
273
|
-
},
|
|
274
|
-
active: {
|
|
275
|
-
"&, &:hover": {
|
|
276
|
-
backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
|
|
277
|
-
color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
};
|
|
281
|
-
});
|
|
282
167
|
const data = [
|
|
283
|
-
{ label: "Home", icon: icons.IconHome2 },
|
|
284
|
-
{ label: "Dashboard", icon: icons.IconGauge },
|
|
285
|
-
{ label: "Classes", icon: icons.IconCategory2 },
|
|
286
|
-
{ label: "Pathways", icon: icons.IconRoute },
|
|
287
|
-
{ label: "Badges", icon: icons.IconAlbum },
|
|
288
|
-
{ label: "Lessons", icon: icons.IconLambda },
|
|
289
|
-
{ label: "File Locker", icon: icons.IconClipboard },
|
|
290
|
-
{
|
|
291
|
-
label: "Organization",
|
|
292
|
-
icon: icons.IconBuilding,
|
|
293
|
-
links: [
|
|
294
|
-
{ label: "Overview" },
|
|
295
|
-
{ label: "People" }
|
|
296
|
-
]
|
|
297
|
-
}
|
|
168
|
+
{ label: "Home", icon: icons.IconHome2, accent: "cyan" },
|
|
169
|
+
{ label: "Dashboard", icon: icons.IconGauge, accent: "mint" },
|
|
170
|
+
{ label: "Classes", icon: icons.IconCategory2, accent: "gold" },
|
|
171
|
+
{ label: "Pathways", icon: icons.IconRoute, accent: "cyan" },
|
|
172
|
+
{ label: "Badges", icon: icons.IconAlbum, accent: "mint" },
|
|
173
|
+
{ label: "Lessons", icon: icons.IconLambda, accent: "gold" },
|
|
174
|
+
{ label: "File Locker", icon: icons.IconClipboard, accent: "cyan" },
|
|
175
|
+
{ label: "Organization", icon: icons.IconBuilding, accent: "gold", links: [{ label: "Overview" }, { label: "People" }] }
|
|
298
176
|
];
|
|
299
177
|
const TRIAL_PAGES = [
|
|
300
178
|
"Home",
|
|
@@ -302,9 +180,6 @@ const TRIAL_PAGES = [
|
|
|
302
180
|
"Badges"
|
|
303
181
|
];
|
|
304
182
|
function Navbar(props) {
|
|
305
|
-
const { classes, cx } = useStyles$t();
|
|
306
|
-
const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
|
|
307
|
-
const toggle = () => setBurgerOpen(!burgerOpen);
|
|
308
183
|
const links = data.map((item) => {
|
|
309
184
|
const context = props.links[item.label] || { notifications: 0, href: "" };
|
|
310
185
|
if (context.hidden || props.trial && TRIAL_PAGES.indexOf(item.label) === -1) {
|
|
@@ -325,27 +200,22 @@ function Navbar(props) {
|
|
|
325
200
|
})
|
|
326
201
|
);
|
|
327
202
|
});
|
|
328
|
-
return /* @__PURE__ */ React__namespace.createElement(
|
|
329
|
-
UserButton,
|
|
330
|
-
{
|
|
331
|
-
className: classes.user,
|
|
332
|
-
image: props.image,
|
|
333
|
-
name: props.name,
|
|
334
|
-
email: props.email
|
|
335
|
-
}
|
|
336
|
-
), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { grow: true, className: classes.links, component: core.ScrollArea }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.linksInner }, links)), !props.loading && /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { className: classes.footer }, props.trial && /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
|
|
337
|
-
event.preventDefault();
|
|
338
|
-
props.onGettingStarted();
|
|
339
|
-
} }, /* @__PURE__ */ React__namespace.createElement(icons.IconVideo, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Getting started")), !!props.onSwitchAccounts && /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
|
|
340
|
-
event.preventDefault();
|
|
341
|
-
props.onSwitchAccounts && props.onSwitchAccounts();
|
|
342
|
-
} }, /* @__PURE__ */ React__namespace.createElement(icons.IconSwitchHorizontal, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Change account")), /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
|
|
343
|
-
event.preventDefault();
|
|
344
|
-
props.onLogout();
|
|
345
|
-
} }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
|
|
203
|
+
return /* @__PURE__ */ React__namespace.createElement("nav", { className: "flex h-full w-[230px] shrink-0 flex-col border-r border-slate-200 bg-white" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between border-b border-slate-100 p-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-24" }, /* @__PURE__ */ React__namespace.createElement("img", { className: "w-full object-contain", src: "https://cdn.localcivics.io/brand/localcivics.png", alt: "Logo" })), !!props.trial && /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-gold-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Trial")), !props.loading && /* @__PURE__ */ React__namespace.createElement(UserButton, { image: props.image, name: props.name, email: props.email }), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5 overflow-y-auto p-2.5" }, links), !props.loading && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-0.5 border-t border-slate-200 p-2.5" }, props.trial && /* @__PURE__ */ React__namespace.createElement(UtilLink, { label: "Getting started", icon: icons.IconVideo, onClick: props.onGettingStarted }), !!props.onSwitchAccounts && /* @__PURE__ */ React__namespace.createElement(UtilLink, { label: "Change account", icon: icons.IconSwitchHorizontal, onClick: props.onSwitchAccounts }), /* @__PURE__ */ React__namespace.createElement(UtilLink, { label: "Logout", icon: icons.IconLogout, onClick: props.onLogout })));
|
|
346
204
|
}
|
|
205
|
+
const UtilLink = (props) => {
|
|
206
|
+
const Icon = props.icon;
|
|
207
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
208
|
+
"div",
|
|
209
|
+
{
|
|
210
|
+
onClick: props.onClick,
|
|
211
|
+
className: "flex cursor-pointer items-center gap-2.5 rounded-[10px] px-3.5 py-2 text-slate-400 hover:bg-slate-50 hover:text-slate-500"
|
|
212
|
+
},
|
|
213
|
+
/* @__PURE__ */ React__namespace.createElement(Icon, { size: 13, stroke: 1.75 }),
|
|
214
|
+
/* @__PURE__ */ React__namespace.createElement("span", { className: "text-[11.5px]" }, props.label)
|
|
215
|
+
);
|
|
216
|
+
};
|
|
347
217
|
|
|
348
|
-
const useStyles$
|
|
218
|
+
const useStyles$k = core.createStyles((theme) => ({
|
|
349
219
|
inner: {
|
|
350
220
|
paddingTop: theme.spacing.xl,
|
|
351
221
|
paddingBottom: theme.spacing.xl * 4
|
|
@@ -381,7 +251,7 @@ const useStyles$s = core.createStyles((theme) => ({
|
|
|
381
251
|
}
|
|
382
252
|
}));
|
|
383
253
|
const GettingStarted = (props) => {
|
|
384
|
-
const { classes } = useStyles$
|
|
254
|
+
const { classes } = useStyles$k();
|
|
385
255
|
return /* @__PURE__ */ React__namespace.createElement(
|
|
386
256
|
core.Modal,
|
|
387
257
|
{
|
|
@@ -395,7 +265,7 @@ const GettingStarted = (props) => {
|
|
|
395
265
|
);
|
|
396
266
|
};
|
|
397
267
|
|
|
398
|
-
const useStyles$
|
|
268
|
+
const useStyles$j = core.createStyles((theme) => ({
|
|
399
269
|
title: {
|
|
400
270
|
fontSize: 34,
|
|
401
271
|
fontWeight: 900,
|
|
@@ -436,7 +306,7 @@ const useStyles$r = core.createStyles((theme) => ({
|
|
|
436
306
|
}
|
|
437
307
|
}));
|
|
438
308
|
const SwitchAccount = (props) => {
|
|
439
|
-
const { classes, theme } = useStyles$
|
|
309
|
+
const { classes, theme } = useStyles$j();
|
|
440
310
|
const options = props.accounts.map((a) => {
|
|
441
311
|
return /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
|
|
442
312
|
});
|
|
@@ -453,51 +323,7 @@ const SwitchAccount = (props) => {
|
|
|
453
323
|
);
|
|
454
324
|
};
|
|
455
325
|
|
|
456
|
-
const useStyles$q = core.createStyles((theme) => ({
|
|
457
|
-
root: {
|
|
458
|
-
display: "flex",
|
|
459
|
-
backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
|
|
460
|
-
padding: theme.spacing.xl * 1.5,
|
|
461
|
-
borderRadius: theme.radius.md
|
|
462
|
-
},
|
|
463
|
-
title: {
|
|
464
|
-
color: theme.white,
|
|
465
|
-
textTransform: "uppercase",
|
|
466
|
-
fontWeight: 700,
|
|
467
|
-
fontSize: theme.fontSizes.sm
|
|
468
|
-
},
|
|
469
|
-
count: {
|
|
470
|
-
color: theme.white,
|
|
471
|
-
fontSize: 32,
|
|
472
|
-
lineHeight: 1,
|
|
473
|
-
fontWeight: 700,
|
|
474
|
-
marginBottom: theme.spacing.md,
|
|
475
|
-
fontFamily: `Greycliff CF, ${theme.fontFamily}`
|
|
476
|
-
},
|
|
477
|
-
description: {
|
|
478
|
-
color: theme.colors[theme.primaryColor][0],
|
|
479
|
-
fontSize: theme.fontSizes.sm,
|
|
480
|
-
marginTop: 5
|
|
481
|
-
},
|
|
482
|
-
stat: {
|
|
483
|
-
flex: 1,
|
|
484
|
-
"& + &": {
|
|
485
|
-
paddingLeft: theme.spacing.xl,
|
|
486
|
-
marginLeft: theme.spacing.xl,
|
|
487
|
-
borderLeft: `1px solid ${theme.colors[theme.primaryColor][3]}`,
|
|
488
|
-
[theme.fn.smallerThan("sm")]: {
|
|
489
|
-
paddingLeft: 0,
|
|
490
|
-
marginLeft: 0,
|
|
491
|
-
borderLeft: 0,
|
|
492
|
-
paddingTop: theme.spacing.xl,
|
|
493
|
-
marginTop: theme.spacing.xl,
|
|
494
|
-
borderTop: `1px solid ${theme.colors[theme.primaryColor][3]}`
|
|
495
|
-
}
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
}));
|
|
499
326
|
const StatsGroup = ({ data, footer }) => {
|
|
500
|
-
const { classes } = useStyles$q();
|
|
501
327
|
const stats = data.map((stat) => {
|
|
502
328
|
const value = (() => {
|
|
503
329
|
if (stat.unit === "%") {
|
|
@@ -506,9 +332,9 @@ const StatsGroup = ({ data, footer }) => {
|
|
|
506
332
|
return stat.value;
|
|
507
333
|
})();
|
|
508
334
|
const safeValue = Number.isFinite(value) ? value : 0;
|
|
509
|
-
return /* @__PURE__ */ React__namespace.createElement("div", { key: stat.title
|
|
335
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { key: stat.title }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-3xl font-black text-white" }, safeValue.toLocaleString(), stat.unit), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 text-[11px] font-bold uppercase tracking-wide text-white/70" }, stat.title));
|
|
510
336
|
});
|
|
511
|
-
return /* @__PURE__ */ React__namespace.createElement("div", { className:
|
|
337
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap gap-x-10 gap-y-4 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 px-8 py-6" }, stats, footer);
|
|
512
338
|
};
|
|
513
339
|
|
|
514
340
|
const Tabs = (props) => {
|
|
@@ -517,7 +343,7 @@ const Tabs = (props) => {
|
|
|
517
343
|
return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
|
|
518
344
|
};
|
|
519
345
|
|
|
520
|
-
const useStyles$
|
|
346
|
+
const useStyles$i = core.createStyles((theme) => ({
|
|
521
347
|
button: {
|
|
522
348
|
borderTopRightRadius: 0,
|
|
523
349
|
borderBottomRightRadius: 0,
|
|
@@ -531,8 +357,8 @@ const useStyles$p = core.createStyles((theme) => ({
|
|
|
531
357
|
borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
|
|
532
358
|
}
|
|
533
359
|
}));
|
|
534
|
-
const SplitButton$
|
|
535
|
-
const { classes, theme } = useStyles$
|
|
360
|
+
const SplitButton$4 = (props) => {
|
|
361
|
+
const { classes, theme } = useStyles$i();
|
|
536
362
|
theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
|
|
537
363
|
return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
|
|
538
364
|
core.Button,
|
|
@@ -560,7 +386,7 @@ const SplitButton$5 = (props) => {
|
|
|
560
386
|
));
|
|
561
387
|
};
|
|
562
388
|
|
|
563
|
-
const useStyles$
|
|
389
|
+
const useStyles$h = core.createStyles((theme) => ({
|
|
564
390
|
wrapper: {
|
|
565
391
|
display: "flex",
|
|
566
392
|
alignItems: "center",
|
|
@@ -611,7 +437,7 @@ const useStyles$o = core.createStyles((theme) => ({
|
|
|
611
437
|
}
|
|
612
438
|
}));
|
|
613
439
|
const PlaceholderBanner = (props) => {
|
|
614
|
-
const { classes } = useStyles$
|
|
440
|
+
const { classes } = useStyles$h();
|
|
615
441
|
const title = props.title || "Nothing to display";
|
|
616
442
|
const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
|
|
617
443
|
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 }));
|
|
@@ -781,7 +607,7 @@ function Table$j(props) {
|
|
|
781
607
|
));
|
|
782
608
|
}
|
|
783
609
|
|
|
784
|
-
const useStyles$
|
|
610
|
+
const useStyles$g = core.createStyles((theme) => ({
|
|
785
611
|
title: {
|
|
786
612
|
fontSize: 34,
|
|
787
613
|
fontWeight: 900,
|
|
@@ -794,7 +620,7 @@ const useStyles$n = core.createStyles((theme) => ({
|
|
|
794
620
|
}
|
|
795
621
|
}));
|
|
796
622
|
const Badge = (props) => {
|
|
797
|
-
const { classes } = useStyles$
|
|
623
|
+
const { classes } = useStyles$g();
|
|
798
624
|
const [tab, setTab] = React.useState("lessons");
|
|
799
625
|
const numberOfStudents = props.students.length;
|
|
800
626
|
const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
|
|
@@ -808,7 +634,7 @@ const Badge = (props) => {
|
|
|
808
634
|
},
|
|
809
635
|
"Back"
|
|
810
636
|
)), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
|
|
811
|
-
SplitButton$
|
|
637
|
+
SplitButton$4,
|
|
812
638
|
{
|
|
813
639
|
href: props.href,
|
|
814
640
|
onCopyLinkClick: props.onCopyLinkClick,
|
|
@@ -861,65 +687,34 @@ const Badge = (props) => {
|
|
|
861
687
|
};
|
|
862
688
|
|
|
863
689
|
function Table$i(props) {
|
|
690
|
+
if (props.loading) {
|
|
691
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
|
|
692
|
+
}
|
|
864
693
|
if (props.items.length === 0) {
|
|
865
|
-
return /* @__PURE__ */ React__namespace.createElement(
|
|
866
|
-
PlaceholderBanner,
|
|
867
|
-
{
|
|
868
|
-
title: "No badges to display",
|
|
869
|
-
description: "We don't have any badges to show you just yet.",
|
|
870
|
-
loading: props.loading,
|
|
871
|
-
icon: "badges"
|
|
872
|
-
}
|
|
873
|
-
);
|
|
694
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "No badges to display.");
|
|
874
695
|
}
|
|
875
|
-
|
|
876
|
-
|
|
696
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, props.items.map((row, i) => /* @__PURE__ */ React__namespace.createElement(
|
|
697
|
+
reactRouterDom.Link,
|
|
877
698
|
{
|
|
878
|
-
|
|
699
|
+
key: row.badgeId,
|
|
879
700
|
to: row.href,
|
|
880
|
-
|
|
881
|
-
display: "block",
|
|
882
|
-
width: "100%",
|
|
883
|
-
padding: theme.spacing.md,
|
|
884
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
|
885
|
-
"&:hover": {
|
|
886
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
|
|
887
|
-
}
|
|
888
|
-
})
|
|
701
|
+
className: `block px-5 py-4 no-underline hover:bg-slate-50 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
|
|
889
702
|
},
|
|
890
|
-
/* @__PURE__ */ React__namespace.createElement(
|
|
891
|
-
|
|
892
|
-
|
|
703
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name),
|
|
704
|
+
row.description && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)
|
|
705
|
+
)));
|
|
893
706
|
}
|
|
894
707
|
|
|
895
|
-
const useStyles$m = core.createStyles((theme) => ({
|
|
896
|
-
title: {
|
|
897
|
-
fontSize: 34,
|
|
898
|
-
fontWeight: 900,
|
|
899
|
-
[theme.fn.smallerThan("sm")]: {
|
|
900
|
-
fontSize: 24
|
|
901
|
-
}
|
|
902
|
-
},
|
|
903
|
-
description: {
|
|
904
|
-
maxWidth: 600
|
|
905
|
-
}
|
|
906
|
-
}));
|
|
907
708
|
const Badges = (props) => {
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
core.Autocomplete,
|
|
709
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Project-sized skills acquisition and standards alignment.")), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2.5 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(icons.IconSearch, { size: 15, stroke: 1.75, className: "text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
|
|
710
|
+
"input",
|
|
911
711
|
{
|
|
712
|
+
type: "text",
|
|
912
713
|
placeholder: "Search for a badge that fits your needs",
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
}
|
|
916
|
-
), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(
|
|
917
|
-
Table$i,
|
|
918
|
-
{
|
|
919
|
-
loading: props.loading,
|
|
920
|
-
items: props.badges
|
|
714
|
+
onChange: (e) => props.onAutocompleteChange(e.target.value),
|
|
715
|
+
className: "flex-1 border-none bg-transparent text-sm text-dark-blue-400 outline-none placeholder:text-slate-400"
|
|
921
716
|
}
|
|
922
|
-
))));
|
|
717
|
+
)), /* @__PURE__ */ React__namespace.createElement(Table$i, { loading: props.loading, items: props.badges }));
|
|
923
718
|
};
|
|
924
719
|
|
|
925
720
|
function Table$h(props) {
|
|
@@ -1110,30 +905,58 @@ const Dashboard = (props) => {
|
|
|
1110
905
|
)))))));
|
|
1111
906
|
};
|
|
1112
907
|
|
|
1113
|
-
const
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
{
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
},
|
|
1127
|
-
|
|
1128
|
-
), /* @__PURE__ */ React__namespace.createElement(
|
|
1129
|
-
|
|
1130
|
-
{
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
}
|
|
908
|
+
const openDeleteModal = (student, onDelete) => modals.openConfirmModal({
|
|
909
|
+
title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
|
|
910
|
+
centered: true,
|
|
911
|
+
children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Click confirm if you want to remove the student from this specific class. This will NOT remove the student from the Tech Platform."),
|
|
912
|
+
labels: { confirm: "Remove Student", cancel: "Cancel" },
|
|
913
|
+
confirmProps: { color: "red" },
|
|
914
|
+
onConfirm: () => onDelete(student)
|
|
915
|
+
});
|
|
916
|
+
function Table$c(props) {
|
|
917
|
+
if (props.loading) {
|
|
918
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
|
|
919
|
+
}
|
|
920
|
+
if (props.items.length === 0) {
|
|
921
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "You have not rostered any students yet.");
|
|
922
|
+
}
|
|
923
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] gap-3 border-b border-slate-100 px-5 py-3 text-[10px] font-bold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("div", null, "Name"), /* @__PURE__ */ React__namespace.createElement("div", null, "Role"), /* @__PURE__ */ React__namespace.createElement("div", null, "Badges Earned"), /* @__PURE__ */ React__namespace.createElement("div", null, "Lessons Completed"), /* @__PURE__ */ React__namespace.createElement("div", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("div", null)), props.items.map((row, i) => {
|
|
924
|
+
var _a, _b;
|
|
925
|
+
const name = row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email;
|
|
926
|
+
const initials = (((_a = row.givenName) == null ? void 0 : _a[0]) || row.email[0] || "?") + (((_b = row.familyName) == null ? void 0 : _b[0]) || "");
|
|
927
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
928
|
+
"div",
|
|
929
|
+
{
|
|
930
|
+
key: row.email,
|
|
931
|
+
className: `grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
|
|
932
|
+
},
|
|
933
|
+
/* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: row.href, className: "flex min-w-0 items-center gap-2.5 no-underline" }, row.avatar ? /* @__PURE__ */ React__namespace.createElement("img", { className: "h-8 w-8 shrink-0 rounded-full object-cover", src: row.avatar, alt: name }) : /* @__PURE__ */ React__namespace.createElement("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-mint-400/20 text-[10px] font-bold text-dark-blue-400" }, initials.toUpperCase()), /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-[10.5px] text-slate-400" }, row.email))),
|
|
934
|
+
/* @__PURE__ */ React__namespace.createElement(
|
|
935
|
+
"select",
|
|
936
|
+
{
|
|
937
|
+
disabled: row.readonly,
|
|
938
|
+
value: row.isAdmin ? "educator" : "student",
|
|
939
|
+
onChange: (e) => props.onRoleChange && props.onRoleChange(row, e.target.value),
|
|
940
|
+
className: "w-fit rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-600 disabled:opacity-50"
|
|
941
|
+
},
|
|
942
|
+
/* @__PURE__ */ React__namespace.createElement("option", { value: "student" }, "Student"),
|
|
943
|
+
/* @__PURE__ */ React__namespace.createElement("option", { value: "educator" }, "Educator")
|
|
944
|
+
),
|
|
945
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.badgesEarned),
|
|
946
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.lessonsCompleted),
|
|
947
|
+
/* @__PURE__ */ React__namespace.createElement("div", null, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { size: 16, stroke: 3, className: "text-mint-400" })),
|
|
948
|
+
/* @__PURE__ */ React__namespace.createElement("div", null, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(
|
|
949
|
+
"button",
|
|
950
|
+
{
|
|
951
|
+
type: "button",
|
|
952
|
+
onClick: () => openDeleteModal(row, props.onDelete),
|
|
953
|
+
className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-300 hover:bg-red-50 hover:text-red-500"
|
|
954
|
+
},
|
|
955
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 14, stroke: 1.75 })
|
|
956
|
+
))
|
|
957
|
+
);
|
|
958
|
+
}));
|
|
959
|
+
}
|
|
1137
960
|
|
|
1138
961
|
var __defProp$c = Object.defineProperty;
|
|
1139
962
|
var __defProps$8 = Object.defineProperties;
|
|
@@ -1154,225 +977,46 @@ var __spreadValues$c = (a, b) => {
|
|
|
1154
977
|
return a;
|
|
1155
978
|
};
|
|
1156
979
|
var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
|
|
1157
|
-
|
|
1158
|
-
const
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
}));
|
|
1162
|
-
}, [props.items]);
|
|
1163
|
-
console.groupEnd();
|
|
1164
|
-
const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
|
|
1165
|
-
if (props.items.length === 0) {
|
|
1166
|
-
return /* @__PURE__ */ React__namespace.createElement(
|
|
1167
|
-
PlaceholderBanner,
|
|
1168
|
-
{
|
|
1169
|
-
title: "No members to display",
|
|
1170
|
-
description: "You have not rostered any students yet.",
|
|
1171
|
-
loading: props.loading,
|
|
1172
|
-
icon: "groups"
|
|
1173
|
-
}
|
|
1174
|
-
);
|
|
1175
|
-
}
|
|
1176
|
-
const sortStatus = {
|
|
1177
|
-
columnAccessor: sortConfig.key,
|
|
1178
|
-
direction: sortConfig.direction === "desc" ? "desc" : "asc"
|
|
1179
|
-
};
|
|
1180
|
-
const openDeleteModal = (student) => modals.openConfirmModal({
|
|
1181
|
-
title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
|
|
1182
|
-
centered: true,
|
|
1183
|
-
children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Click confirm if you want to remove the student from this specific class. This will NOT remove the student from the Tech Platform."),
|
|
1184
|
-
labels: { confirm: "Remove Student", cancel: "Cancel" },
|
|
1185
|
-
confirmProps: { color: "red" },
|
|
1186
|
-
onConfirm: () => props.onDelete && props.onDelete(student)
|
|
1187
|
-
});
|
|
1188
|
-
return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(
|
|
1189
|
-
mantineDatatable.DataTable,
|
|
1190
|
-
{
|
|
1191
|
-
verticalSpacing: 20,
|
|
1192
|
-
sx: { minWidth: 700 },
|
|
1193
|
-
highlightOnHover: true,
|
|
1194
|
-
striped: true,
|
|
1195
|
-
records: sortedItems,
|
|
1196
|
-
idAccessor: "email",
|
|
1197
|
-
sortStatus,
|
|
1198
|
-
onSortStatusChange: (status) => requestSort(status.columnAccessor),
|
|
1199
|
-
columns: [
|
|
1200
|
-
{
|
|
1201
|
-
accessor: "fullName",
|
|
1202
|
-
title: "Name",
|
|
1203
|
-
sortable: true,
|
|
1204
|
-
render: (row) => /* @__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))))
|
|
1205
|
-
},
|
|
1206
|
-
{
|
|
1207
|
-
accessor: "isAdmin",
|
|
1208
|
-
title: "Role",
|
|
1209
|
-
sortable: true,
|
|
1210
|
-
render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Box, { maw: 150 }, /* @__PURE__ */ React__namespace.createElement(
|
|
1211
|
-
core.Select,
|
|
1212
|
-
{
|
|
1213
|
-
size: "sm",
|
|
1214
|
-
disabled: row.readonly,
|
|
1215
|
-
value: row.isAdmin ? "educator" : "student",
|
|
1216
|
-
onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
|
|
1217
|
-
data: [
|
|
1218
|
-
{ label: "Student", value: "student" },
|
|
1219
|
-
{ label: "Educator", value: "educator" }
|
|
1220
|
-
]
|
|
1221
|
-
}
|
|
1222
|
-
))
|
|
1223
|
-
},
|
|
1224
|
-
{
|
|
1225
|
-
accessor: "badgesEarned",
|
|
1226
|
-
title: "Badges Earned",
|
|
1227
|
-
sortable: true
|
|
1228
|
-
},
|
|
1229
|
-
{
|
|
1230
|
-
accessor: "lessonsCompleted",
|
|
1231
|
-
title: "Lessons Completed",
|
|
1232
|
-
sortable: true
|
|
1233
|
-
},
|
|
1234
|
-
{
|
|
1235
|
-
accessor: "hasAccount",
|
|
1236
|
-
title: "Account Created?",
|
|
1237
|
-
sortable: true,
|
|
1238
|
-
render: (row) => row.hasAccount ? /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { color: "green" }) : null
|
|
1239
|
-
},
|
|
1240
|
-
{
|
|
1241
|
-
accessor: "actions",
|
|
1242
|
-
title: "",
|
|
1243
|
-
textAlignment: "right",
|
|
1244
|
-
render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red", onClick: () => openDeleteModal(row) }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 16, stroke: 1.5 })))
|
|
1245
|
-
}
|
|
1246
|
-
]
|
|
1247
|
-
}
|
|
1248
|
-
));
|
|
1249
|
-
}
|
|
1250
|
-
|
|
1251
|
-
var __defProp$b = Object.defineProperty;
|
|
1252
|
-
var __defProps$7 = Object.defineProperties;
|
|
1253
|
-
var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
|
|
1254
|
-
var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
|
|
1255
|
-
var __hasOwnProp$b = Object.prototype.hasOwnProperty;
|
|
1256
|
-
var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
|
|
1257
|
-
var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1258
|
-
var __spreadValues$b = (a, b) => {
|
|
1259
|
-
for (var prop in b || (b = {}))
|
|
1260
|
-
if (__hasOwnProp$b.call(b, prop))
|
|
1261
|
-
__defNormalProp$b(a, prop, b[prop]);
|
|
1262
|
-
if (__getOwnPropSymbols$b)
|
|
1263
|
-
for (var prop of __getOwnPropSymbols$b(b)) {
|
|
1264
|
-
if (__propIsEnum$b.call(b, prop))
|
|
1265
|
-
__defNormalProp$b(a, prop, b[prop]);
|
|
1266
|
-
}
|
|
1267
|
-
return a;
|
|
1268
|
-
};
|
|
1269
|
-
var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
|
|
1270
|
-
const useStyles$l = core.createStyles((theme) => ({
|
|
1271
|
-
title: {
|
|
1272
|
-
fontSize: 34,
|
|
1273
|
-
fontWeight: 900,
|
|
1274
|
-
[theme.fn.smallerThan("sm")]: {
|
|
1275
|
-
fontSize: 24
|
|
1276
|
-
}
|
|
1277
|
-
},
|
|
1278
|
-
description: {
|
|
1279
|
-
maxWidth: 600
|
|
1280
|
-
},
|
|
1281
|
-
autocomplete: {
|
|
1282
|
-
maxWidth: 400
|
|
1283
|
-
},
|
|
1284
|
-
wrapper: {
|
|
1285
|
-
position: "relative",
|
|
1286
|
-
marginBottom: 30
|
|
1287
|
-
},
|
|
1288
|
-
dropzone: {
|
|
1289
|
-
borderWidth: 1,
|
|
1290
|
-
paddingBottom: 50
|
|
1291
|
-
},
|
|
1292
|
-
icon: {
|
|
1293
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
|
|
1294
|
-
},
|
|
1295
|
-
control: {
|
|
1296
|
-
position: "absolute",
|
|
1297
|
-
width: 250,
|
|
1298
|
-
left: "calc(50% - 125px)",
|
|
1299
|
-
bottom: -20
|
|
1300
|
-
}
|
|
1301
|
-
}));
|
|
1302
|
-
const Class = (props) => {
|
|
1303
|
-
const { classes } = useStyles$l();
|
|
1304
|
-
const form$1 = form.useForm({
|
|
1305
|
-
initialValues: {
|
|
1306
|
-
classId: "",
|
|
1307
|
-
userId: "",
|
|
1308
|
-
email: "",
|
|
1309
|
-
givenName: "",
|
|
1310
|
-
familyName: "",
|
|
1311
|
-
avatar: "",
|
|
1312
|
-
role: "",
|
|
1313
|
-
readonly: false,
|
|
1314
|
-
lastActivity: null,
|
|
1315
|
-
hasAccount: false,
|
|
1316
|
-
lessonsCompleted: 0,
|
|
1317
|
-
badgesEarned: 0,
|
|
1318
|
-
href: "",
|
|
1319
|
-
isAdmin: false
|
|
1320
|
-
},
|
|
1321
|
-
validate: {
|
|
1322
|
-
email: (value) => /^\S+@\S+$/.test(value) && props.members.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
|
|
1323
|
-
}
|
|
1324
|
-
});
|
|
1325
|
-
const [opened, setOpened] = React.useState(false);
|
|
1326
|
-
return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
|
|
1327
|
-
core.Drawer,
|
|
980
|
+
const Class = (props) => {
|
|
981
|
+
const [opened, setOpened] = React.useState(false);
|
|
982
|
+
return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
|
|
983
|
+
core.Drawer,
|
|
1328
984
|
{
|
|
1329
985
|
opened,
|
|
1330
986
|
onClose: () => setOpened(false),
|
|
1331
|
-
title:
|
|
987
|
+
title: "Add students",
|
|
1332
988
|
padding: "xl",
|
|
1333
989
|
size: "xl"
|
|
1334
990
|
},
|
|
1335
|
-
/* @__PURE__ */ React__namespace.createElement(
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
setOpened(false);
|
|
1339
|
-
props.onCreateMembers && props.onCreateMembers([values]);
|
|
1340
|
-
}) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
|
|
1341
|
-
core.TextInput,
|
|
1342
|
-
__spreadValues$b({
|
|
1343
|
-
withAsterisk: true,
|
|
1344
|
-
label: "Email",
|
|
1345
|
-
placeholder: "Email"
|
|
1346
|
-
}, form$1.getInputProps("email"))
|
|
1347
|
-
), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
|
|
1348
|
-
core.TextInput,
|
|
1349
|
-
__spreadValues$b({
|
|
1350
|
-
label: "Given name",
|
|
1351
|
-
placeholder: "Given name"
|
|
1352
|
-
}, form$1.getInputProps("givenName"))
|
|
1353
|
-
), /* @__PURE__ */ React__namespace.createElement(
|
|
1354
|
-
core.TextInput,
|
|
1355
|
-
__spreadValues$b({
|
|
1356
|
-
label: "Family name",
|
|
1357
|
-
placeholder: "Family name"
|
|
1358
|
-
}, form$1.getInputProps("familyName"))
|
|
1359
|
-
)), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
|
|
1360
|
-
), /* @__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.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
|
|
1361
|
-
core.Badge,
|
|
991
|
+
/* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$8(__spreadValues$c({}, props), { close: () => setOpened(false) }))
|
|
992
|
+
), /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex max-w-5xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React__namespace.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, props.description || "No description")), !props.loading && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
|
|
993
|
+
"button",
|
|
1362
994
|
{
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
995
|
+
type: "button",
|
|
996
|
+
onClick: () => setOpened(true),
|
|
997
|
+
className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
|
|
1366
998
|
},
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
999
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconPlus, { size: 13, stroke: 2 }),
|
|
1000
|
+
"Add students"
|
|
1001
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
1002
|
+
"button",
|
|
1370
1003
|
{
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
}
|
|
1375
|
-
|
|
1004
|
+
type: "button",
|
|
1005
|
+
onClick: props.onCopyLinkClick,
|
|
1006
|
+
className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
|
|
1007
|
+
},
|
|
1008
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconLink, { size: 13, stroke: 2 }),
|
|
1009
|
+
"Copy class link"
|
|
1010
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
1011
|
+
"button",
|
|
1012
|
+
{
|
|
1013
|
+
type: "button",
|
|
1014
|
+
onClick: props.onExportDataClick,
|
|
1015
|
+
className: "flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-3.5 py-2 text-xs font-bold text-dark-blue-400 shadow-[0_3px_12px_rgba(255,212,77,0.35)]"
|
|
1016
|
+
},
|
|
1017
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconDownload, { size: 13, stroke: 2 }),
|
|
1018
|
+
"Export data (.csv)"
|
|
1019
|
+
))), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
|
|
1376
1020
|
{
|
|
1377
1021
|
title: "# OF STUDENTS",
|
|
1378
1022
|
value: props.members.filter((a) => !a.isAdmin).length
|
|
@@ -1398,10 +1042,30 @@ const Class = (props) => {
|
|
|
1398
1042
|
onDelete: props.onDeleteMember,
|
|
1399
1043
|
onRoleChange: props.onChangeUserRole
|
|
1400
1044
|
}
|
|
1401
|
-
)))
|
|
1045
|
+
)));
|
|
1402
1046
|
};
|
|
1403
1047
|
const DropzoneButton$1 = (props) => {
|
|
1404
|
-
const
|
|
1048
|
+
const form$1 = form.useForm({
|
|
1049
|
+
initialValues: {
|
|
1050
|
+
classId: "",
|
|
1051
|
+
userId: "",
|
|
1052
|
+
email: "",
|
|
1053
|
+
givenName: "",
|
|
1054
|
+
familyName: "",
|
|
1055
|
+
avatar: "",
|
|
1056
|
+
role: "",
|
|
1057
|
+
readonly: false,
|
|
1058
|
+
lastActivity: null,
|
|
1059
|
+
hasAccount: false,
|
|
1060
|
+
lessonsCompleted: 0,
|
|
1061
|
+
badgesEarned: 0,
|
|
1062
|
+
href: "",
|
|
1063
|
+
isAdmin: false
|
|
1064
|
+
},
|
|
1065
|
+
validate: {
|
|
1066
|
+
email: (value) => /^\S+@\S+$/.test(value) && props.members.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
|
|
1067
|
+
}
|
|
1068
|
+
});
|
|
1405
1069
|
const openRef = React__namespace.useRef(null);
|
|
1406
1070
|
const [loading, setLoading] = React__namespace.useState(false);
|
|
1407
1071
|
const onDrop = React__namespace.useCallback((acceptedFiles) => {
|
|
@@ -1422,29 +1086,59 @@ const DropzoneButton$1 = (props) => {
|
|
|
1422
1086
|
});
|
|
1423
1087
|
});
|
|
1424
1088
|
}, []);
|
|
1425
|
-
return /* @__PURE__ */ React__namespace.createElement("div", { className:
|
|
1089
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React__namespace.createElement(
|
|
1426
1090
|
dropzone.Dropzone,
|
|
1427
1091
|
{
|
|
1428
1092
|
loading,
|
|
1429
1093
|
openRef,
|
|
1430
1094
|
onDrop,
|
|
1431
|
-
className: classes.dropzone,
|
|
1432
|
-
radius: "md",
|
|
1433
1095
|
accept: [dropzone.MIME_TYPES.csv],
|
|
1434
1096
|
maxSize: 5 * 1024 ** 2
|
|
1435
1097
|
},
|
|
1436
|
-
/* @__PURE__ */ React__namespace.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "center" }, /* @__PURE__ */ React__namespace.createElement(
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1098
|
+
/* @__PURE__ */ React__namespace.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "center" }, /* @__PURE__ */ React__namespace.createElement(icons.IconCloudUpload, { size: 50, stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement("p", { className: "mt-6 text-center text-lg font-bold text-dark-blue-400" }, "Upload multiple"), /* @__PURE__ */ React__namespace.createElement("p", { className: "mt-2 text-center text-sm text-slate-400" }, "Drag'n'drop files here to upload. We can accept only ", /* @__PURE__ */ React__namespace.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
|
|
1099
|
+
), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React__namespace.createElement(
|
|
1100
|
+
"button",
|
|
1101
|
+
{
|
|
1102
|
+
type: "button",
|
|
1103
|
+
onClick: () => {
|
|
1104
|
+
var _a;
|
|
1105
|
+
return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
|
|
1106
|
+
},
|
|
1107
|
+
className: "rounded-full bg-dark-blue-400 px-6 py-2.5 text-xs font-bold text-white"
|
|
1108
|
+
},
|
|
1109
|
+
"Select file"
|
|
1110
|
+
)), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
|
|
1111
|
+
const values = form$1.values;
|
|
1112
|
+
form$1.reset();
|
|
1113
|
+
props.close();
|
|
1114
|
+
props.onCreateMembers && props.onCreateMembers([values]);
|
|
1115
|
+
}) }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement(
|
|
1116
|
+
core.TextInput,
|
|
1117
|
+
__spreadValues$c({
|
|
1118
|
+
withAsterisk: true,
|
|
1119
|
+
label: "Email",
|
|
1120
|
+
placeholder: "Email"
|
|
1121
|
+
}, form$1.getInputProps("email"))
|
|
1122
|
+
), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
|
|
1123
|
+
core.TextInput,
|
|
1124
|
+
__spreadValues$c({
|
|
1125
|
+
label: "Given name",
|
|
1126
|
+
placeholder: "Given name"
|
|
1127
|
+
}, form$1.getInputProps("givenName"))
|
|
1128
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
1129
|
+
core.TextInput,
|
|
1130
|
+
__spreadValues$c({
|
|
1131
|
+
label: "Family name",
|
|
1132
|
+
placeholder: "Family name"
|
|
1133
|
+
}, form$1.getInputProps("familyName"))
|
|
1134
|
+
)), /* @__PURE__ */ React__namespace.createElement(
|
|
1135
|
+
"button",
|
|
1136
|
+
{
|
|
1137
|
+
type: "submit",
|
|
1138
|
+
className: "mt-2 rounded-lg bg-dark-blue-400 px-4 py-2.5 text-xs font-bold text-white"
|
|
1139
|
+
},
|
|
1140
|
+
"Submit"
|
|
1141
|
+
))));
|
|
1448
1142
|
};
|
|
1449
1143
|
|
|
1450
1144
|
function Table$b(props) {
|
|
@@ -1513,23 +1207,23 @@ function Table$b(props) {
|
|
|
1513
1207
|
));
|
|
1514
1208
|
}
|
|
1515
1209
|
|
|
1516
|
-
var __defProp$
|
|
1517
|
-
var __getOwnPropSymbols$
|
|
1518
|
-
var __hasOwnProp$
|
|
1519
|
-
var __propIsEnum$
|
|
1520
|
-
var __defNormalProp$
|
|
1521
|
-
var __spreadValues$
|
|
1210
|
+
var __defProp$b = Object.defineProperty;
|
|
1211
|
+
var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
|
|
1212
|
+
var __hasOwnProp$b = Object.prototype.hasOwnProperty;
|
|
1213
|
+
var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
|
|
1214
|
+
var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1215
|
+
var __spreadValues$b = (a, b) => {
|
|
1522
1216
|
for (var prop in b || (b = {}))
|
|
1523
|
-
if (__hasOwnProp$
|
|
1524
|
-
__defNormalProp$
|
|
1525
|
-
if (__getOwnPropSymbols$
|
|
1526
|
-
for (var prop of __getOwnPropSymbols$
|
|
1527
|
-
if (__propIsEnum$
|
|
1528
|
-
__defNormalProp$
|
|
1217
|
+
if (__hasOwnProp$b.call(b, prop))
|
|
1218
|
+
__defNormalProp$b(a, prop, b[prop]);
|
|
1219
|
+
if (__getOwnPropSymbols$b)
|
|
1220
|
+
for (var prop of __getOwnPropSymbols$b(b)) {
|
|
1221
|
+
if (__propIsEnum$b.call(b, prop))
|
|
1222
|
+
__defNormalProp$b(a, prop, b[prop]);
|
|
1529
1223
|
}
|
|
1530
1224
|
return a;
|
|
1531
1225
|
};
|
|
1532
|
-
const useStyles$
|
|
1226
|
+
const useStyles$f = core.createStyles((theme) => ({
|
|
1533
1227
|
title: {
|
|
1534
1228
|
fontSize: 34,
|
|
1535
1229
|
fontWeight: 900,
|
|
@@ -1542,7 +1236,7 @@ const useStyles$k = core.createStyles((theme) => ({
|
|
|
1542
1236
|
}
|
|
1543
1237
|
}));
|
|
1544
1238
|
const Classes = (props) => {
|
|
1545
|
-
const { classes } = useStyles$
|
|
1239
|
+
const { classes } = useStyles$f();
|
|
1546
1240
|
const form$1 = form.useForm({
|
|
1547
1241
|
initialValues: {
|
|
1548
1242
|
classId: "",
|
|
@@ -1572,14 +1266,14 @@ const Classes = (props) => {
|
|
|
1572
1266
|
props.onCreateClass && props.onCreateClass(values);
|
|
1573
1267
|
}) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
|
|
1574
1268
|
core.TextInput,
|
|
1575
|
-
__spreadValues$
|
|
1269
|
+
__spreadValues$b({
|
|
1576
1270
|
withAsterisk: true,
|
|
1577
1271
|
label: "Name",
|
|
1578
1272
|
placeholder: "Class name"
|
|
1579
1273
|
}, form$1.getInputProps("name"))
|
|
1580
1274
|
), /* @__PURE__ */ React__namespace.createElement(
|
|
1581
1275
|
core.TextInput,
|
|
1582
|
-
__spreadValues$
|
|
1276
|
+
__spreadValues$b({
|
|
1583
1277
|
label: "Description",
|
|
1584
1278
|
placeholder: "A class for my first period English students"
|
|
1585
1279
|
}, form$1.getInputProps("description"))
|
|
@@ -1613,7 +1307,7 @@ const Classes = (props) => {
|
|
|
1613
1307
|
))))));
|
|
1614
1308
|
};
|
|
1615
1309
|
|
|
1616
|
-
const useStyles$
|
|
1310
|
+
const useStyles$e = core.createStyles((theme) => ({
|
|
1617
1311
|
title: {
|
|
1618
1312
|
fontSize: 34,
|
|
1619
1313
|
fontWeight: 900,
|
|
@@ -1627,7 +1321,7 @@ const useStyles$j = core.createStyles((theme) => ({
|
|
|
1627
1321
|
}
|
|
1628
1322
|
}));
|
|
1629
1323
|
const UserInfo = (props) => {
|
|
1630
|
-
const { classes } = useStyles$
|
|
1324
|
+
const { classes } = useStyles$e();
|
|
1631
1325
|
return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
|
|
1632
1326
|
};
|
|
1633
1327
|
|
|
@@ -1765,229 +1459,98 @@ const Student = (props) => {
|
|
|
1765
1459
|
))))));
|
|
1766
1460
|
};
|
|
1767
1461
|
|
|
1768
|
-
const
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
paddingLeft: theme.spacing.xl * 2,
|
|
1779
|
-
"&:hover": {
|
|
1780
|
-
boxShadow: theme.shadows.md,
|
|
1781
|
-
transform: "scale(1.02)"
|
|
1782
|
-
},
|
|
1783
|
-
"&::before": {
|
|
1784
|
-
content: '""',
|
|
1785
|
-
position: "absolute",
|
|
1786
|
-
top: 0,
|
|
1787
|
-
bottom: 0,
|
|
1788
|
-
left: 0,
|
|
1789
|
-
width: 6,
|
|
1790
|
-
backgroundImage: theme.fn.linearGradient(0, theme.colors[from][6], theme.colors[to][6])
|
|
1791
|
-
}
|
|
1792
|
-
}
|
|
1793
|
-
};
|
|
1794
|
-
});
|
|
1462
|
+
const ACCENT_BORDER = {
|
|
1463
|
+
cyan: "border-l-sky-blue-400",
|
|
1464
|
+
mint: "border-l-mint-400",
|
|
1465
|
+
gold: "border-l-gold-400"
|
|
1466
|
+
};
|
|
1467
|
+
const ACCENT_GRADIENT = {
|
|
1468
|
+
cyan: "from-sky-blue-400",
|
|
1469
|
+
mint: "from-mint-400",
|
|
1470
|
+
gold: "from-gold-400"
|
|
1471
|
+
};
|
|
1795
1472
|
function CardGradient(props) {
|
|
1796
|
-
const
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
{
|
|
1803
|
-
size: "xl",
|
|
1804
|
-
radius: "md",
|
|
1805
|
-
variant: "gradient",
|
|
1806
|
-
gradient: { deg: 0, from, to }
|
|
1473
|
+
const accent = props.accent || "cyan";
|
|
1474
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
1475
|
+
"div",
|
|
1476
|
+
{
|
|
1477
|
+
onClick: props.onClick,
|
|
1478
|
+
className: `flex cursor-pointer items-center gap-[18px] rounded-2xl border border-l-4 border-slate-200 bg-white px-[22px] py-[18px] transition-transform hover:scale-[1.02] hover:shadow-md ${ACCENT_BORDER[accent]}`
|
|
1807
1479
|
},
|
|
1808
|
-
icon
|
|
1809
|
-
|
|
1480
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-br ${ACCENT_GRADIENT[accent]} to-dark-blue-400 text-white` }, props.icon),
|
|
1481
|
+
/* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-[15.5px] font-extrabold text-dark-blue-400" }, props.title), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-0.5 text-xs text-slate-500" }, props.description))
|
|
1482
|
+
);
|
|
1810
1483
|
}
|
|
1811
1484
|
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1485
|
+
const Home = (props) => {
|
|
1486
|
+
const accessCode = props.organization.accessCode;
|
|
1487
|
+
const onCopyAccessCode = async () => {
|
|
1488
|
+
if (!accessCode)
|
|
1489
|
+
return;
|
|
1490
|
+
try {
|
|
1491
|
+
await navigator.clipboard.writeText(accessCode);
|
|
1492
|
+
notifications.showNotification({
|
|
1493
|
+
title: "Copied!",
|
|
1494
|
+
message: "Community code copied to clipboard.",
|
|
1495
|
+
autoClose: 3e3
|
|
1496
|
+
});
|
|
1497
|
+
} catch (err) {
|
|
1498
|
+
console.error("Failed to copy code", err);
|
|
1825
1499
|
}
|
|
1826
|
-
|
|
1827
|
-
}
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1500
|
+
};
|
|
1501
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex w-full max-w-[1100px] flex-col gap-5" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-stretch gap-5" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-[28px] font-extrabold text-dark-blue-400" }, props.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 text-[12.5px] text-slate-400" }, props.impactStatement)), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-[440px] shrink-0 flex-col justify-between gap-3 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 p-5" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-base font-extrabold text-white" }, props.organization.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-white/70" }, props.organization.description)), accessCode && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "text-[11px] text-white/70" }, "Community code: ", accessCode), /* @__PURE__ */ React__namespace.createElement(
|
|
1502
|
+
"button",
|
|
1503
|
+
{
|
|
1504
|
+
onClick: onCopyAccessCode,
|
|
1505
|
+
className: "rounded-md bg-white/90 px-2.5 py-1 text-[10.5px] font-bold text-dark-blue-400 hover:bg-white"
|
|
1506
|
+
},
|
|
1507
|
+
"Copy"
|
|
1508
|
+
)))), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement(
|
|
1509
|
+
CardGradient,
|
|
1510
|
+
{
|
|
1511
|
+
title: "Dashboard",
|
|
1512
|
+
description: "Track your students\u2019 pathway progress",
|
|
1513
|
+
accent: "mint",
|
|
1514
|
+
icon: /* @__PURE__ */ React__namespace.createElement(icons.IconGauge, { size: 18, stroke: 1.75 }),
|
|
1515
|
+
onClick: props.onDashboardClick
|
|
1837
1516
|
}
|
|
1838
|
-
|
|
1839
|
-
};
|
|
1840
|
-
const useStyles$h = core.createStyles((theme) => ({
|
|
1841
|
-
card: {
|
|
1842
|
-
height: 240,
|
|
1843
|
-
backgroundSize: "cover",
|
|
1844
|
-
backgroundPosition: "center",
|
|
1845
|
-
whiteSpace: "pre-line"
|
|
1846
|
-
},
|
|
1847
|
-
content: {
|
|
1848
|
-
position: "absolute",
|
|
1849
|
-
padding: theme.spacing.xl,
|
|
1850
|
-
zIndex: 1,
|
|
1851
|
-
top: 0,
|
|
1852
|
-
bottom: 0,
|
|
1853
|
-
right: 0,
|
|
1854
|
-
left: 0
|
|
1855
|
-
},
|
|
1856
|
-
title: {
|
|
1857
|
-
color: theme.white,
|
|
1858
|
-
marginBottom: theme.spacing.xs / 2
|
|
1859
|
-
},
|
|
1860
|
-
description: {
|
|
1861
|
-
color: theme.white,
|
|
1862
|
-
maxWidth: 220
|
|
1863
|
-
},
|
|
1864
|
-
code: {
|
|
1865
|
-
color: theme.white,
|
|
1866
|
-
maxWidth: 220
|
|
1867
|
-
}
|
|
1868
|
-
}));
|
|
1869
|
-
const TenantBanner = (_a) => {
|
|
1870
|
-
var _b = _a, {
|
|
1871
|
-
title,
|
|
1872
|
-
description,
|
|
1873
|
-
image,
|
|
1874
|
-
style,
|
|
1875
|
-
className,
|
|
1876
|
-
code
|
|
1877
|
-
} = _b, others = __objRest$1(_b, [
|
|
1878
|
-
"title",
|
|
1879
|
-
"description",
|
|
1880
|
-
"image",
|
|
1881
|
-
"style",
|
|
1882
|
-
"className",
|
|
1883
|
-
"code"
|
|
1884
|
-
]);
|
|
1885
|
-
const { classes, cx, theme } = useStyles$h();
|
|
1886
|
-
const handleCopy = async () => {
|
|
1887
|
-
if (!code)
|
|
1888
|
-
return;
|
|
1889
|
-
try {
|
|
1890
|
-
await navigator.clipboard.writeText(code);
|
|
1891
|
-
notifications.showNotification({
|
|
1892
|
-
title: "Copied!",
|
|
1893
|
-
message: "Community code copied to clipboard.",
|
|
1894
|
-
autoClose: 3e3
|
|
1895
|
-
});
|
|
1896
|
-
} catch (err) {
|
|
1897
|
-
console.error("Failed to copy code", err);
|
|
1898
|
-
}
|
|
1899
|
-
};
|
|
1900
|
-
return /* @__PURE__ */ React__namespace.createElement(
|
|
1901
|
-
core.Card,
|
|
1902
|
-
__spreadValues$9({
|
|
1903
|
-
radius: "md",
|
|
1904
|
-
style: __spreadValues$9({ backgroundImage: `url(${image})` }, style),
|
|
1905
|
-
className: cx(classes.card, className)
|
|
1906
|
-
}, others),
|
|
1907
|
-
/* @__PURE__ */ React__namespace.createElement(
|
|
1908
|
-
core.Overlay,
|
|
1909
|
-
{
|
|
1910
|
-
gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[6]} 100%)`,
|
|
1911
|
-
opacity: 0.55,
|
|
1912
|
-
zIndex: 0
|
|
1913
|
-
}
|
|
1914
|
-
),
|
|
1915
|
-
/* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React__namespace.createElement(core.Group, { mt: "sm", spacing: "xs" }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", className: classes.code }, "Community Code: ", code || "\u2014"), code && /* @__PURE__ */ React__namespace.createElement(
|
|
1916
|
-
core.Button,
|
|
1917
|
-
{
|
|
1918
|
-
size: "xs",
|
|
1919
|
-
variant: "white",
|
|
1920
|
-
onClick: handleCopy,
|
|
1921
|
-
styles: {
|
|
1922
|
-
root: {
|
|
1923
|
-
backgroundColor: "rgba(255,255,255,0.9)"
|
|
1924
|
-
}
|
|
1925
|
-
}
|
|
1926
|
-
},
|
|
1927
|
-
"Copy"
|
|
1928
|
-
)))
|
|
1929
|
-
);
|
|
1930
|
-
};
|
|
1931
|
-
|
|
1932
|
-
const Home = (props) => {
|
|
1933
|
-
return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { md: 6 }, /* @__PURE__ */ React__namespace.createElement(
|
|
1934
|
-
UserInfo,
|
|
1935
|
-
{
|
|
1936
|
-
variant: "compact",
|
|
1937
|
-
name: props.name,
|
|
1938
|
-
impactStatement: props.impactStatement
|
|
1939
|
-
}
|
|
1940
|
-
)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { md: 6 }, /* @__PURE__ */ React__namespace.createElement(
|
|
1941
|
-
TenantBanner,
|
|
1942
|
-
{
|
|
1943
|
-
title: props.organization.name,
|
|
1944
|
-
description: props.organization.description,
|
|
1945
|
-
image: props.organization.image,
|
|
1946
|
-
code: props.organization.accessCode
|
|
1947
|
-
}
|
|
1948
|
-
))), /* @__PURE__ */ React__namespace.createElement(core.Grid, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
|
|
1949
|
-
CardGradient,
|
|
1950
|
-
{
|
|
1951
|
-
title: "Dashboard",
|
|
1952
|
-
description: "Track your students\u2019 pathway progress",
|
|
1953
|
-
onClick: props.onDashboardClick
|
|
1954
|
-
}
|
|
1955
|
-
)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
|
|
1517
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
1956
1518
|
CardGradient,
|
|
1957
1519
|
{
|
|
1958
1520
|
title: "Classes",
|
|
1959
1521
|
description: "Create classes, cohorts, or custom subgroups",
|
|
1522
|
+
accent: "gold",
|
|
1523
|
+
icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, { size: 18, stroke: 1.75 }),
|
|
1960
1524
|
onClick: props.onClassesClick
|
|
1961
1525
|
}
|
|
1962
|
-
)
|
|
1526
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
1963
1527
|
CardGradient,
|
|
1964
1528
|
{
|
|
1965
1529
|
title: "Pathways",
|
|
1966
1530
|
description: "Explore all your unique pathway requirements in one clear space",
|
|
1531
|
+
accent: "cyan",
|
|
1532
|
+
icon: /* @__PURE__ */ React__namespace.createElement(icons.IconRoute, { size: 18, stroke: 1.75 }),
|
|
1967
1533
|
onClick: props.onPathwaysClick
|
|
1968
1534
|
}
|
|
1969
|
-
)
|
|
1535
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
1970
1536
|
CardGradient,
|
|
1971
1537
|
{
|
|
1972
1538
|
title: "Badges",
|
|
1973
1539
|
description: "Key milestones that reflect skill development, micro-credentials, or academic progress",
|
|
1540
|
+
accent: "mint",
|
|
1541
|
+
icon: /* @__PURE__ */ React__namespace.createElement(icons.IconAlbum, { size: 18, stroke: 1.75 }),
|
|
1974
1542
|
onClick: props.onBadgesClick
|
|
1975
1543
|
}
|
|
1976
|
-
)
|
|
1977
|
-
CardGradient,
|
|
1978
|
-
{
|
|
1979
|
-
title: "Lessons",
|
|
1980
|
-
description: "Bite-sized activities and learning experiences accelerating students achievement",
|
|
1981
|
-
onClick: props.onLessonsClick
|
|
1982
|
-
}
|
|
1983
|
-
)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
|
|
1544
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
1984
1545
|
CardGradient,
|
|
1985
1546
|
{
|
|
1986
1547
|
title: "File Locker",
|
|
1987
1548
|
description: "A secure space to view student-submitted work and provide feedback",
|
|
1549
|
+
accent: "cyan",
|
|
1550
|
+
icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboard, { size: 18, stroke: 1.75 }),
|
|
1988
1551
|
onClick: props.onFileLockerClick
|
|
1989
1552
|
}
|
|
1990
|
-
)))
|
|
1553
|
+
)));
|
|
1991
1554
|
};
|
|
1992
1555
|
|
|
1993
1556
|
function Table$7(props) {
|
|
@@ -2022,7 +1585,7 @@ function Table$7(props) {
|
|
|
2022
1585
|
));
|
|
2023
1586
|
}
|
|
2024
1587
|
|
|
2025
|
-
const useStyles$
|
|
1588
|
+
const useStyles$d = core.createStyles((theme) => ({
|
|
2026
1589
|
button: {
|
|
2027
1590
|
borderTopRightRadius: 0,
|
|
2028
1591
|
borderBottomRightRadius: 0,
|
|
@@ -2037,7 +1600,7 @@ const useStyles$g = core.createStyles((theme) => ({
|
|
|
2037
1600
|
}
|
|
2038
1601
|
}));
|
|
2039
1602
|
const SplitButton$3 = (props) => {
|
|
2040
|
-
const { classes, theme } = useStyles$
|
|
1603
|
+
const { classes, theme } = useStyles$d();
|
|
2041
1604
|
theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
|
|
2042
1605
|
return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
|
|
2043
1606
|
core.Button,
|
|
@@ -2074,28 +1637,28 @@ function Stack$3(props) {
|
|
|
2074
1637
|
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)));
|
|
2075
1638
|
}
|
|
2076
1639
|
|
|
2077
|
-
var __defProp$
|
|
2078
|
-
var __defProps$
|
|
2079
|
-
var __getOwnPropDescs$
|
|
2080
|
-
var __getOwnPropSymbols$
|
|
2081
|
-
var __hasOwnProp$
|
|
2082
|
-
var __propIsEnum$
|
|
2083
|
-
var __defNormalProp$
|
|
2084
|
-
var __spreadValues$
|
|
1640
|
+
var __defProp$a = Object.defineProperty;
|
|
1641
|
+
var __defProps$7 = Object.defineProperties;
|
|
1642
|
+
var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
|
|
1643
|
+
var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
|
|
1644
|
+
var __hasOwnProp$a = Object.prototype.hasOwnProperty;
|
|
1645
|
+
var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
|
|
1646
|
+
var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1647
|
+
var __spreadValues$a = (a, b) => {
|
|
2085
1648
|
for (var prop in b || (b = {}))
|
|
2086
|
-
if (__hasOwnProp$
|
|
2087
|
-
__defNormalProp$
|
|
2088
|
-
if (__getOwnPropSymbols$
|
|
2089
|
-
for (var prop of __getOwnPropSymbols$
|
|
2090
|
-
if (__propIsEnum$
|
|
2091
|
-
__defNormalProp$
|
|
1649
|
+
if (__hasOwnProp$a.call(b, prop))
|
|
1650
|
+
__defNormalProp$a(a, prop, b[prop]);
|
|
1651
|
+
if (__getOwnPropSymbols$a)
|
|
1652
|
+
for (var prop of __getOwnPropSymbols$a(b)) {
|
|
1653
|
+
if (__propIsEnum$a.call(b, prop))
|
|
1654
|
+
__defNormalProp$a(a, prop, b[prop]);
|
|
2092
1655
|
}
|
|
2093
1656
|
return a;
|
|
2094
1657
|
};
|
|
2095
|
-
var __spreadProps$
|
|
1658
|
+
var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
|
|
2096
1659
|
function Table$6(props) {
|
|
2097
1660
|
const preparedItems = React__namespace.useMemo(() => {
|
|
2098
|
-
return props.items.map((item) => __spreadProps$
|
|
1661
|
+
return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
|
|
2099
1662
|
status: item.isComplete ? 2 : item.isStarted ? 1 : 0
|
|
2100
1663
|
}));
|
|
2101
1664
|
}, [props.items]);
|
|
@@ -2215,7 +1778,7 @@ function Stack$2(props) {
|
|
|
2215
1778
|
}
|
|
2216
1779
|
const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "…" : "");
|
|
2217
1780
|
|
|
2218
|
-
const useStyles$
|
|
1781
|
+
const useStyles$c = core.createStyles((theme) => ({
|
|
2219
1782
|
title: {
|
|
2220
1783
|
fontSize: 34,
|
|
2221
1784
|
fontWeight: 900,
|
|
@@ -2228,7 +1791,7 @@ const useStyles$f = core.createStyles((theme) => ({
|
|
|
2228
1791
|
}
|
|
2229
1792
|
}));
|
|
2230
1793
|
const Lesson = (props) => {
|
|
2231
|
-
const { classes } = useStyles$
|
|
1794
|
+
const { classes } = useStyles$c();
|
|
2232
1795
|
const [tab, setTab] = React.useState("question");
|
|
2233
1796
|
const numberOfStudents = props.students.length;
|
|
2234
1797
|
const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
|
|
@@ -2341,68 +1904,38 @@ const Lesson = (props) => {
|
|
|
2341
1904
|
};
|
|
2342
1905
|
|
|
2343
1906
|
function Table$5(props) {
|
|
1907
|
+
if (props.loading) {
|
|
1908
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
|
|
1909
|
+
}
|
|
2344
1910
|
if (props.items.length === 0) {
|
|
2345
|
-
return /* @__PURE__ */ React__namespace.createElement(
|
|
2346
|
-
PlaceholderBanner,
|
|
2347
|
-
{
|
|
2348
|
-
title: "No lessons to display",
|
|
2349
|
-
description: "We don't have any lessons to show you just yet.",
|
|
2350
|
-
loading: props.loading,
|
|
2351
|
-
icon: "lessons"
|
|
2352
|
-
}
|
|
2353
|
-
);
|
|
1911
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "No lessons to display.");
|
|
2354
1912
|
}
|
|
2355
|
-
|
|
2356
|
-
|
|
1913
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, "Lesson"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
|
|
1914
|
+
reactRouterDom.Link,
|
|
2357
1915
|
{
|
|
2358
|
-
|
|
1916
|
+
key: row.lessonId,
|
|
2359
1917
|
to: row.href,
|
|
2360
|
-
|
|
2361
|
-
display: "block",
|
|
2362
|
-
width: "100%",
|
|
2363
|
-
padding: theme.spacing.md,
|
|
2364
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
|
2365
|
-
"&:hover": {
|
|
2366
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
|
|
2367
|
-
}
|
|
2368
|
-
})
|
|
1918
|
+
className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
|
|
2369
1919
|
},
|
|
2370
|
-
/* @__PURE__ */ React__namespace.createElement(
|
|
2371
|
-
|
|
2372
|
-
|
|
1920
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)),
|
|
1921
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
|
|
1922
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
|
|
1923
|
+
)));
|
|
2373
1924
|
}
|
|
2374
1925
|
|
|
2375
|
-
const useStyles$e = core.createStyles((theme) => ({
|
|
2376
|
-
title: {
|
|
2377
|
-
fontSize: 34,
|
|
2378
|
-
fontWeight: 900,
|
|
2379
|
-
[theme.fn.smallerThan("sm")]: {
|
|
2380
|
-
fontSize: 24
|
|
2381
|
-
}
|
|
2382
|
-
},
|
|
2383
|
-
description: {
|
|
2384
|
-
maxWidth: 600
|
|
2385
|
-
}
|
|
2386
|
-
}));
|
|
2387
1926
|
const Lessons = (props) => {
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
core.Autocomplete,
|
|
1927
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Bite-sized activities and learning experiences accelerating students achievement")), /* @__PURE__ */ React__namespace.createElement("div", { className: "relative" }, /* @__PURE__ */ React__namespace.createElement(icons.IconSearch, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
|
|
1928
|
+
"input",
|
|
2391
1929
|
{
|
|
1930
|
+
type: "text",
|
|
2392
1931
|
placeholder: "Search for a lesson that fits your needs",
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
}
|
|
2396
|
-
), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(
|
|
2397
|
-
Table$5,
|
|
2398
|
-
{
|
|
2399
|
-
loading: props.loading,
|
|
2400
|
-
items: props.lessons
|
|
1932
|
+
onChange: (e) => props.onAutocompleteChange(e.target.value),
|
|
1933
|
+
className: "w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-dark-blue-400 placeholder:text-slate-400 focus:border-sky-blue-400 focus:outline-none"
|
|
2401
1934
|
}
|
|
2402
|
-
))));
|
|
1935
|
+
)), /* @__PURE__ */ React__namespace.createElement(Table$5, { loading: props.loading, items: props.lessons }));
|
|
2403
1936
|
};
|
|
2404
1937
|
|
|
2405
|
-
const useStyles$
|
|
1938
|
+
const useStyles$b = core.createStyles((theme) => ({
|
|
2406
1939
|
title: {
|
|
2407
1940
|
fontSize: 22,
|
|
2408
1941
|
fontWeight: 900,
|
|
@@ -2421,7 +1954,7 @@ const useStyles$d = core.createStyles((theme) => ({
|
|
|
2421
1954
|
}
|
|
2422
1955
|
}));
|
|
2423
1956
|
function AccessCode(props) {
|
|
2424
|
-
const { classes } = useStyles$
|
|
1957
|
+
const { classes } = useStyles$b();
|
|
2425
1958
|
return /* @__PURE__ */ React__namespace.createElement(core.Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React__namespace.createElement(core.Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React__namespace.createElement(
|
|
2426
1959
|
core.Anchor,
|
|
2427
1960
|
{
|
|
@@ -2449,7 +1982,7 @@ const monthNames = [
|
|
|
2449
1982
|
"November",
|
|
2450
1983
|
"December"
|
|
2451
1984
|
];
|
|
2452
|
-
const useStyles$
|
|
1985
|
+
const useStyles$a = core.createStyles((theme) => ({
|
|
2453
1986
|
title: {
|
|
2454
1987
|
fontSize: 34,
|
|
2455
1988
|
fontWeight: 900,
|
|
@@ -2479,7 +2012,7 @@ const useStyles$c = core.createStyles((theme) => ({
|
|
|
2479
2012
|
}
|
|
2480
2013
|
}));
|
|
2481
2014
|
const Organization = (props) => {
|
|
2482
|
-
const { classes } = useStyles$
|
|
2015
|
+
const { classes } = useStyles$a();
|
|
2483
2016
|
return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__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.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
|
|
2484
2017
|
core.Badge,
|
|
2485
2018
|
{
|
|
@@ -2505,7 +2038,7 @@ const Organization = (props) => {
|
|
|
2505
2038
|
] }))))));
|
|
2506
2039
|
};
|
|
2507
2040
|
|
|
2508
|
-
const useStyles$
|
|
2041
|
+
const useStyles$9 = core.createStyles((theme) => ({
|
|
2509
2042
|
button: {
|
|
2510
2043
|
borderTopRightRadius: 0,
|
|
2511
2044
|
borderBottomRightRadius: 0,
|
|
@@ -2520,7 +2053,7 @@ const useStyles$b = core.createStyles((theme) => ({
|
|
|
2520
2053
|
}
|
|
2521
2054
|
}));
|
|
2522
2055
|
const SplitButton$2 = (props) => {
|
|
2523
|
-
const { classes, theme } = useStyles$
|
|
2056
|
+
const { classes, theme } = useStyles$9();
|
|
2524
2057
|
const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
|
|
2525
2058
|
const hasMenu = !!props.withOrganizationLink;
|
|
2526
2059
|
return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
|
|
@@ -2582,26 +2115,26 @@ function Table$4(props) {
|
|
|
2582
2115
|
return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, 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, "Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Role"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "# of Classes"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
|
|
2583
2116
|
}
|
|
2584
2117
|
|
|
2585
|
-
var __defProp$
|
|
2586
|
-
var __defProps$
|
|
2587
|
-
var __getOwnPropDescs$
|
|
2588
|
-
var __getOwnPropSymbols$
|
|
2589
|
-
var __hasOwnProp$
|
|
2590
|
-
var __propIsEnum$
|
|
2591
|
-
var __defNormalProp$
|
|
2592
|
-
var __spreadValues$
|
|
2118
|
+
var __defProp$9 = Object.defineProperty;
|
|
2119
|
+
var __defProps$6 = Object.defineProperties;
|
|
2120
|
+
var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
|
|
2121
|
+
var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
|
|
2122
|
+
var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
|
|
2123
|
+
var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
|
|
2124
|
+
var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2125
|
+
var __spreadValues$9 = (a, b) => {
|
|
2593
2126
|
for (var prop in b || (b = {}))
|
|
2594
|
-
if (__hasOwnProp$
|
|
2595
|
-
__defNormalProp$
|
|
2596
|
-
if (__getOwnPropSymbols$
|
|
2597
|
-
for (var prop of __getOwnPropSymbols$
|
|
2598
|
-
if (__propIsEnum$
|
|
2599
|
-
__defNormalProp$
|
|
2127
|
+
if (__hasOwnProp$9.call(b, prop))
|
|
2128
|
+
__defNormalProp$9(a, prop, b[prop]);
|
|
2129
|
+
if (__getOwnPropSymbols$9)
|
|
2130
|
+
for (var prop of __getOwnPropSymbols$9(b)) {
|
|
2131
|
+
if (__propIsEnum$9.call(b, prop))
|
|
2132
|
+
__defNormalProp$9(a, prop, b[prop]);
|
|
2600
2133
|
}
|
|
2601
2134
|
return a;
|
|
2602
2135
|
};
|
|
2603
|
-
var __spreadProps$
|
|
2604
|
-
const useStyles$
|
|
2136
|
+
var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
|
|
2137
|
+
const useStyles$8 = core.createStyles((theme) => ({
|
|
2605
2138
|
title: {
|
|
2606
2139
|
fontSize: 34,
|
|
2607
2140
|
fontWeight: 900,
|
|
@@ -2631,7 +2164,7 @@ const useStyles$a = core.createStyles((theme) => ({
|
|
|
2631
2164
|
}
|
|
2632
2165
|
}));
|
|
2633
2166
|
const People = (props) => {
|
|
2634
|
-
const { classes } = useStyles$
|
|
2167
|
+
const { classes } = useStyles$8();
|
|
2635
2168
|
const form$1 = form.useForm({
|
|
2636
2169
|
initialValues: {
|
|
2637
2170
|
userId: "",
|
|
@@ -2662,27 +2195,27 @@ const People = (props) => {
|
|
|
2662
2195
|
padding: "xl",
|
|
2663
2196
|
size: "xl"
|
|
2664
2197
|
},
|
|
2665
|
-
/* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$
|
|
2198
|
+
/* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __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(() => {
|
|
2666
2199
|
const values = form$1.values;
|
|
2667
2200
|
form$1.reset();
|
|
2668
2201
|
setOpened(false);
|
|
2669
2202
|
props.onCreateUsers && props.onCreateUsers([values]);
|
|
2670
2203
|
}) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
|
|
2671
2204
|
core.TextInput,
|
|
2672
|
-
__spreadValues$
|
|
2205
|
+
__spreadValues$9({
|
|
2673
2206
|
withAsterisk: true,
|
|
2674
2207
|
label: "Email",
|
|
2675
2208
|
placeholder: "Email"
|
|
2676
2209
|
}, form$1.getInputProps("email"))
|
|
2677
2210
|
), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
|
|
2678
2211
|
core.TextInput,
|
|
2679
|
-
__spreadValues$
|
|
2212
|
+
__spreadValues$9({
|
|
2680
2213
|
label: "Given name",
|
|
2681
2214
|
placeholder: "Given name"
|
|
2682
2215
|
}, form$1.getInputProps("givenName"))
|
|
2683
2216
|
), /* @__PURE__ */ React__namespace.createElement(
|
|
2684
2217
|
core.TextInput,
|
|
2685
|
-
__spreadValues$
|
|
2218
|
+
__spreadValues$9({
|
|
2686
2219
|
label: "Family name",
|
|
2687
2220
|
placeholder: "Family name"
|
|
2688
2221
|
}, form$1.getInputProps("familyName"))
|
|
@@ -2735,7 +2268,7 @@ const People = (props) => {
|
|
|
2735
2268
|
))))));
|
|
2736
2269
|
};
|
|
2737
2270
|
const DropzoneButton = (props) => {
|
|
2738
|
-
const { classes, theme } = useStyles$
|
|
2271
|
+
const { classes, theme } = useStyles$8();
|
|
2739
2272
|
const openRef = React__namespace.useRef(null);
|
|
2740
2273
|
const [loading, setLoading] = React__namespace.useState(false);
|
|
2741
2274
|
const onDrop = React__namespace.useCallback((acceptedFiles) => {
|
|
@@ -2781,7 +2314,7 @@ const DropzoneButton = (props) => {
|
|
|
2781
2314
|
} }, "Select file"));
|
|
2782
2315
|
};
|
|
2783
2316
|
|
|
2784
|
-
const useStyles$
|
|
2317
|
+
const useStyles$7 = core.createStyles((theme) => ({
|
|
2785
2318
|
form: {
|
|
2786
2319
|
backgroundColor: theme.white,
|
|
2787
2320
|
padding: theme.spacing.xl,
|
|
@@ -2844,7 +2377,7 @@ const useStyles$9 = core.createStyles((theme) => ({
|
|
|
2844
2377
|
}
|
|
2845
2378
|
}));
|
|
2846
2379
|
const StartAnonymousLesson = (props) => {
|
|
2847
|
-
const { classes } = useStyles$
|
|
2380
|
+
const { classes } = useStyles$7();
|
|
2848
2381
|
const [name, setName] = React__namespace.useState("");
|
|
2849
2382
|
return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.Container, null, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet" }, "Community"), /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, "You are now part of ", `${props.educatorName}'s`, " Class")), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(
|
|
2850
2383
|
core.TextInput,
|
|
@@ -2868,24 +2401,24 @@ const StartAnonymousLesson = (props) => {
|
|
|
2868
2401
|
))))));
|
|
2869
2402
|
};
|
|
2870
2403
|
|
|
2871
|
-
var __defProp$
|
|
2872
|
-
var __getOwnPropSymbols$
|
|
2873
|
-
var __hasOwnProp$
|
|
2874
|
-
var __propIsEnum$
|
|
2875
|
-
var __defNormalProp$
|
|
2876
|
-
var __spreadValues$
|
|
2404
|
+
var __defProp$8 = Object.defineProperty;
|
|
2405
|
+
var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
|
|
2406
|
+
var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
|
|
2407
|
+
var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
|
|
2408
|
+
var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2409
|
+
var __spreadValues$8 = (a, b) => {
|
|
2877
2410
|
for (var prop in b || (b = {}))
|
|
2878
|
-
if (__hasOwnProp$
|
|
2879
|
-
__defNormalProp$
|
|
2880
|
-
if (__getOwnPropSymbols$
|
|
2881
|
-
for (var prop of __getOwnPropSymbols$
|
|
2882
|
-
if (__propIsEnum$
|
|
2883
|
-
__defNormalProp$
|
|
2411
|
+
if (__hasOwnProp$8.call(b, prop))
|
|
2412
|
+
__defNormalProp$8(a, prop, b[prop]);
|
|
2413
|
+
if (__getOwnPropSymbols$8)
|
|
2414
|
+
for (var prop of __getOwnPropSymbols$8(b)) {
|
|
2415
|
+
if (__propIsEnum$8.call(b, prop))
|
|
2416
|
+
__defNormalProp$8(a, prop, b[prop]);
|
|
2884
2417
|
}
|
|
2885
2418
|
return a;
|
|
2886
2419
|
};
|
|
2887
2420
|
const BadgeGrid = (props) => {
|
|
2888
|
-
const badges = props.badges.map((b) => /* @__PURE__ */ React__namespace.createElement(TaskCard, __spreadValues$
|
|
2421
|
+
const badges = props.badges.map((b) => /* @__PURE__ */ React__namespace.createElement(TaskCard, __spreadValues$8({ key: b.title }, b)));
|
|
2889
2422
|
return /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 4, breakpoints: [{ maxWidth: "sm", cols: 1 }, { maxWidth: "md", cols: 3 }] }, badges);
|
|
2890
2423
|
};
|
|
2891
2424
|
function TaskCard(props) {
|
|
@@ -2901,26 +2434,146 @@ function TaskCard(props) {
|
|
|
2901
2434
|
));
|
|
2902
2435
|
}
|
|
2903
2436
|
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2437
|
+
var __defProp$7 = Object.defineProperty;
|
|
2438
|
+
var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
|
|
2439
|
+
var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
|
|
2440
|
+
var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
|
|
2441
|
+
var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2442
|
+
var __spreadValues$7 = (a, b) => {
|
|
2443
|
+
for (var prop in b || (b = {}))
|
|
2444
|
+
if (__hasOwnProp$7.call(b, prop))
|
|
2445
|
+
__defNormalProp$7(a, prop, b[prop]);
|
|
2446
|
+
if (__getOwnPropSymbols$7)
|
|
2447
|
+
for (var prop of __getOwnPropSymbols$7(b)) {
|
|
2448
|
+
if (__propIsEnum$7.call(b, prop))
|
|
2449
|
+
__defNormalProp$7(a, prop, b[prop]);
|
|
2909
2450
|
}
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2451
|
+
return a;
|
|
2452
|
+
};
|
|
2453
|
+
var __objRest$1 = (source, exclude) => {
|
|
2454
|
+
var target = {};
|
|
2455
|
+
for (var prop in source)
|
|
2456
|
+
if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2457
|
+
target[prop] = source[prop];
|
|
2458
|
+
if (source != null && __getOwnPropSymbols$7)
|
|
2459
|
+
for (var prop of __getOwnPropSymbols$7(source)) {
|
|
2460
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
|
|
2461
|
+
target[prop] = source[prop];
|
|
2462
|
+
}
|
|
2463
|
+
return target;
|
|
2464
|
+
};
|
|
2465
|
+
const useStyles$6 = core.createStyles((theme) => ({
|
|
2466
|
+
card: {
|
|
2467
|
+
height: 240,
|
|
2468
|
+
backgroundSize: "cover",
|
|
2469
|
+
backgroundPosition: "center",
|
|
2470
|
+
whiteSpace: "pre-line"
|
|
2471
|
+
},
|
|
2472
|
+
content: {
|
|
2473
|
+
position: "absolute",
|
|
2474
|
+
padding: theme.spacing.xl,
|
|
2475
|
+
zIndex: 1,
|
|
2476
|
+
top: 0,
|
|
2477
|
+
bottom: 0,
|
|
2478
|
+
right: 0,
|
|
2479
|
+
left: 0
|
|
2480
|
+
},
|
|
2481
|
+
title: {
|
|
2482
|
+
color: theme.white,
|
|
2483
|
+
marginBottom: theme.spacing.xs / 2
|
|
2484
|
+
},
|
|
2485
|
+
description: {
|
|
2486
|
+
color: theme.white,
|
|
2487
|
+
maxWidth: 220
|
|
2488
|
+
},
|
|
2489
|
+
code: {
|
|
2490
|
+
color: theme.white,
|
|
2491
|
+
maxWidth: 220
|
|
2492
|
+
}
|
|
2493
|
+
}));
|
|
2494
|
+
const TenantBanner = (_a) => {
|
|
2495
|
+
var _b = _a, {
|
|
2496
|
+
title,
|
|
2497
|
+
description,
|
|
2498
|
+
image,
|
|
2499
|
+
style,
|
|
2500
|
+
className,
|
|
2501
|
+
code
|
|
2502
|
+
} = _b, others = __objRest$1(_b, [
|
|
2503
|
+
"title",
|
|
2504
|
+
"description",
|
|
2505
|
+
"image",
|
|
2506
|
+
"style",
|
|
2507
|
+
"className",
|
|
2508
|
+
"code"
|
|
2509
|
+
]);
|
|
2510
|
+
const { classes, cx, theme } = useStyles$6();
|
|
2511
|
+
const handleCopy = async () => {
|
|
2512
|
+
if (!code)
|
|
2513
|
+
return;
|
|
2514
|
+
try {
|
|
2515
|
+
await navigator.clipboard.writeText(code);
|
|
2516
|
+
notifications.showNotification({
|
|
2517
|
+
title: "Copied!",
|
|
2518
|
+
message: "Community code copied to clipboard.",
|
|
2519
|
+
autoClose: 3e3
|
|
2520
|
+
});
|
|
2521
|
+
} catch (err) {
|
|
2522
|
+
console.error("Failed to copy code", err);
|
|
2523
|
+
}
|
|
2524
|
+
};
|
|
2525
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
2526
|
+
core.Card,
|
|
2527
|
+
__spreadValues$7({
|
|
2528
|
+
radius: "md",
|
|
2529
|
+
style: __spreadValues$7({ backgroundImage: `url(${image})` }, style),
|
|
2530
|
+
className: cx(classes.card, className)
|
|
2531
|
+
}, others),
|
|
2532
|
+
/* @__PURE__ */ React__namespace.createElement(
|
|
2533
|
+
core.Overlay,
|
|
2534
|
+
{
|
|
2535
|
+
gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[6]} 100%)`,
|
|
2536
|
+
opacity: 0.55,
|
|
2537
|
+
zIndex: 0
|
|
2538
|
+
}
|
|
2539
|
+
),
|
|
2540
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React__namespace.createElement(core.Group, { mt: "sm", spacing: "xs" }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", className: classes.code }, "Community Code: ", code || "\u2014"), code && /* @__PURE__ */ React__namespace.createElement(
|
|
2541
|
+
core.Button,
|
|
2542
|
+
{
|
|
2543
|
+
size: "xs",
|
|
2544
|
+
variant: "white",
|
|
2545
|
+
onClick: handleCopy,
|
|
2546
|
+
styles: {
|
|
2547
|
+
root: {
|
|
2548
|
+
backgroundColor: "rgba(255,255,255,0.9)"
|
|
2549
|
+
}
|
|
2550
|
+
}
|
|
2551
|
+
},
|
|
2552
|
+
"Copy"
|
|
2553
|
+
)))
|
|
2554
|
+
);
|
|
2555
|
+
};
|
|
2556
|
+
|
|
2557
|
+
const useStyles$5 = core.createStyles((theme) => ({
|
|
2558
|
+
action: {
|
|
2559
|
+
backgroundColor: "inherit",
|
|
2560
|
+
":hover": {
|
|
2561
|
+
textDecoration: "underline"
|
|
2562
|
+
}
|
|
2563
|
+
},
|
|
2564
|
+
title: {
|
|
2565
|
+
color: theme.colorScheme === "dark" ? theme.white : theme.black,
|
|
2566
|
+
fontFamily: `Greycliff CF, ${theme.fontFamily}`,
|
|
2567
|
+
fontSize: theme.fontSizes.xl,
|
|
2568
|
+
lineHeight: 1.5,
|
|
2569
|
+
fontWeight: 900,
|
|
2570
|
+
[theme.fn.smallerThan("xs")]: {
|
|
2918
2571
|
fontSize: theme.fontSizes.md
|
|
2919
2572
|
}
|
|
2920
2573
|
}
|
|
2921
2574
|
}));
|
|
2922
2575
|
const TrialHome = (props) => {
|
|
2923
|
-
const { classes } = useStyles$
|
|
2576
|
+
const { classes } = useStyles$5();
|
|
2924
2577
|
return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React__namespace.createElement(
|
|
2925
2578
|
core.Button,
|
|
2926
2579
|
{
|
|
@@ -2949,38 +2602,38 @@ const TrialHome = (props) => {
|
|
|
2949
2602
|
)), /* @__PURE__ */ React__namespace.createElement(core.Title, { maw: 500, mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected, check out these lessons to get started with your students!"), /* @__PURE__ */ React__namespace.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
|
|
2950
2603
|
};
|
|
2951
2604
|
|
|
2952
|
-
var __defProp$
|
|
2953
|
-
var __defProps$
|
|
2954
|
-
var __getOwnPropDescs$
|
|
2955
|
-
var __getOwnPropSymbols$
|
|
2956
|
-
var __hasOwnProp$
|
|
2957
|
-
var __propIsEnum$
|
|
2958
|
-
var __defNormalProp$
|
|
2959
|
-
var __spreadValues$
|
|
2605
|
+
var __defProp$6 = Object.defineProperty;
|
|
2606
|
+
var __defProps$5 = Object.defineProperties;
|
|
2607
|
+
var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
|
|
2608
|
+
var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
|
|
2609
|
+
var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
|
|
2610
|
+
var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
|
|
2611
|
+
var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2612
|
+
var __spreadValues$6 = (a, b) => {
|
|
2960
2613
|
for (var prop in b || (b = {}))
|
|
2961
|
-
if (__hasOwnProp$
|
|
2962
|
-
__defNormalProp$
|
|
2963
|
-
if (__getOwnPropSymbols$
|
|
2964
|
-
for (var prop of __getOwnPropSymbols$
|
|
2965
|
-
if (__propIsEnum$
|
|
2966
|
-
__defNormalProp$
|
|
2614
|
+
if (__hasOwnProp$6.call(b, prop))
|
|
2615
|
+
__defNormalProp$6(a, prop, b[prop]);
|
|
2616
|
+
if (__getOwnPropSymbols$6)
|
|
2617
|
+
for (var prop of __getOwnPropSymbols$6(b)) {
|
|
2618
|
+
if (__propIsEnum$6.call(b, prop))
|
|
2619
|
+
__defNormalProp$6(a, prop, b[prop]);
|
|
2967
2620
|
}
|
|
2968
2621
|
return a;
|
|
2969
2622
|
};
|
|
2970
|
-
var __spreadProps$
|
|
2623
|
+
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
|
|
2971
2624
|
var __objRest = (source, exclude) => {
|
|
2972
2625
|
var target = {};
|
|
2973
2626
|
for (var prop in source)
|
|
2974
|
-
if (__hasOwnProp$
|
|
2627
|
+
if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2975
2628
|
target[prop] = source[prop];
|
|
2976
|
-
if (source != null && __getOwnPropSymbols$
|
|
2977
|
-
for (var prop of __getOwnPropSymbols$
|
|
2978
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum$
|
|
2629
|
+
if (source != null && __getOwnPropSymbols$6)
|
|
2630
|
+
for (var prop of __getOwnPropSymbols$6(source)) {
|
|
2631
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
|
|
2979
2632
|
target[prop] = source[prop];
|
|
2980
2633
|
}
|
|
2981
2634
|
return target;
|
|
2982
2635
|
};
|
|
2983
|
-
const useStyles$
|
|
2636
|
+
const useStyles$4 = core.createStyles((theme, { checked }) => ({
|
|
2984
2637
|
button: {
|
|
2985
2638
|
display: "flex",
|
|
2986
2639
|
alignItems: "center",
|
|
@@ -3022,10 +2675,10 @@ function ImageCheckbox(_a) {
|
|
|
3022
2675
|
finalValue: false,
|
|
3023
2676
|
onChange
|
|
3024
2677
|
});
|
|
3025
|
-
const { classes, cx } = useStyles$
|
|
2678
|
+
const { classes, cx } = useStyles$4({ checked: value });
|
|
3026
2679
|
return /* @__PURE__ */ React__namespace.createElement(
|
|
3027
2680
|
core.UnstyledButton,
|
|
3028
|
-
__spreadProps$
|
|
2681
|
+
__spreadProps$5(__spreadValues$6({}, others), {
|
|
3029
2682
|
onClick: () => handleChange(!value),
|
|
3030
2683
|
className: cx(classes.button, className)
|
|
3031
2684
|
}),
|
|
@@ -3046,7 +2699,7 @@ function ImageCheckbox(_a) {
|
|
|
3046
2699
|
function SelectGrid(props) {
|
|
3047
2700
|
const items = props.items.map((item) => /* @__PURE__ */ React__namespace.createElement(
|
|
3048
2701
|
ImageCheckbox,
|
|
3049
|
-
__spreadProps$
|
|
2702
|
+
__spreadProps$5(__spreadValues$6({}, item), {
|
|
3050
2703
|
key: item.title,
|
|
3051
2704
|
onChange: (checked) => props.onChange(item.title, checked)
|
|
3052
2705
|
})
|
|
@@ -3064,26 +2717,26 @@ function SelectGrid(props) {
|
|
|
3064
2717
|
);
|
|
3065
2718
|
}
|
|
3066
2719
|
|
|
3067
|
-
var __defProp$
|
|
3068
|
-
var __defProps$
|
|
3069
|
-
var __getOwnPropDescs$
|
|
3070
|
-
var __getOwnPropSymbols$
|
|
3071
|
-
var __hasOwnProp$
|
|
3072
|
-
var __propIsEnum$
|
|
3073
|
-
var __defNormalProp$
|
|
3074
|
-
var __spreadValues$
|
|
2720
|
+
var __defProp$5 = Object.defineProperty;
|
|
2721
|
+
var __defProps$4 = Object.defineProperties;
|
|
2722
|
+
var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
|
|
2723
|
+
var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
|
|
2724
|
+
var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
|
|
2725
|
+
var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
|
|
2726
|
+
var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2727
|
+
var __spreadValues$5 = (a, b) => {
|
|
3075
2728
|
for (var prop in b || (b = {}))
|
|
3076
|
-
if (__hasOwnProp$
|
|
3077
|
-
__defNormalProp$
|
|
3078
|
-
if (__getOwnPropSymbols$
|
|
3079
|
-
for (var prop of __getOwnPropSymbols$
|
|
3080
|
-
if (__propIsEnum$
|
|
3081
|
-
__defNormalProp$
|
|
2729
|
+
if (__hasOwnProp$5.call(b, prop))
|
|
2730
|
+
__defNormalProp$5(a, prop, b[prop]);
|
|
2731
|
+
if (__getOwnPropSymbols$5)
|
|
2732
|
+
for (var prop of __getOwnPropSymbols$5(b)) {
|
|
2733
|
+
if (__propIsEnum$5.call(b, prop))
|
|
2734
|
+
__defNormalProp$5(a, prop, b[prop]);
|
|
3082
2735
|
}
|
|
3083
2736
|
return a;
|
|
3084
2737
|
};
|
|
3085
|
-
var __spreadProps$
|
|
3086
|
-
const useStyles$
|
|
2738
|
+
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
2739
|
+
const useStyles$3 = core.createStyles((theme) => ({
|
|
3087
2740
|
wrapper: {
|
|
3088
2741
|
minHeight: "100%",
|
|
3089
2742
|
boxSizing: "border-box",
|
|
@@ -3146,7 +2799,7 @@ const OPTIONS = [
|
|
|
3146
2799
|
{ description: "project-based learning", title: "Project-Based Learning", icon: icons.IconTools }
|
|
3147
2800
|
];
|
|
3148
2801
|
const TrialRegistration = (props) => {
|
|
3149
|
-
const { classes } = useStyles$
|
|
2802
|
+
const { classes } = useStyles$3();
|
|
3150
2803
|
const [firstName, setFirstName] = React__namespace.useState("");
|
|
3151
2804
|
const [lastName, setLastName] = React__namespace.useState("");
|
|
3152
2805
|
const [organization, setOrganization] = React__namespace.useState({ organizationId: "", displayName: "" });
|
|
@@ -3192,7 +2845,7 @@ const TrialRegistration = (props) => {
|
|
|
3192
2845
|
label: "School/Organization Name",
|
|
3193
2846
|
placeholder: "What's the name of your school?",
|
|
3194
2847
|
data: props.organizations.map((o) => {
|
|
3195
|
-
return __spreadProps$
|
|
2848
|
+
return __spreadProps$4(__spreadValues$5({}, o), { value: o.displayName });
|
|
3196
2849
|
}),
|
|
3197
2850
|
onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
|
|
3198
2851
|
onChange: (next) => {
|
|
@@ -3204,7 +2857,7 @@ const TrialRegistration = (props) => {
|
|
|
3204
2857
|
SelectGrid,
|
|
3205
2858
|
{
|
|
3206
2859
|
items: OPTIONS,
|
|
3207
|
-
onChange: (e, checked) => setInterests(__spreadProps$
|
|
2860
|
+
onChange: (e, checked) => setInterests(__spreadProps$4(__spreadValues$5({}, interests), { [e]: checked }))
|
|
3208
2861
|
}
|
|
3209
2862
|
), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
|
|
3210
2863
|
core.Button,
|
|
@@ -3242,26 +2895,26 @@ const AdminProvider = (props) => {
|
|
|
3242
2895
|
);
|
|
3243
2896
|
};
|
|
3244
2897
|
|
|
3245
|
-
var __defProp$
|
|
3246
|
-
var __defProps$
|
|
3247
|
-
var __getOwnPropDescs$
|
|
3248
|
-
var __getOwnPropSymbols$
|
|
3249
|
-
var __hasOwnProp$
|
|
3250
|
-
var __propIsEnum$
|
|
3251
|
-
var __defNormalProp$
|
|
3252
|
-
var __spreadValues$
|
|
2898
|
+
var __defProp$4 = Object.defineProperty;
|
|
2899
|
+
var __defProps$3 = Object.defineProperties;
|
|
2900
|
+
var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
|
|
2901
|
+
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
2902
|
+
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
2903
|
+
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
2904
|
+
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2905
|
+
var __spreadValues$4 = (a, b) => {
|
|
3253
2906
|
for (var prop in b || (b = {}))
|
|
3254
|
-
if (__hasOwnProp$
|
|
3255
|
-
__defNormalProp$
|
|
3256
|
-
if (__getOwnPropSymbols$
|
|
3257
|
-
for (var prop of __getOwnPropSymbols$
|
|
3258
|
-
if (__propIsEnum$
|
|
3259
|
-
__defNormalProp$
|
|
2907
|
+
if (__hasOwnProp$4.call(b, prop))
|
|
2908
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
2909
|
+
if (__getOwnPropSymbols$4)
|
|
2910
|
+
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
2911
|
+
if (__propIsEnum$4.call(b, prop))
|
|
2912
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
3260
2913
|
}
|
|
3261
2914
|
return a;
|
|
3262
2915
|
};
|
|
3263
|
-
var __spreadProps$
|
|
3264
|
-
const useStyles$
|
|
2916
|
+
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
2917
|
+
const useStyles$2 = core.createStyles((theme, props) => ({
|
|
3265
2918
|
footer: {
|
|
3266
2919
|
paddingTop: theme.spacing.md,
|
|
3267
2920
|
paddingBottom: theme.spacing.md,
|
|
@@ -3348,7 +3001,7 @@ const useStyles$5 = core.createStyles((theme, props) => ({
|
|
|
3348
3001
|
}
|
|
3349
3002
|
}));
|
|
3350
3003
|
const App = (props) => {
|
|
3351
|
-
const { classes } = useStyles$
|
|
3004
|
+
const { classes } = useStyles$2(props);
|
|
3352
3005
|
const account = useAccount(props.account, props.accounts, props.onAccountChange);
|
|
3353
3006
|
return /* @__PURE__ */ React__namespace.createElement(
|
|
3354
3007
|
core.AppShell,
|
|
@@ -3356,7 +3009,7 @@ const App = (props) => {
|
|
|
3356
3009
|
padding: "xs",
|
|
3357
3010
|
navbar: props.navbar && /* @__PURE__ */ React__namespace.createElement(
|
|
3358
3011
|
Navbar,
|
|
3359
|
-
__spreadProps$
|
|
3012
|
+
__spreadProps$3(__spreadValues$4({}, props.navbar.props), {
|
|
3360
3013
|
onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
|
|
3361
3014
|
})
|
|
3362
3015
|
),
|
|
@@ -3444,61 +3097,29 @@ const useAccount = (account, accounts, onAccountChange) => {
|
|
|
3444
3097
|
};
|
|
3445
3098
|
|
|
3446
3099
|
function Table$3(props) {
|
|
3100
|
+
if (props.loading) {
|
|
3101
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
|
|
3102
|
+
}
|
|
3447
3103
|
if (props.items.length === 0) {
|
|
3448
|
-
return /* @__PURE__ */ React__namespace.createElement(
|
|
3449
|
-
PlaceholderBanner,
|
|
3450
|
-
{
|
|
3451
|
-
title: "No pathway items to display",
|
|
3452
|
-
description: "We don't have any pathway items to show you just yet.",
|
|
3453
|
-
loading: props.loading,
|
|
3454
|
-
icon: "badges"
|
|
3455
|
-
}
|
|
3456
|
-
);
|
|
3104
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "No pathways to display.");
|
|
3457
3105
|
}
|
|
3458
|
-
|
|
3459
|
-
|
|
3106
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
|
|
3107
|
+
reactRouterDom.Link,
|
|
3460
3108
|
{
|
|
3461
|
-
|
|
3109
|
+
key: row.badgeId,
|
|
3462
3110
|
to: row.href,
|
|
3463
|
-
|
|
3464
|
-
display: "block",
|
|
3465
|
-
width: "100%",
|
|
3466
|
-
padding: theme.spacing.md,
|
|
3467
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
|
3468
|
-
"&:hover": {
|
|
3469
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
|
|
3470
|
-
}
|
|
3471
|
-
})
|
|
3111
|
+
className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
|
|
3472
3112
|
},
|
|
3473
|
-
/* @__PURE__ */ React__namespace.createElement(
|
|
3474
|
-
|
|
3475
|
-
|
|
3113
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)),
|
|
3114
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
|
|
3115
|
+
)));
|
|
3476
3116
|
}
|
|
3477
3117
|
|
|
3478
|
-
const useStyles$4 = core.createStyles((theme) => ({
|
|
3479
|
-
title: {
|
|
3480
|
-
fontSize: 34,
|
|
3481
|
-
fontWeight: 900,
|
|
3482
|
-
[theme.fn.smallerThan("sm")]: {
|
|
3483
|
-
fontSize: 24
|
|
3484
|
-
}
|
|
3485
|
-
},
|
|
3486
|
-
description: {
|
|
3487
|
-
maxWidth: 600
|
|
3488
|
-
}
|
|
3489
|
-
}));
|
|
3490
3118
|
const Pathways = (props) => {
|
|
3491
|
-
|
|
3492
|
-
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" }, "Pathways"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Pathways"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore all your unique pathway requirements in one clear space"))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(
|
|
3493
|
-
Table$3,
|
|
3494
|
-
{
|
|
3495
|
-
loading: props.loading,
|
|
3496
|
-
items: props.pathways
|
|
3497
|
-
}
|
|
3498
|
-
))));
|
|
3119
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Pathways"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Explore all your unique pathway requirements in one clear space")), /* @__PURE__ */ React__namespace.createElement(Table$3, { loading: props.loading, items: props.pathways }));
|
|
3499
3120
|
};
|
|
3500
3121
|
|
|
3501
|
-
const useStyles$
|
|
3122
|
+
const useStyles$1 = core.createStyles((theme) => ({
|
|
3502
3123
|
button: {
|
|
3503
3124
|
borderTopRightRadius: 0,
|
|
3504
3125
|
borderBottomRightRadius: 0,
|
|
@@ -3513,7 +3134,7 @@ const useStyles$3 = core.createStyles((theme) => ({
|
|
|
3513
3134
|
}
|
|
3514
3135
|
}));
|
|
3515
3136
|
const SplitButton$1 = (props) => {
|
|
3516
|
-
const { classes, theme } = useStyles$
|
|
3137
|
+
const { classes, theme } = useStyles$1();
|
|
3517
3138
|
theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
|
|
3518
3139
|
return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
|
|
3519
3140
|
core.Button,
|
|
@@ -3549,25 +3170,25 @@ function Stack$1(props) {
|
|
|
3549
3170
|
return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
|
|
3550
3171
|
}
|
|
3551
3172
|
|
|
3552
|
-
var __defProp$
|
|
3553
|
-
var __getOwnPropSymbols$
|
|
3554
|
-
var __hasOwnProp$
|
|
3555
|
-
var __propIsEnum$
|
|
3556
|
-
var __defNormalProp$
|
|
3557
|
-
var __spreadValues$
|
|
3173
|
+
var __defProp$3 = Object.defineProperty;
|
|
3174
|
+
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
3175
|
+
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
3176
|
+
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
3177
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3178
|
+
var __spreadValues$3 = (a, b) => {
|
|
3558
3179
|
for (var prop in b || (b = {}))
|
|
3559
|
-
if (__hasOwnProp$
|
|
3560
|
-
__defNormalProp$
|
|
3561
|
-
if (__getOwnPropSymbols$
|
|
3562
|
-
for (var prop of __getOwnPropSymbols$
|
|
3563
|
-
if (__propIsEnum$
|
|
3564
|
-
__defNormalProp$
|
|
3565
|
-
}
|
|
3180
|
+
if (__hasOwnProp$3.call(b, prop))
|
|
3181
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
3182
|
+
if (__getOwnPropSymbols$3)
|
|
3183
|
+
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
3184
|
+
if (__propIsEnum$3.call(b, prop))
|
|
3185
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
3186
|
+
}
|
|
3566
3187
|
return a;
|
|
3567
3188
|
};
|
|
3568
3189
|
function Table$2(props) {
|
|
3569
3190
|
const preparedItems = React__namespace.useMemo(() => {
|
|
3570
|
-
return (props.items || []).map((item) => __spreadValues$
|
|
3191
|
+
return (props.items || []).map((item) => __spreadValues$3(__spreadValues$3({}, item), item.categoryPoints));
|
|
3571
3192
|
}, [props.items]);
|
|
3572
3193
|
const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
|
|
3573
3194
|
if (props.loading && props.items.length === 0) {
|
|
@@ -3699,7 +3320,7 @@ function Table$1(props) {
|
|
|
3699
3320
|
));
|
|
3700
3321
|
}
|
|
3701
3322
|
|
|
3702
|
-
const useStyles
|
|
3323
|
+
const useStyles = core.createStyles((theme) => ({
|
|
3703
3324
|
title: {
|
|
3704
3325
|
fontSize: 34,
|
|
3705
3326
|
fontWeight: 900,
|
|
@@ -3712,7 +3333,7 @@ const useStyles$2 = core.createStyles((theme) => ({
|
|
|
3712
3333
|
}
|
|
3713
3334
|
}));
|
|
3714
3335
|
const Pathway = (props) => {
|
|
3715
|
-
const { classes } = useStyles
|
|
3336
|
+
const { classes } = useStyles();
|
|
3716
3337
|
const [tab, setTab] = React.useState("badges");
|
|
3717
3338
|
const numberOfStudents = props.students.length;
|
|
3718
3339
|
numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
|
|
@@ -3779,82 +3400,84 @@ const Pathway = (props) => {
|
|
|
3779
3400
|
)))))));
|
|
3780
3401
|
};
|
|
3781
3402
|
|
|
3782
|
-
const useStyles$1 = core.createStyles((theme) => ({
|
|
3783
|
-
button: {
|
|
3784
|
-
borderTopRightRadius: 0,
|
|
3785
|
-
borderBottomRightRadius: 0,
|
|
3786
|
-
marginLeft: 0,
|
|
3787
|
-
marginRight: 0
|
|
3788
|
-
},
|
|
3789
|
-
menuControl: {
|
|
3790
|
-
borderTopLeftRadius: 0,
|
|
3791
|
-
borderBottomLeftRadius: 0,
|
|
3792
|
-
border: 0,
|
|
3793
|
-
borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
|
|
3794
|
-
}
|
|
3795
|
-
}));
|
|
3796
3403
|
const SplitButton = (props) => {
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
|
|
3800
|
-
core.Button,
|
|
3404
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
3405
|
+
"button",
|
|
3801
3406
|
{
|
|
3802
|
-
|
|
3803
|
-
|
|
3407
|
+
onClick: props.onExportDataClick,
|
|
3408
|
+
className: "flex items-center gap-2 rounded-xl bg-gradient-to-r from-gold-400 to-[#f5c300] px-4 py-2.5 text-xs font-extrabold text-dark-blue-400"
|
|
3804
3409
|
},
|
|
3410
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14, stroke: 2 }),
|
|
3805
3411
|
"Export data (.csv)"
|
|
3806
|
-
)
|
|
3412
|
+
);
|
|
3807
3413
|
};
|
|
3808
3414
|
|
|
3809
3415
|
function Stack(props) {
|
|
3810
|
-
const { items, hideBadge, hideLesson } = props;
|
|
3416
|
+
const { items, hideBadge, hideLesson, hidePathway } = props;
|
|
3811
3417
|
if (!items.length)
|
|
3812
3418
|
return null;
|
|
3813
|
-
const
|
|
3814
|
-
|
|
3815
|
-
!
|
|
3816
|
-
!hideLesson,
|
|
3817
|
-
|
|
3818
|
-
|
|
3819
|
-
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
|
|
3824
|
-
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3419
|
+
const columns = [
|
|
3420
|
+
"minmax(0,2fr)",
|
|
3421
|
+
!hidePathway && "minmax(0,1.3fr)",
|
|
3422
|
+
!hideLesson && "minmax(0,1.3fr)",
|
|
3423
|
+
!hideBadge && "minmax(0,1.3fr)",
|
|
3424
|
+
"auto"
|
|
3425
|
+
].filter(Boolean).join(" ");
|
|
3426
|
+
const headerCell = "border-b border-slate-100 pb-2 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400";
|
|
3427
|
+
const dataCell = "py-3";
|
|
3428
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "grid items-center gap-x-3", style: { gridTemplateColumns: columns } }, /* @__PURE__ */ React__namespace.createElement("div", { className: headerCell }, "Question"), !hidePathway && /* @__PURE__ */ React__namespace.createElement("div", { className: headerCell }, "Pathway"), !hideLesson && /* @__PURE__ */ React__namespace.createElement("div", { className: headerCell }, "Lesson"), !hideBadge && /* @__PURE__ */ React__namespace.createElement("div", { className: headerCell }, "Badge"), /* @__PURE__ */ React__namespace.createElement("div", { className: headerCell }), items.map((row, i) => {
|
|
3429
|
+
const rowBorder = i > 0 ? "border-t border-slate-100" : "";
|
|
3430
|
+
return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, { key: i }, /* @__PURE__ */ React__namespace.createElement("div", { className: `${dataCell} ${rowBorder} text-xs font-semibold text-dark-blue-400` }, row.question), !hidePathway && /* @__PURE__ */ React__namespace.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.pathwayName || "\u2014"), !hideLesson && /* @__PURE__ */ React__namespace.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.lessonName), !hideBadge && /* @__PURE__ */ React__namespace.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.badgeName), /* @__PURE__ */ React__namespace.createElement("div", { className: `${dataCell} ${rowBorder} flex shrink-0 gap-2` }, /* @__PURE__ */ React__namespace.createElement(
|
|
3431
|
+
"a",
|
|
3432
|
+
{
|
|
3433
|
+
href: row.link,
|
|
3434
|
+
target: "_blank",
|
|
3435
|
+
rel: "noopener noreferrer",
|
|
3436
|
+
className: "flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-bold text-slate-600 no-underline hover:bg-slate-50"
|
|
3437
|
+
},
|
|
3438
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconExternalLink, { size: 12, stroke: 2 }),
|
|
3439
|
+
"Preview"
|
|
3440
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
3441
|
+
"a",
|
|
3442
|
+
{
|
|
3443
|
+
href: row.link,
|
|
3444
|
+
download: true,
|
|
3445
|
+
target: "_blank",
|
|
3446
|
+
rel: "noopener noreferrer",
|
|
3447
|
+
className: "flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-bold text-slate-600 no-underline hover:bg-slate-50"
|
|
3448
|
+
},
|
|
3449
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconDownload, { size: 12, stroke: 2 }),
|
|
3450
|
+
"Download"
|
|
3451
|
+
)));
|
|
3452
|
+
}));
|
|
3832
3453
|
}
|
|
3833
3454
|
|
|
3834
|
-
var __defProp$
|
|
3835
|
-
var __defProps$
|
|
3836
|
-
var __getOwnPropDescs$
|
|
3837
|
-
var __getOwnPropSymbols$
|
|
3838
|
-
var __hasOwnProp$
|
|
3839
|
-
var __propIsEnum$
|
|
3840
|
-
var __defNormalProp$
|
|
3841
|
-
var __spreadValues$
|
|
3455
|
+
var __defProp$2 = Object.defineProperty;
|
|
3456
|
+
var __defProps$2 = Object.defineProperties;
|
|
3457
|
+
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
3458
|
+
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
3459
|
+
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
3460
|
+
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
3461
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3462
|
+
var __spreadValues$2 = (a, b) => {
|
|
3842
3463
|
for (var prop in b || (b = {}))
|
|
3843
|
-
if (__hasOwnProp$
|
|
3844
|
-
__defNormalProp$
|
|
3845
|
-
if (__getOwnPropSymbols$
|
|
3846
|
-
for (var prop of __getOwnPropSymbols$
|
|
3847
|
-
if (__propIsEnum$
|
|
3848
|
-
__defNormalProp$
|
|
3464
|
+
if (__hasOwnProp$2.call(b, prop))
|
|
3465
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
3466
|
+
if (__getOwnPropSymbols$2)
|
|
3467
|
+
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
3468
|
+
if (__propIsEnum$2.call(b, prop))
|
|
3469
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
3849
3470
|
}
|
|
3850
3471
|
return a;
|
|
3851
3472
|
};
|
|
3852
|
-
var __spreadProps$
|
|
3473
|
+
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
3474
|
+
const initials$1 = (name) => name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
|
|
3853
3475
|
function Table(props) {
|
|
3476
|
+
const [expanded, setExpanded] = React__namespace.useState({});
|
|
3854
3477
|
const preparedItems = React__namespace.useMemo(() => {
|
|
3855
3478
|
return props.items.map((item) => {
|
|
3856
3479
|
var _a;
|
|
3857
|
-
return __spreadProps$
|
|
3480
|
+
return __spreadProps$2(__spreadValues$2({}, item), {
|
|
3858
3481
|
submissionCount: ((_a = item.submissions) == null ? void 0 : _a.length) || 0
|
|
3859
3482
|
});
|
|
3860
3483
|
});
|
|
@@ -3871,76 +3494,82 @@ function Table(props) {
|
|
|
3871
3494
|
}
|
|
3872
3495
|
);
|
|
3873
3496
|
}
|
|
3874
|
-
const
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3497
|
+
const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
|
|
3498
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("name"), className: "flex-1 text-left hover:text-slate-600" }, "Student Name", indicator("name")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("submissionCount"), className: "w-16 shrink-0 text-left hover:text-slate-600" }, "Files", indicator("submissionCount")), props.onReview && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-36 shrink-0" }), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
|
|
3499
|
+
const isOpen = !!expanded[row.userId];
|
|
3500
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(
|
|
3501
|
+
"div",
|
|
3502
|
+
{
|
|
3503
|
+
onClick: () => setExpanded(__spreadProps$2(__spreadValues$2({}, expanded), { [row.userId]: !isOpen })),
|
|
3504
|
+
className: "flex cursor-pointer items-center gap-4 p-4"
|
|
3505
|
+
},
|
|
3506
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-3" }, row.avatar ? /* @__PURE__ */ React__namespace.createElement("img", { src: row.avatar, className: "h-9 w-9 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React__namespace.createElement("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-xs font-bold text-white" }, initials$1(row.name)), /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-sm font-bold text-dark-blue-400" }, row.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs text-slate-400" }, row.email))),
|
|
3507
|
+
/* @__PURE__ */ React__namespace.createElement("div", { className: "w-16 shrink-0 text-sm font-bold text-dark-blue-400" }, row.submissions.length),
|
|
3508
|
+
props.onReview && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-36 shrink-0" }, /* @__PURE__ */ React__namespace.createElement(
|
|
3509
|
+
"button",
|
|
3510
|
+
{
|
|
3511
|
+
onClick: (e) => {
|
|
3512
|
+
e.stopPropagation();
|
|
3513
|
+
props.onReview(row);
|
|
3514
|
+
},
|
|
3515
|
+
className: "rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-3 py-1.5 text-[11px] font-extrabold text-dark-blue-400"
|
|
3516
|
+
},
|
|
3517
|
+
"Review Submission"
|
|
3518
|
+
)),
|
|
3519
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: `w-4 shrink-0 text-slate-300 transition-transform ${isOpen ? "rotate-90" : ""}` })
|
|
3520
|
+
), isOpen && /* @__PURE__ */ React__namespace.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React__namespace.createElement(Stack, { items: row.submissions, hideBadge: props.hideBadge, hideLesson: props.hideLesson, hidePathway: props.hidePathway })));
|
|
3521
|
+
}));
|
|
3522
|
+
}
|
|
3523
|
+
|
|
3524
|
+
const initials = (name) => name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
|
|
3525
|
+
function SubmissionDetail(props) {
|
|
3526
|
+
const { student } = props;
|
|
3527
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-4 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2 text-xs text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("button", { onClick: props.onBack, className: "font-bold text-sky-blue-400 hover:underline" }, "File Locker"), /* @__PURE__ */ React__namespace.createElement("span", null, "/"), /* @__PURE__ */ React__namespace.createElement("span", { className: "font-bold text-dark-blue-400" }, student.name)), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, student.avatar ? /* @__PURE__ */ React__namespace.createElement("img", { src: student.avatar, className: "h-12 w-12 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React__namespace.createElement("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-sm font-bold text-white" }, initials(student.name)), /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-lg font-extrabold text-dark-blue-400" }, student.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-0.5 text-xs text-slate-400" }, student.email, props.context ? ` \xB7 ${props.context}` : "")), /* @__PURE__ */ React__namespace.createElement("div", { className: "shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500" }, student.submissions.length, " file", student.submissions.length === 1 ? "" : "s")), /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, "Files"), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React__namespace.createElement(Stack, { items: student.submissions }))), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React__namespace.createElement(
|
|
3528
|
+
"button",
|
|
3880
3529
|
{
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
|
|
3895
|
-
sortable: true,
|
|
3896
|
-
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)))
|
|
3897
|
-
}, {
|
|
3898
|
-
accessor: "submissionCount",
|
|
3899
|
-
title: "Files",
|
|
3900
|
-
sortable: true,
|
|
3901
|
-
render: (row) => row.submissions.length
|
|
3902
|
-
}],
|
|
3903
|
-
rowExpansion: {
|
|
3904
|
-
content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(
|
|
3905
|
-
Stack,
|
|
3906
|
-
{
|
|
3907
|
-
items: record.submissions,
|
|
3908
|
-
hideBadge: props.hideBadge,
|
|
3909
|
-
hideLesson: props.hideLesson
|
|
3910
|
-
}
|
|
3911
|
-
)
|
|
3912
|
-
}
|
|
3913
|
-
}
|
|
3914
|
-
));
|
|
3530
|
+
onClick: () => props.onNav(-1),
|
|
3531
|
+
className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-50"
|
|
3532
|
+
},
|
|
3533
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconChevronLeft, { size: 14, stroke: 2 }),
|
|
3534
|
+
"Previous Submission"
|
|
3535
|
+
), /* @__PURE__ */ React__namespace.createElement(
|
|
3536
|
+
"button",
|
|
3537
|
+
{
|
|
3538
|
+
onClick: () => props.onNav(1),
|
|
3539
|
+
className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-50"
|
|
3540
|
+
},
|
|
3541
|
+
"Next Submission",
|
|
3542
|
+
/* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 14, stroke: 2 })
|
|
3543
|
+
)));
|
|
3915
3544
|
}
|
|
3916
3545
|
|
|
3917
|
-
var __defProp = Object.defineProperty;
|
|
3918
|
-
var __defProps = Object.defineProperties;
|
|
3919
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
3920
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3921
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
3922
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
3923
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3924
|
-
var __spreadValues = (a, b) => {
|
|
3546
|
+
var __defProp$1 = Object.defineProperty;
|
|
3547
|
+
var __defProps$1 = Object.defineProperties;
|
|
3548
|
+
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
|
|
3549
|
+
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
|
|
3550
|
+
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
|
|
3551
|
+
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
|
|
3552
|
+
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3553
|
+
var __spreadValues$1 = (a, b) => {
|
|
3925
3554
|
for (var prop in b || (b = {}))
|
|
3926
|
-
if (__hasOwnProp.call(b, prop))
|
|
3927
|
-
__defNormalProp(a, prop, b[prop]);
|
|
3928
|
-
if (__getOwnPropSymbols)
|
|
3929
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
3930
|
-
if (__propIsEnum.call(b, prop))
|
|
3931
|
-
__defNormalProp(a, prop, b[prop]);
|
|
3555
|
+
if (__hasOwnProp$1.call(b, prop))
|
|
3556
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
3557
|
+
if (__getOwnPropSymbols$1)
|
|
3558
|
+
for (var prop of __getOwnPropSymbols$1(b)) {
|
|
3559
|
+
if (__propIsEnum$1.call(b, prop))
|
|
3560
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
3932
3561
|
}
|
|
3933
3562
|
return a;
|
|
3934
3563
|
};
|
|
3935
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
3564
|
+
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
3936
3565
|
const useFilteredStudents = (students) => {
|
|
3937
3566
|
return React__namespace.useMemo(() => {
|
|
3938
|
-
const byBadge = (badgeId) => students.map((s) => __spreadProps(__spreadValues({}, s), {
|
|
3567
|
+
const byBadge = (badgeId) => students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
|
|
3939
3568
|
submissions: (s.submissions || []).filter(
|
|
3940
3569
|
(sub) => sub.badgeId === badgeId
|
|
3941
3570
|
)
|
|
3942
3571
|
})).filter((s) => s.submissions.length);
|
|
3943
|
-
const byLesson = (lessonName) => students.map((s) => __spreadProps(__spreadValues({}, s), {
|
|
3572
|
+
const byLesson = (lessonName) => students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
|
|
3944
3573
|
submissions: (s.submissions || []).filter(
|
|
3945
3574
|
(sub) => sub.lessonName === lessonName
|
|
3946
3575
|
)
|
|
@@ -3951,7 +3580,7 @@ const useFilteredStudents = (students) => {
|
|
|
3951
3580
|
(c) => c.startsWith(pathwayId)
|
|
3952
3581
|
)
|
|
3953
3582
|
).map((b) => b.badgeId);
|
|
3954
|
-
return students.map((s) => __spreadProps(__spreadValues({}, s), {
|
|
3583
|
+
return students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
|
|
3955
3584
|
submissions: (s.submissions || []).filter(
|
|
3956
3585
|
(sub) => validBadgeIds.includes(sub.badgeId)
|
|
3957
3586
|
)
|
|
@@ -3961,176 +3590,175 @@ const useFilteredStudents = (students) => {
|
|
|
3961
3590
|
}, [students]);
|
|
3962
3591
|
};
|
|
3963
3592
|
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
|
|
3593
|
+
var __defProp = Object.defineProperty;
|
|
3594
|
+
var __defProps = Object.defineProperties;
|
|
3595
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
3596
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3597
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
3598
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
3599
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3600
|
+
var __spreadValues = (a, b) => {
|
|
3601
|
+
for (var prop in b || (b = {}))
|
|
3602
|
+
if (__hasOwnProp.call(b, prop))
|
|
3603
|
+
__defNormalProp(a, prop, b[prop]);
|
|
3604
|
+
if (__getOwnPropSymbols)
|
|
3605
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
3606
|
+
if (__propIsEnum.call(b, prop))
|
|
3607
|
+
__defNormalProp(a, prop, b[prop]);
|
|
3970
3608
|
}
|
|
3971
|
-
|
|
3972
|
-
|
|
3973
|
-
|
|
3974
|
-
|
|
3975
|
-
}
|
|
3976
|
-
|
|
3977
|
-
|
|
3978
|
-
|
|
3979
|
-
|
|
3980
|
-
|
|
3981
|
-
|
|
3982
|
-
return
|
|
3983
|
-
|
|
3984
|
-
|
|
3985
|
-
|
|
3986
|
-
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
)));
|
|
3609
|
+
return a;
|
|
3610
|
+
};
|
|
3611
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
3612
|
+
const TABS = [
|
|
3613
|
+
{ value: "students", label: "By student" },
|
|
3614
|
+
{ value: "pathways", label: "By pathway" },
|
|
3615
|
+
{ value: "badges", label: "By badge" },
|
|
3616
|
+
{ value: "lessons", label: "By lesson" }
|
|
3617
|
+
];
|
|
3618
|
+
const countFiles = (students) => students.reduce((acc, s) => {
|
|
3619
|
+
var _a;
|
|
3620
|
+
return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
|
|
3621
|
+
}, 0);
|
|
3622
|
+
const GroupCard = (props) => {
|
|
3623
|
+
const [open, setOpen] = React__namespace.useState(false);
|
|
3624
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { onClick: () => setOpen(!open), className: "flex cursor-pointer items-center gap-3.5 p-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, props.title), props.description && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, props.description)), /* @__PURE__ */ React__namespace.createElement("div", { className: "shrink-0 rounded-full bg-mint-100 px-2.5 py-1 text-xs font-bold text-dark-blue-400" }, props.count), /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${open ? "rotate-180" : ""}` })), open && /* @__PURE__ */ React__namespace.createElement("div", { className: "border-t border-slate-100 p-4" }, props.children));
|
|
3625
|
+
};
|
|
3626
|
+
const PathwayGroups = (props) => {
|
|
3627
|
+
const { byPathway } = useFilteredStudents(props.students);
|
|
3628
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.pathways.map((p) => {
|
|
3629
|
+
const filtered = byPathway(p.pathwayId, props.badges);
|
|
3630
|
+
return /* @__PURE__ */ React__namespace.createElement(GroupCard, { key: p.pathwayId, title: p.title, description: p.description, count: countFiles(filtered) }, /* @__PURE__ */ React__namespace.createElement(Table, { loading: props.loading, items: filtered, hidePathway: true, onReview: (item) => props.onReview(item, filtered, p.title) }));
|
|
3993
3631
|
}));
|
|
3994
3632
|
};
|
|
3995
|
-
const
|
|
3996
|
-
const {
|
|
3997
|
-
|
|
3998
|
-
|
|
3999
|
-
|
|
4000
|
-
|
|
4001
|
-
return /* @__PURE__ */ React__namespace.createElement(core.Accordion, null, lessons.map((l) => {
|
|
4002
|
-
const studentsForLesson = byLesson(l.lessonName);
|
|
4003
|
-
const fileCount = countFiles(studentsForLesson);
|
|
4004
|
-
return /* @__PURE__ */ React__namespace.createElement(core.Accordion.Item, { key: l.lessonId, value: l.lessonId }, /* @__PURE__ */ React__namespace.createElement(core.Accordion.Control, null, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", w: "100%" }, /* @__PURE__ */ React__namespace.createElement(core.Text, null, l.lessonName), /* @__PURE__ */ React__namespace.createElement(core.Badge, { size: "sm" }, fileCount))), /* @__PURE__ */ React__namespace.createElement(core.Accordion.Panel, null, /* @__PURE__ */ React__namespace.createElement(
|
|
4005
|
-
Table,
|
|
4006
|
-
{
|
|
4007
|
-
loading,
|
|
4008
|
-
items: studentsForLesson,
|
|
4009
|
-
hideLesson: true
|
|
4010
|
-
}
|
|
4011
|
-
)));
|
|
3633
|
+
const BadgeGroups = (props) => {
|
|
3634
|
+
const { byBadge } = useFilteredStudents(props.students);
|
|
3635
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.badges.map((b) => {
|
|
3636
|
+
const filtered = byBadge(b.badgeId);
|
|
3637
|
+
const pathwayTitle = props.pathwayNameForBadge[b.badgeId];
|
|
3638
|
+
return /* @__PURE__ */ React__namespace.createElement(GroupCard, { key: b.badgeId, title: b.displayName, description: pathwayTitle ? `${pathwayTitle} pathway` : void 0, count: countFiles(filtered) }, /* @__PURE__ */ React__namespace.createElement(Table, { loading: props.loading, items: filtered, hideBadge: true, hidePathway: true, onReview: (item) => props.onReview(item, filtered, b.displayName) }));
|
|
4012
3639
|
}));
|
|
4013
3640
|
};
|
|
4014
|
-
const
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
|
|
4019
|
-
|
|
4020
|
-
|
|
4021
|
-
|
|
4022
|
-
var _a;
|
|
4023
|
-
return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
|
|
4024
|
-
}, 0);
|
|
4025
|
-
return /* @__PURE__ */ React__namespace.createElement(core.Accordion, null, pathways.map((p) => {
|
|
4026
|
-
const studentsForPathway = byPathway(p.pathwayId, badges);
|
|
4027
|
-
const fileCount = countFiles(studentsForPathway);
|
|
4028
|
-
return /* @__PURE__ */ React__namespace.createElement(core.Accordion.Item, { key: p.pathwayId, value: p.pathwayId }, /* @__PURE__ */ React__namespace.createElement(core.Accordion.Control, null, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", w: "100%" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("strong", null, p.title), /* @__PURE__ */ React__namespace.createElement("div", null, p.description)), /* @__PURE__ */ React__namespace.createElement(core.Badge, { size: "sm" }, fileCount))), /* @__PURE__ */ React__namespace.createElement(core.Accordion.Panel, null, /* @__PURE__ */ React__namespace.createElement(
|
|
4029
|
-
Table,
|
|
4030
|
-
{
|
|
4031
|
-
loading,
|
|
4032
|
-
items: studentsForPathway
|
|
4033
|
-
}
|
|
4034
|
-
)));
|
|
3641
|
+
const LessonGroups = (props) => {
|
|
3642
|
+
const { byLesson } = useFilteredStudents(props.students);
|
|
3643
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.lessons.map((l) => {
|
|
3644
|
+
const filtered = byLesson(l.lessonName);
|
|
3645
|
+
const badge = props.badgeForLesson[l.lessonId];
|
|
3646
|
+
const pathwayTitle = badge ? props.pathwayNameForBadge[badge.badgeId] : void 0;
|
|
3647
|
+
const description = badge ? pathwayTitle ? `${badge.displayName} \xB7 ${pathwayTitle} pathway` : badge.displayName : void 0;
|
|
3648
|
+
return /* @__PURE__ */ React__namespace.createElement(GroupCard, { key: l.lessonId, title: l.lessonName, description, count: countFiles(filtered) }, /* @__PURE__ */ React__namespace.createElement(Table, { loading: props.loading, items: filtered, hideBadge: true, hideLesson: true, hidePathway: true, onReview: (item) => props.onReview(item, filtered, l.lessonName) }));
|
|
4035
3649
|
}));
|
|
4036
3650
|
};
|
|
4037
3651
|
const FileLocker = (props) => {
|
|
4038
|
-
const
|
|
4039
|
-
const [
|
|
4040
|
-
props.students
|
|
4041
|
-
const
|
|
4042
|
-
|
|
4043
|
-
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
|
|
4055
|
-
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4060
|
-
|
|
4061
|
-
|
|
4062
|
-
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4069
|
-
|
|
4070
|
-
|
|
3652
|
+
const [tab, setTab] = React__namespace.useState("students");
|
|
3653
|
+
const [reviewing, setReviewing] = React__namespace.useState(null);
|
|
3654
|
+
const numberOfFiles = countFiles(props.students);
|
|
3655
|
+
const { thisWeek, thisMonth } = React__namespace.useMemo(() => {
|
|
3656
|
+
const now = new Date();
|
|
3657
|
+
const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1e3);
|
|
3658
|
+
const fom = new Date(now.getFullYear(), now.getMonth(), 1);
|
|
3659
|
+
let week = 0, month = 0;
|
|
3660
|
+
props.students.forEach((s) => {
|
|
3661
|
+
(s.submissions || []).forEach((sub) => {
|
|
3662
|
+
if (!sub.updatedAt)
|
|
3663
|
+
return;
|
|
3664
|
+
const d = new Date(sub.updatedAt);
|
|
3665
|
+
if (d >= weekAgo)
|
|
3666
|
+
week += 1;
|
|
3667
|
+
if (d >= fom)
|
|
3668
|
+
month += 1;
|
|
3669
|
+
});
|
|
3670
|
+
});
|
|
3671
|
+
return { thisWeek: week, thisMonth: month };
|
|
3672
|
+
}, [props.students]);
|
|
3673
|
+
const pathwayNameForBadge = React__namespace.useMemo(() => {
|
|
3674
|
+
const map = {};
|
|
3675
|
+
(props.badges || []).forEach((b) => {
|
|
3676
|
+
if (!Array.isArray(b.categories))
|
|
3677
|
+
return;
|
|
3678
|
+
const pathway = (props.pathways || []).find((p) => b.categories.some((c) => c.startsWith(p.pathwayId)));
|
|
3679
|
+
if (pathway)
|
|
3680
|
+
map[b.badgeId] = pathway.title;
|
|
3681
|
+
});
|
|
3682
|
+
return map;
|
|
3683
|
+
}, [props.badges, props.pathways]);
|
|
3684
|
+
const badgeForLesson = React__namespace.useMemo(() => {
|
|
3685
|
+
const map = {};
|
|
3686
|
+
(props.badges || []).forEach((b) => {
|
|
3687
|
+
if (!Array.isArray(b.lessonIds))
|
|
3688
|
+
return;
|
|
3689
|
+
b.lessonIds.forEach((lessonId) => {
|
|
3690
|
+
if (!(lessonId in map))
|
|
3691
|
+
map[lessonId] = { displayName: b.displayName, badgeId: b.badgeId };
|
|
3692
|
+
});
|
|
3693
|
+
});
|
|
3694
|
+
return map;
|
|
3695
|
+
}, [props.badges]);
|
|
3696
|
+
const enrichedStudents = React__namespace.useMemo(() => {
|
|
3697
|
+
return props.students.map((s) => __spreadProps(__spreadValues({}, s), {
|
|
3698
|
+
submissions: (s.submissions || []).map((sub) => __spreadProps(__spreadValues({}, sub), { pathwayName: pathwayNameForBadge[sub.badgeId] || "" }))
|
|
3699
|
+
}));
|
|
3700
|
+
}, [props.students, pathwayNameForBadge]);
|
|
3701
|
+
const { byPathway } = useFilteredStudents(enrichedStudents);
|
|
3702
|
+
const mostActivePathway = React__namespace.useMemo(() => {
|
|
3703
|
+
return (props.pathways || []).reduce((best, p) => {
|
|
3704
|
+
const count = countFiles(byPathway(p.pathwayId, props.badges || []));
|
|
3705
|
+
return count > 0 && (!best || count > best.count) ? { title: p.title, count } : best;
|
|
3706
|
+
}, null);
|
|
3707
|
+
}, [props.pathways, props.badges, byPathway]);
|
|
3708
|
+
const onReview = (item, list, context) => setReviewing({ student: item, list, context });
|
|
3709
|
+
const onNav = (dir) => {
|
|
3710
|
+
if (!reviewing)
|
|
3711
|
+
return;
|
|
3712
|
+
const idx = reviewing.list.findIndex((s) => s.userId === reviewing.student.userId);
|
|
3713
|
+
if (idx === -1)
|
|
3714
|
+
return;
|
|
3715
|
+
const next = reviewing.list[(idx + dir + reviewing.list.length) % reviewing.list.length];
|
|
3716
|
+
setReviewing(__spreadProps(__spreadValues({}, reviewing), { student: next }));
|
|
3717
|
+
};
|
|
3718
|
+
if (reviewing) {
|
|
3719
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
3720
|
+
SubmissionDetail,
|
|
3721
|
+
{
|
|
3722
|
+
student: reviewing.student,
|
|
3723
|
+
context: reviewing.context,
|
|
3724
|
+
onBack: () => setReviewing(null),
|
|
3725
|
+
onNav
|
|
3726
|
+
}
|
|
3727
|
+
);
|
|
3728
|
+
}
|
|
3729
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("button", { onClick: props.onBackClick, className: "flex items-center gap-1 text-xs font-bold text-sky-blue-400 hover:underline" }, /* @__PURE__ */ React__namespace.createElement(icons.IconChevronLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "mt-1.5 text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "File Locker"), /* @__PURE__ */ React__namespace.createElement("p", { className: "mt-1 text-sm text-slate-500" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React__namespace.createElement(SplitButton, { href: props.href, onCopyLinkClick: props.onCopyLinkClick, onExportDataClick: props.onExportDataClick })), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: props.trial ? [
|
|
3730
|
+
{ title: "LESSONS SUBMITTED", value: props.lessonsCompleted || 0 }
|
|
3731
|
+
] : [
|
|
3732
|
+
{ title: "FILES", value: numberOfFiles },
|
|
3733
|
+
{ title: "THIS WEEK", value: thisWeek },
|
|
3734
|
+
{ title: "THIS MONTH", value: thisMonth }
|
|
3735
|
+
] }), !props.trial && mostActivePathway && /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-slate-500" }, "Most active pathway: ", /* @__PURE__ */ React__namespace.createElement("span", { className: "font-bold text-dark-blue-400" }, mostActivePathway.title), " (", mostActivePathway.count, " submission", mostActivePathway.count === 1 ? "" : "s", ")"), !props.trial && /* @__PURE__ */ React__namespace.createElement(
|
|
3736
|
+
"select",
|
|
4071
3737
|
{
|
|
4072
|
-
clearable: true,
|
|
4073
|
-
clearButtonLabel: "Clear class selection",
|
|
4074
|
-
size: "sm",
|
|
4075
|
-
placeholder: "Select a class",
|
|
4076
|
-
nothingFound: "No options",
|
|
4077
3738
|
value: props.classId,
|
|
4078
|
-
onChange: props.onClassChange,
|
|
4079
|
-
|
|
4080
|
-
|
|
4081
|
-
|
|
4082
|
-
|
|
4083
|
-
|
|
4084
|
-
|
|
4085
|
-
Tabs,
|
|
4086
|
-
{
|
|
4087
|
-
value: tab,
|
|
4088
|
-
data: [
|
|
4089
|
-
{ label: "By student", value: "students" },
|
|
4090
|
-
{ label: "By pathway", value: "pathways" },
|
|
4091
|
-
{ label: "By badge", value: "badges" },
|
|
4092
|
-
{ label: "By lesson", value: "lessons" }
|
|
4093
|
-
],
|
|
4094
|
-
onChange: setTab
|
|
4095
|
-
}
|
|
4096
|
-
), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(
|
|
4097
|
-
Table,
|
|
4098
|
-
{
|
|
4099
|
-
loading: props.loading,
|
|
4100
|
-
items: props.students
|
|
4101
|
-
}
|
|
4102
|
-
), tab === "pathways" && /* @__PURE__ */ React__namespace.createElement(
|
|
4103
|
-
PathwayTable,
|
|
4104
|
-
{
|
|
4105
|
-
pathways: props.pathways || [],
|
|
4106
|
-
badges: props.badges || [],
|
|
4107
|
-
students: props.students,
|
|
4108
|
-
loading: props.loading
|
|
4109
|
-
}
|
|
4110
|
-
), tab === "badges" && /* @__PURE__ */ React__namespace.createElement(
|
|
4111
|
-
BadgeTable,
|
|
4112
|
-
{
|
|
4113
|
-
badges: props.badges || [],
|
|
4114
|
-
students: props.students,
|
|
4115
|
-
loading: props.loading
|
|
4116
|
-
}
|
|
4117
|
-
), tab === "lessons" && /* @__PURE__ */ React__namespace.createElement(
|
|
4118
|
-
LessonTableWrapper,
|
|
3739
|
+
onChange: (e) => props.onClassChange(e.target.value),
|
|
3740
|
+
className: "w-64 rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-dark-blue-400 focus:border-sky-blue-400 focus:outline-none"
|
|
3741
|
+
},
|
|
3742
|
+
/* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "Select a class"),
|
|
3743
|
+
props.classes.map((g) => /* @__PURE__ */ React__namespace.createElement("option", { key: g.classId, value: g.classId }, g.name))
|
|
3744
|
+
), !props.trial && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS.map((t) => /* @__PURE__ */ React__namespace.createElement(
|
|
3745
|
+
"button",
|
|
4119
3746
|
{
|
|
4120
|
-
|
|
4121
|
-
|
|
4122
|
-
|
|
4123
|
-
}
|
|
4124
|
-
|
|
3747
|
+
key: t.value,
|
|
3748
|
+
onClick: () => setTab(t.value),
|
|
3749
|
+
className: `rounded-lg px-4 py-2 text-xs font-bold ${tab === t.value ? "bg-sky-blue-400/20 text-dark-blue-400" : "text-slate-400 hover:text-slate-600"}`
|
|
3750
|
+
},
|
|
3751
|
+
t.label
|
|
3752
|
+
))), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(Table, { loading: props.loading, items: enrichedStudents, onReview: (item) => onReview(item, enrichedStudents) }), !props.trial && tab === "pathways" && /* @__PURE__ */ React__namespace.createElement(PathwayGroups, { students: enrichedStudents, loading: props.loading, pathways: props.pathways || [], badges: props.badges || [], onReview }), !props.trial && tab === "badges" && /* @__PURE__ */ React__namespace.createElement(BadgeGroups, { students: enrichedStudents, loading: props.loading, badges: props.badges || [], pathwayNameForBadge, onReview }), !props.trial && tab === "lessons" && /* @__PURE__ */ React__namespace.createElement(LessonGroups, { students: enrichedStudents, loading: props.loading, lessons: props.lessons, badgeForLesson, pathwayNameForBadge, onReview }));
|
|
4125
3753
|
};
|
|
4126
3754
|
|
|
4127
3755
|
Object.defineProperty(exports, 'showNotification', {
|
|
4128
|
-
|
|
4129
|
-
|
|
3756
|
+
enumerable: true,
|
|
3757
|
+
get: function () { return notifications.showNotification; }
|
|
4130
3758
|
});
|
|
4131
3759
|
Object.defineProperty(exports, 'updateNotification', {
|
|
4132
|
-
|
|
4133
|
-
|
|
3760
|
+
enumerable: true,
|
|
3761
|
+
get: function () { return notifications.updateNotification; }
|
|
4134
3762
|
});
|
|
4135
3763
|
exports.AdminProvider = AdminProvider;
|
|
4136
3764
|
exports.App = App;
|
|
@@ -4147,7 +3775,6 @@ exports.Lessons = Lessons;
|
|
|
4147
3775
|
exports.Navbar = Navbar;
|
|
4148
3776
|
exports.Organization = Organization;
|
|
4149
3777
|
exports.Pathway = Pathway;
|
|
4150
|
-
exports.PathwayTable = PathwayTable;
|
|
4151
3778
|
exports.Pathways = Pathways;
|
|
4152
3779
|
exports.People = People;
|
|
4153
3780
|
exports.StartAnonymousLesson = StartAnonymousLesson;
|