@local-civics/mgmt-ui 0.1.215 → 0.1.216

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +26 -2
  2. package/dist/index.js +456 -812
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +458 -814
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -5,12 +5,11 @@ var icons = require('@tabler/icons');
5
5
  var core = require('@mantine/core');
6
6
  var reactRouterDom = require('react-router-dom');
7
7
  var notifications = require('@mantine/notifications');
8
- var mantineDatatable = require('mantine-datatable');
9
8
  var dropzone = require('@mantine/dropzone');
10
9
  var form = require('@mantine/form');
11
10
  var papa = require('papaparse');
12
11
  var modals = require('@mantine/modals');
13
- var AvatarInit = require('avatar-initials');
12
+ var mantineDatatable = require('mantine-datatable');
14
13
  var reactCharts = require('react-charts');
15
14
  var hooks = require('@mantine/hooks');
16
15
 
@@ -61,7 +60,7 @@ function styleInject(css, ref) {
61
60
  }
62
61
  }
63
62
 
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}.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-xl{max-width:36rem}.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-100{--tw-bg-opacity:1;background-color:rgb(255 248 214/var(--tw-bg-opacity))}.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-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-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}";
63
+ 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{left:.75rem}.top-1\\/2{top:50%}.left-3\\.5{left:.875rem}.bottom-\\[-20px\\]{bottom:-20px}.left-1\\/2{left:50%}.m-3{margin:.75rem}.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-2{margin-left:-.5rem}.mt-4{margin-top:1rem}.mb-8{margin-bottom:2rem}.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-9{height:2.25rem}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-\\[300px\\]{height:300px}.h-screen{height:100vh}.h-11{height:2.75rem}.h-16{height:4rem}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-fit{width:-moz-fit-content;width:fit-content}.w-36{width:9rem}.w-28{width:7rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-40{width:10rem}.w-8{width:2rem}.w-7{width:1.75rem}.w-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-\\[440px\\]{width:440px}.w-20{width:5rem}.w-24{width:6rem}.w-\\[250px\\]{width:250px}.w-screen{width:100vw}.w-11{width:2.75rem}.w-\\[230px\\]{width:230px}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.max-w-\\[460px\\]{max-width:460px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{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))}.-translate-x-1\\/2{--tw-translate-x:-50%}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-90{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-90{--tw-rotate:90deg}.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}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 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-4{gap:1rem}.gap-1{gap:.25rem}.gap-3{gap:.75rem}.gap-2{gap:.5rem}.gap-1\\.5{gap:.375rem}.gap-2\\.5{gap:.625rem}.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\\.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)))}.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)))}.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-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded{border-radius:.25rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-2{border-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-b{border-bottom-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-white{--tw-border-opacity:1;border-color:rgb(255 255 255/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-sky-blue-400\\/40{border-color:rgba(59,208,242,.4)}.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-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-gold-100{--tw-bg-opacity:1;background-color:rgb(255 248 214/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.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-1{padding:.25rem}.p-4{padding:1rem}.p-8{padding:2rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-3{padding:.75rem}.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-2{padding-bottom:.5rem;padding-top:.5rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.py-4{padding-bottom:1rem;padding-top:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.pl-9{padding-left:2.25rem}.pr-4{padding-right:1rem}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pt-0\\.5{padding-top:.125rem}.pt-0{padding-top:0}.pb-12{padding-bottom:3rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.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-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-lg{font-size:1.125rem;line-height:1.75rem}.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-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.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))}.first\\:ml-0:first-child{margin-left:0}.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-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/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
64
  styleInject(css_248z);
66
65
 
67
66
  function UserButton({ image, name, email }) {
@@ -146,8 +145,8 @@ function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened,
146
145
  }
147
146
 
148
147
  var __defProp$f = Object.defineProperty;
149
- var __defProps$b = Object.defineProperties;
150
- var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
148
+ var __defProps$c = Object.defineProperties;
149
+ var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
151
150
  var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
152
151
  var __hasOwnProp$f = Object.prototype.hasOwnProperty;
153
152
  var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
@@ -163,7 +162,7 @@ var __spreadValues$f = (a, b) => {
163
162
  }
164
163
  return a;
165
164
  };
166
- var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
165
+ var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
167
166
  const data = [
168
167
  { label: "Home", icon: icons.IconHome2, accent: "cyan" },
169
168
  { label: "Dashboard", icon: icons.IconGauge, accent: "mint" },
@@ -190,7 +189,7 @@ function Navbar(props) {
190
189
  }
191
190
  return /* @__PURE__ */ React__namespace.createElement(
192
191
  LinksGroup,
193
- __spreadProps$b(__spreadValues$f(__spreadValues$f({
192
+ __spreadProps$c(__spreadValues$f(__spreadValues$f({
194
193
  key: item.label,
195
194
  active: props.active
196
195
  }, item), context), {
@@ -215,7 +214,7 @@ const UtilLink = (props) => {
215
214
  );
216
215
  };
217
216
 
218
- const useStyles$k = core.createStyles((theme) => ({
217
+ const useStyles$a = core.createStyles((theme) => ({
219
218
  inner: {
220
219
  paddingTop: theme.spacing.xl,
221
220
  paddingBottom: theme.spacing.xl * 4
@@ -251,7 +250,7 @@ const useStyles$k = core.createStyles((theme) => ({
251
250
  }
252
251
  }));
253
252
  const GettingStarted = (props) => {
254
- const { classes } = useStyles$k();
253
+ const { classes } = useStyles$a();
255
254
  return /* @__PURE__ */ React__namespace.createElement(
256
255
  core.Modal,
257
256
  {
@@ -265,7 +264,7 @@ const GettingStarted = (props) => {
265
264
  );
266
265
  };
267
266
 
268
- const useStyles$j = core.createStyles((theme) => ({
267
+ const useStyles$9 = core.createStyles((theme) => ({
269
268
  title: {
270
269
  fontSize: 34,
271
270
  fontWeight: 900,
@@ -306,7 +305,7 @@ const useStyles$j = core.createStyles((theme) => ({
306
305
  }
307
306
  }));
308
307
  const SwitchAccount = (props) => {
309
- const { classes, theme } = useStyles$j();
308
+ const { classes, theme } = useStyles$9();
310
309
  const options = props.accounts.map((a) => {
311
310
  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")));
312
311
  });
@@ -337,56 +336,55 @@ const StatsGroup = ({ data, footer }) => {
337
336
  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);
338
337
  };
339
338
 
340
- const Tabs = (props) => {
341
- var _a;
342
- const tabs = (_a = props.data) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React__namespace.createElement(core.Tabs.Tab, { key: item.value, value: item.value }, item.label || item.value));
343
- return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
339
+ const SIZE = {
340
+ sm: { box: "h-11 w-11", rounded: "rounded-xl", icon: 20 },
341
+ lg: { box: "h-16 w-16", rounded: "rounded-2xl", icon: 28 }
344
342
  };
345
-
346
- const useStyles$i = core.createStyles((theme) => ({
347
- button: {
348
- borderTopRightRadius: 0,
349
- borderBottomRightRadius: 0,
350
- marginLeft: 0,
351
- marginRight: 0
352
- },
353
- menuControl: {
354
- borderTopLeftRadius: 0,
355
- borderBottomLeftRadius: 0,
356
- border: 0,
357
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
343
+ const ACCENT = {
344
+ cyan: { bg: "bg-sky-blue-400/15", text: "text-sky-blue-400" },
345
+ mint: { bg: "bg-mint-400/15", text: "text-mint-400" },
346
+ gold: { bg: "bg-gold-400/15", text: "text-gold-400" }
347
+ };
348
+ function Emblem(props) {
349
+ const s = SIZE[props.size || "sm"];
350
+ const a = ACCENT[props.accent];
351
+ const Icon = props.icon;
352
+ if (props.imageURL) {
353
+ return /* @__PURE__ */ React__namespace.createElement("img", { src: props.imageURL, alt: props.alt || "", className: `${s.box} shrink-0 ${s.rounded} object-cover` });
358
354
  }
359
- }));
355
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: `flex ${s.box} shrink-0 items-center justify-center ${s.rounded} ${a.bg}` }, /* @__PURE__ */ React__namespace.createElement(Icon, { size: s.icon, stroke: 1.75, className: a.text }));
356
+ }
357
+
360
358
  const SplitButton$4 = (props) => {
361
- const { classes, theme } = useStyles$i();
362
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
363
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
364
- core.Button,
359
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
360
+ reactRouterDom.Link,
365
361
  {
366
- component: reactRouterDom.Link,
367
362
  to: props.href,
368
- className: classes.button,
369
- variant: "gradient"
363
+ 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 no-underline hover:bg-slate-50"
370
364
  },
371
365
  "Preview"
372
366
  ), /* @__PURE__ */ React__namespace.createElement(
373
- core.Button,
367
+ "button",
374
368
  {
375
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
376
- onClick: props.onCopyLinkClick
369
+ type: "button",
370
+ onClick: props.onCopyLinkClick,
371
+ 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"
377
372
  },
373
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
378
374
  "Copy link"
379
375
  ), /* @__PURE__ */ React__namespace.createElement(
380
- core.Button,
376
+ "button",
381
377
  {
382
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14 }),
383
- onClick: props.onExportDataClick
378
+ type: "button",
379
+ onClick: props.onExportDataClick,
380
+ 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)]"
384
381
  },
382
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 13, stroke: 2 }),
385
383
  "Export data (.csv)"
386
384
  ));
387
385
  };
388
386
 
389
- const useStyles$h = core.createStyles((theme) => ({
387
+ const useStyles$8 = core.createStyles((theme) => ({
390
388
  wrapper: {
391
389
  display: "flex",
392
390
  alignItems: "center",
@@ -437,7 +435,7 @@ const useStyles$h = core.createStyles((theme) => ({
437
435
  }
438
436
  }));
439
437
  const PlaceholderBanner = (props) => {
440
- const { classes } = useStyles$h();
438
+ const { classes } = useStyles$8();
441
439
  const title = props.title || "Nothing to display";
442
440
  const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
443
441
  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 }));
@@ -447,8 +445,7 @@ function Stack$4(props) {
447
445
  if (props.items.length === 0) {
448
446
  return null;
449
447
  }
450
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href, color: "dark.4", weight: "bold", size: "md" }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
451
- return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
448
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-2" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("div", { key: row.lessonName, className: "flex items-center justify-between gap-4 py-1.5" }, /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: row.href, className: "text-sm font-bold text-dark-blue-400 no-underline hover:underline" }, row.lessonName), row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-mint-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
452
449
  }
453
450
 
454
451
  function useSortableData(items, config = { key: "", direction: null }) {
@@ -490,8 +487,8 @@ function useSortableData(items, config = { key: "", direction: null }) {
490
487
  }
491
488
 
492
489
  var __defProp$e = Object.defineProperty;
493
- var __defProps$a = Object.defineProperties;
494
- var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
490
+ var __defProps$b = Object.defineProperties;
491
+ var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
495
492
  var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
496
493
  var __hasOwnProp$e = Object.prototype.hasOwnProperty;
497
494
  var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
@@ -507,10 +504,11 @@ var __spreadValues$e = (a, b) => {
507
504
  }
508
505
  return a;
509
506
  };
510
- var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
507
+ var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
511
508
  function Table$k(props) {
509
+ const [expanded, setExpanded] = React__namespace.useState({});
512
510
  const preparedItems = React__namespace.useMemo(() => {
513
- return props.items.map((item) => __spreadProps$a(__spreadValues$e({}, item), {
511
+ return props.items.map((item) => __spreadProps$b(__spreadValues$e({}, item), {
514
512
  status: item.isComplete ? 1 : 0
515
513
  }));
516
514
  }, [props.items]);
@@ -526,40 +524,22 @@ function Table$k(props) {
526
524
  }
527
525
  );
528
526
  }
529
- const sortStatus = {
530
- columnAccessor: sortConfig.key,
531
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
532
- };
533
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
534
- mantineDatatable.DataTable,
535
- {
536
- verticalSpacing: "sm",
537
- sx: { minWidth: 700 },
538
- withBorder: false,
539
- borderRadius: "sm",
540
- withColumnBorders: true,
541
- striped: true,
542
- highlightOnHover: true,
543
- records: sortedItems,
544
- sortStatus,
545
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
546
- idAccessor: "userId",
547
- columns: [{
548
- accessor: "name",
549
- title: "Student Name",
550
- sortable: true,
551
- 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)))
552
- }, {
553
- accessor: "status",
554
- title: "Status",
555
- sortable: true,
556
- render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Incomplete"))
557
- }],
558
- rowExpansion: {
559
- content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$4, { items: record.lessons })
560
- }
561
- }
562
- ));
527
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
528
+ 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("status"), className: "w-28 shrink-0 text-center hover:text-slate-600" }, "Status", indicator("status")), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
529
+ var _a;
530
+ const isOpen = !!expanded[row.userId];
531
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
532
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(
533
+ "div",
534
+ {
535
+ onClick: () => setExpanded(__spreadProps$b(__spreadValues$e({}, expanded), { [row.userId]: !isOpen })),
536
+ className: "flex cursor-pointer items-center gap-4 p-4"
537
+ },
538
+ /* @__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-mint-400/20 text-xs font-bold text-dark-blue-400" }, initials), /* @__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))),
539
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-28 shrink-0 text-center" }, row.isComplete ? /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-mint-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Complete") : /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, "Incomplete")),
540
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
541
+ ), isOpen && /* @__PURE__ */ React__namespace.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React__namespace.createElement(Stack$4, { items: row.lessons })));
542
+ }));
563
543
  }
564
544
 
565
545
  function Table$j(props) {
@@ -569,121 +549,63 @@ function Table$j(props) {
569
549
  PlaceholderBanner,
570
550
  {
571
551
  title: "No lessons to display",
572
- description: "There are not lessons in badge.",
552
+ description: "There are no lessons in this badge.",
573
553
  loading: props.loading,
574
554
  icon: "badges"
575
555
  }
576
556
  );
577
557
  }
578
- const sortStatus = {
579
- columnAccessor: sortConfig.key,
580
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
581
- };
582
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
583
- mantineDatatable.DataTable,
558
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
559
+ 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("button", { onClick: () => requestSort("lessonName"), className: "flex-1 text-left hover:text-slate-600" }, "Lesson Name", indicator("lessonName")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("percentageCompletion"), className: "w-36 shrink-0 text-right hover:text-slate-600" }, "Lesson Completion", indicator("percentageCompletion"))), sortedItems.map((row) => /* @__PURE__ */ React__namespace.createElement(
560
+ reactRouterDom.Link,
584
561
  {
585
- verticalSpacing: "sm",
586
- sx: { minWidth: 700 },
587
- highlightOnHover: true,
588
- striped: true,
589
- records: sortedItems,
590
- sortStatus,
591
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
592
- columns: [
593
- {
594
- accessor: "lessonName",
595
- title: "Lesson Name",
596
- sortable: true,
597
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href }, row.lessonName)
598
- },
599
- {
600
- accessor: "percentageCompletion",
601
- title: "Lesson Completion",
602
- sortable: true,
603
- render: (row) => `${Math.round((row.percentageCompletion + Number.EPSILON) * 100)}%`
604
- }
605
- ]
606
- }
607
- ));
562
+ key: row.lessonId,
563
+ to: row.href,
564
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
565
+ },
566
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1 text-sm font-bold text-dark-blue-400" }, row.lessonName),
567
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-36 shrink-0 text-right text-xs text-slate-500" }, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")
568
+ )));
608
569
  }
609
570
 
610
- const useStyles$g = core.createStyles((theme) => ({
611
- title: {
612
- fontSize: 34,
613
- fontWeight: 900,
614
- [theme.fn.smallerThan("sm")]: {
615
- fontSize: 24
616
- }
617
- },
618
- description: {
619
- maxWidth: 600
620
- }
621
- }));
571
+ const TABS$3 = [
572
+ { label: "By lesson", value: "lessons" },
573
+ { label: "By student", value: "students" }
574
+ ];
622
575
  const Badge = (props) => {
623
- const { classes } = useStyles$g();
624
576
  const [tab, setTab] = React.useState("lessons");
625
577
  const numberOfStudents = props.students.length;
626
578
  const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
627
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
628
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, 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(
629
- core.Badge,
630
- {
631
- variant: "filled",
632
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
633
- size: "lg"
634
- },
635
- "Back"
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(
579
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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: "flex items-start gap-4" }, /* @__PURE__ */ React__namespace.createElement(Emblem, { imageURL: props.imageURL, alt: props.displayName, size: "lg", icon: icons.IconAlbum, accent: "mint" }), /* @__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 || "Badge"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description"))), !props.trial && /* @__PURE__ */ React__namespace.createElement(
637
580
  SplitButton$4,
638
581
  {
639
582
  href: props.href,
640
583
  onCopyLinkClick: props.onCopyLinkClick,
641
584
  onExportDataClick: props.onExportDataClick
642
585
  }
643
- ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
586
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
644
587
  {
645
588
  title: props.trial ? "LESSONS SUBMITTED" : "BADGE COMPLETION",
646
- value: props.trial ? props.lessonsCompleted || 0 : numberOfBadges,
647
- unit: props.trial ? "" : ""
589
+ value: props.trial ? props.lessonsCompleted || 0 : numberOfBadges
648
590
  }
649
- ] }), !props.trial && /* @__PURE__ */ React__namespace.createElement(
650
- core.Select,
591
+ ] }), !props.trial && /* @__PURE__ */ React__namespace.createElement("div", { className: "relative w-full max-w-xs" }, /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
592
+ "select",
651
593
  {
652
- clearable: true,
653
- clearButtonLabel: "Clear class selection",
654
- size: "sm",
655
- placeholder: "Select a class",
656
- nothingFound: "No options",
657
594
  value: props.classId,
658
- onChange: props.onClassChange,
659
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, null),
660
- data: props.classes.map((g) => {
661
- return { value: g.classId, label: g.name };
662
- })
663
- }
664
- ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, !props.trial && /* @__PURE__ */ React__namespace.createElement(
665
- Tabs,
666
- {
667
- value: tab,
668
- data: [
669
- { label: "By lesson", value: "lessons" },
670
- { label: "By student", value: "students" }
671
- ],
672
- onChange: setTab
673
- }
674
- ), (!!props.trial || tab === "lessons") && /* @__PURE__ */ React__namespace.createElement(
675
- Table$j,
676
- {
677
- loading: props.loading,
678
- items: props.lessons
679
- }
680
- ), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(
681
- Table$k,
595
+ onChange: (e) => props.onClassChange(e.target.value),
596
+ className: "w-full appearance-none rounded-lg border border-slate-200 bg-white py-2 pl-9 pr-4 text-sm text-dark-blue-400 focus:border-sky-blue-400 focus:outline-none"
597
+ },
598
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
599
+ props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, c.name))
600
+ )), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, !props.trial && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$3.map((t) => /* @__PURE__ */ React__namespace.createElement(
601
+ "button",
682
602
  {
683
- loading: props.loading,
684
- items: props.students
685
- }
686
- )))))));
603
+ key: t.value,
604
+ onClick: () => setTab(t.value),
605
+ 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"}`
606
+ },
607
+ t.label
608
+ ))), (!!props.trial || tab === "lessons") && /* @__PURE__ */ React__namespace.createElement(Table$j, { loading: props.loading, items: props.lessons }), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(Table$k, { loading: props.loading, items: props.students })));
687
609
  };
688
610
 
689
611
  function Table$i(props) {
@@ -693,20 +615,40 @@ function Table$i(props) {
693
615
  if (props.items.length === 0) {
694
616
  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.");
695
617
  }
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(
618
+ 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" }, "Badge"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-28 shrink-0" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
697
619
  reactRouterDom.Link,
698
620
  {
699
621
  key: row.badgeId,
700
622
  to: row.href,
701
- className: `block px-5 py-4 no-underline hover:bg-slate-50 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
623
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
624
+ },
625
+ /* @__PURE__ */ React__namespace.createElement(Emblem, { imageURL: row.imageURL, alt: row.name, size: "sm", icon: icons.IconAlbum, accent: "mint" }),
626
+ /* @__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)),
627
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
628
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-28 shrink-0 text-xs text-slate-500" }, row.numberOfLessons ? `${row.numberOfLessons} lesson${row.numberOfLessons === 1 ? "" : "s"}` : "\u2014"),
629
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
630
+ )));
631
+ }
632
+
633
+ function PathwayFilterPills(props) {
634
+ if (props.pathways.length === 0) {
635
+ return null;
636
+ }
637
+ const pillClass = (active) => `rounded-full border px-3.5 py-1.5 text-xs font-bold ${active ? "border-sky-blue-400/40 bg-sky-blue-400/20 text-dark-blue-400" : "border-slate-200 bg-white text-slate-500 hover:bg-slate-50"}`;
638
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap gap-2" }, /* @__PURE__ */ React__namespace.createElement("button", { type: "button", onClick: () => props.onChange(""), className: pillClass(!props.selected) }, "All"), props.pathways.map((p) => /* @__PURE__ */ React__namespace.createElement(
639
+ "button",
640
+ {
641
+ key: p.pathwayId,
642
+ type: "button",
643
+ onClick: () => props.onChange(p.pathwayId),
644
+ className: pillClass(props.selected === p.pathwayId)
702
645
  },
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)
646
+ p.title
705
647
  )));
706
648
  }
707
649
 
708
650
  const Badges = (props) => {
709
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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(
651
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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(PathwayFilterPills, { pathways: props.pathways, selected: props.selectedPathway, onChange: props.onPathwayChange }), /* @__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
652
  "input",
711
653
  {
712
654
  type: "text",
@@ -717,6 +659,12 @@ const Badges = (props) => {
717
659
  )), /* @__PURE__ */ React__namespace.createElement(Table$i, { loading: props.loading, items: props.badges }));
718
660
  };
719
661
 
662
+ const Tabs = (props) => {
663
+ var _a;
664
+ const tabs = (_a = props.data) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React__namespace.createElement(core.Tabs.Tab, { key: item.value, value: item.value }, item.label || item.value));
665
+ return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
666
+ };
667
+
720
668
  function Table$h(props) {
721
669
  if (props.items.length === 0) {
722
670
  return /* @__PURE__ */ React__namespace.createElement(
@@ -906,8 +854,8 @@ const Dashboard = (props) => {
906
854
  };
907
855
 
908
856
  var __defProp$d = Object.defineProperty;
909
- var __defProps$9 = Object.defineProperties;
910
- var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
857
+ var __defProps$a = Object.defineProperties;
858
+ var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
911
859
  var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
912
860
  var __hasOwnProp$d = Object.prototype.hasOwnProperty;
913
861
  var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
@@ -923,8 +871,8 @@ var __spreadValues$d = (a, b) => {
923
871
  }
924
872
  return a;
925
873
  };
926
- var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
927
- const openDeleteModal = (student, onDelete) => modals.openConfirmModal({
874
+ var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
875
+ const openDeleteModal$1 = (student, onDelete) => modals.openConfirmModal({
928
876
  title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
929
877
  centered: true,
930
878
  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."),
@@ -934,7 +882,7 @@ const openDeleteModal = (student, onDelete) => modals.openConfirmModal({
934
882
  });
935
883
  function Table$c(props) {
936
884
  const preparedItems = React__namespace.useMemo(() => {
937
- return props.items.map((item) => __spreadProps$9(__spreadValues$d({}, item), {
885
+ return props.items.map((item) => __spreadProps$a(__spreadValues$d({}, item), {
938
886
  fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
939
887
  }));
940
888
  }, [props.items]);
@@ -976,7 +924,7 @@ function Table$c(props) {
976
924
  "button",
977
925
  {
978
926
  type: "button",
979
- onClick: () => openDeleteModal(row, props.onDelete),
927
+ onClick: () => openDeleteModal$1(row, props.onDelete),
980
928
  className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
981
929
  },
982
930
  /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 14, stroke: 1.75 })
@@ -986,8 +934,8 @@ function Table$c(props) {
986
934
  }
987
935
 
988
936
  var __defProp$c = Object.defineProperty;
989
- var __defProps$8 = Object.defineProperties;
990
- var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
937
+ var __defProps$9 = Object.defineProperties;
938
+ var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
991
939
  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
992
940
  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
993
941
  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -1003,7 +951,7 @@ var __spreadValues$c = (a, b) => {
1003
951
  }
1004
952
  return a;
1005
953
  };
1006
- var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
954
+ var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
1007
955
  const Class = (props) => {
1008
956
  const [opened, setOpened] = React.useState(false);
1009
957
  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
@@ -1015,7 +963,7 @@ const Class = (props) => {
1015
963
  padding: "xl",
1016
964
  size: "xl"
1017
965
  },
1018
- /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$8(__spreadValues$c({}, props), { close: () => setOpened(false) }))
966
+ /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$9(__spreadValues$c({}, props), { close: () => setOpened(false) }))
1019
967
  ), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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(
1020
968
  "button",
1021
969
  {
@@ -1250,7 +1198,7 @@ var __spreadValues$b = (a, b) => {
1250
1198
  }
1251
1199
  return a;
1252
1200
  };
1253
- const useStyles$f = core.createStyles((theme) => ({
1201
+ const useStyles$7 = core.createStyles((theme) => ({
1254
1202
  title: {
1255
1203
  fontSize: 34,
1256
1204
  fontWeight: 900,
@@ -1263,7 +1211,7 @@ const useStyles$f = core.createStyles((theme) => ({
1263
1211
  }
1264
1212
  }));
1265
1213
  const Classes = (props) => {
1266
- const { classes } = useStyles$f();
1214
+ const { classes } = useStyles$7();
1267
1215
  const form$1 = form.useForm({
1268
1216
  initialValues: {
1269
1217
  classId: "",
@@ -1414,7 +1362,7 @@ function Table$8(props) {
1414
1362
  )));
1415
1363
  }
1416
1364
 
1417
- const TABS$1 = [
1365
+ const TABS$2 = [
1418
1366
  { label: "My badges", value: "badges" },
1419
1367
  { label: "My answers", value: "answers" },
1420
1368
  { label: "My reflections", value: "reflections" }
@@ -1436,7 +1384,7 @@ const Student = (props) => {
1436
1384
  title: "BADGE COMPLETION",
1437
1385
  value: numberOfBadgesCompleted
1438
1386
  }
1439
- ] }), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$1.map((t) => /* @__PURE__ */ React__namespace.createElement(
1387
+ ] }), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$2.map((t) => /* @__PURE__ */ React__namespace.createElement(
1440
1388
  "button",
1441
1389
  {
1442
1390
  key: t.value,
@@ -1554,65 +1502,35 @@ function Table$7(props) {
1554
1502
  }
1555
1503
  );
1556
1504
  }
1557
- const sortStatus = {
1558
- columnAccessor: sortConfig.key,
1559
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1560
- };
1561
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1562
- mantineDatatable.DataTable,
1563
- {
1564
- records: sortedItems,
1565
- sortStatus,
1566
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1567
- columns: [
1568
- { accessor: "studentName", title: "Student Name", sortable: true },
1569
- { accessor: "reflection", title: "Reflection" },
1570
- { accessor: "rating", title: "Rating", sortable: true }
1571
- ]
1572
- }
1573
- ));
1505
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
1506
+ 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("button", { onClick: () => requestSort("studentName"), className: "w-40 shrink-0 text-left hover:text-slate-600" }, "Student Name", indicator("studentName")), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, "Reflection"), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("rating"), className: "w-20 shrink-0 text-right hover:text-slate-600" }, "Rating", indicator("rating"))), sortedItems.map((row, i) => /* @__PURE__ */ React__namespace.createElement("div", { key: `${row.studentName}-${i}`, className: "rounded-xl border border-slate-200 bg-white p-4 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-start gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-sm font-bold text-dark-blue-400" }, row.studentName), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 text-sm text-slate-600" }, row.reflection), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-20 shrink-0 text-right text-sm text-slate-500" }, row.rating)))));
1574
1507
  }
1575
1508
 
1576
- const useStyles$e = core.createStyles((theme) => ({
1577
- button: {
1578
- borderTopRightRadius: 0,
1579
- borderBottomRightRadius: 0,
1580
- marginLeft: 0,
1581
- marginRight: 0
1582
- },
1583
- menuControl: {
1584
- borderTopLeftRadius: 0,
1585
- borderBottomLeftRadius: 0,
1586
- border: 0,
1587
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
1588
- }
1589
- }));
1590
1509
  const SplitButton$3 = (props) => {
1591
- const { classes, theme } = useStyles$e();
1592
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
1593
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
1594
- core.Button,
1510
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
1511
+ reactRouterDom.Link,
1595
1512
  {
1596
- component: reactRouterDom.Link,
1597
1513
  to: props.href,
1598
- className: classes.button,
1599
- variant: "gradient"
1514
+ 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 no-underline hover:bg-slate-50"
1600
1515
  },
1601
1516
  "Preview"
1602
1517
  ), /* @__PURE__ */ React__namespace.createElement(
1603
- core.Button,
1518
+ "button",
1604
1519
  {
1605
- variant: "gradient",
1606
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
1607
- onClick: props.onCopyLinkClick
1520
+ type: "button",
1521
+ onClick: props.onCopyLinkClick,
1522
+ 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"
1608
1523
  },
1524
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
1609
1525
  "Copy link"
1610
1526
  ), /* @__PURE__ */ React__namespace.createElement(
1611
- core.Button,
1527
+ "button",
1612
1528
  {
1613
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14 }),
1614
- onClick: props.onExportDataClick
1529
+ type: "button",
1530
+ onClick: props.onExportDataClick,
1531
+ 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)]"
1615
1532
  },
1533
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 13, stroke: 2 }),
1616
1534
  "Export data (.csv)"
1617
1535
  ));
1618
1536
  };
@@ -1621,13 +1539,12 @@ function Stack$3(props) {
1621
1539
  if (props.items.length === 0) {
1622
1540
  return null;
1623
1541
  }
1624
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0, key: row.questionName }, /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dark.4", size: "lg" }, row.questionName), /* @__PURE__ */ React__namespace.createElement(core.Text, null, row.answer.join(",") || "No answer.")));
1625
- 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)));
1542
+ return /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: props.href, className: "flex flex-col gap-4 no-underline" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("div", { key: row.questionName }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.questionName), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-sm text-slate-600" }, row.answer.join(", ") || "No answer."))));
1626
1543
  }
1627
1544
 
1628
1545
  var __defProp$a = Object.defineProperty;
1629
- var __defProps$7 = Object.defineProperties;
1630
- var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
1546
+ var __defProps$8 = Object.defineProperties;
1547
+ var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
1631
1548
  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
1632
1549
  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
1633
1550
  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -1643,18 +1560,15 @@ var __spreadValues$a = (a, b) => {
1643
1560
  }
1644
1561
  return a;
1645
1562
  };
1646
- var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
1563
+ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
1647
1564
  function Table$6(props) {
1565
+ const [expanded, setExpanded] = React__namespace.useState({});
1648
1566
  const preparedItems = React__namespace.useMemo(() => {
1649
- return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
1567
+ return props.items.map((item) => __spreadProps$8(__spreadValues$a({}, item), {
1650
1568
  status: item.isComplete ? 2 : item.isStarted ? 1 : 0
1651
1569
  }));
1652
1570
  }, [props.items]);
1653
1571
  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
1654
- const sortStatus = {
1655
- columnAccessor: sortConfig.key,
1656
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1657
- };
1658
1572
  if (props.items.length === 0) {
1659
1573
  return /* @__PURE__ */ React__namespace.createElement(
1660
1574
  PlaceholderBanner,
@@ -1666,43 +1580,29 @@ function Table$6(props) {
1666
1580
  }
1667
1581
  );
1668
1582
  }
1669
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1670
- mantineDatatable.DataTable,
1671
- {
1672
- verticalSpacing: "sm",
1673
- sx: { minWidth: 700 },
1674
- withBorder: false,
1675
- borderRadius: "sm",
1676
- withColumnBorders: true,
1677
- striped: true,
1678
- highlightOnHover: true,
1679
- idAccessor: "userId",
1680
- records: sortedItems,
1681
- sortStatus,
1682
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1683
- columns: [{
1684
- accessor: "name",
1685
- title: "Student Name",
1686
- sortable: true,
1687
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, null, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))
1688
- }, {
1689
- accessor: "status",
1690
- title: "Status",
1691
- sortable: true,
1692
- render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, "In progress"))
1693
- }],
1694
- rowExpansion: {
1695
- content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$3, { href: record.href, items: record.answers })
1696
- }
1697
- }
1698
- ));
1699
- }
1700
-
1701
- function Stack$2(props) {
1702
- const primaryAxis = React__namespace.useMemo(
1703
- () => ({
1704
- position: "left",
1705
- getValue: (datum) => datum.primary
1583
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
1584
+ 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("status"), className: "w-28 shrink-0 text-center hover:text-slate-600" }, "Status", indicator("status")), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
1585
+ var _a;
1586
+ const isOpen = !!expanded[row.userId];
1587
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
1588
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(
1589
+ "div",
1590
+ {
1591
+ onClick: () => setExpanded(__spreadProps$8(__spreadValues$a({}, expanded), { [row.userId]: !isOpen })),
1592
+ className: "flex cursor-pointer items-center gap-4 p-4"
1593
+ },
1594
+ /* @__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-mint-400/20 text-xs font-bold text-dark-blue-400" }, initials), /* @__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))),
1595
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-28 shrink-0 text-center" }, row.isComplete && /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-mint-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "In progress")),
1596
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
1597
+ ), isOpen && /* @__PURE__ */ React__namespace.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React__namespace.createElement(Stack$3, { href: row.href, items: row.answers })));
1598
+ }));
1599
+ }
1600
+
1601
+ function Stack$2(props) {
1602
+ const primaryAxis = React__namespace.useMemo(
1603
+ () => ({
1604
+ position: "left",
1605
+ getValue: (datum) => datum.primary
1706
1606
  }),
1707
1607
  []
1708
1608
  );
@@ -1726,7 +1626,7 @@ function Stack$2(props) {
1726
1626
  }
1727
1627
  );
1728
1628
  }
1729
- const rows = props.items.map((row) => {
1629
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => {
1730
1630
  if (row.chart) {
1731
1631
  const labelMap = {};
1732
1632
  const choices = row.choices || [];
@@ -1738,7 +1638,7 @@ function Stack$2(props) {
1738
1638
  labelMap[r] = labelMap[r] ? labelMap[r] + 1 : 1;
1739
1639
  }
1740
1640
  }));
1741
- return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "lg" }, row.question), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement("div", { style: { background: "white", height: "300px", width: "100%", position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(
1641
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.question, className: "rounded-xl border border-slate-200 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-base font-extrabold text-dark-blue-400" }, row.question), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs text-slate-500" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement("div", { className: "relative mt-4 h-[300px] w-full bg-white" }, /* @__PURE__ */ React__namespace.createElement(
1742
1642
  reactCharts.Chart,
1743
1643
  {
1744
1644
  options: {
@@ -1755,64 +1655,24 @@ function Stack$2(props) {
1755
1655
  secondaryAxes
1756
1656
  }
1757
1657
  }
1758
- ))));
1658
+ )));
1759
1659
  }
1760
- return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "lg" }, row.question), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, row.answers.map((a) => {
1660
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.question, className: "rounded-xl border border-slate-200 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-base font-extrabold text-dark-blue-400" }, row.question), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs text-slate-500" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-4 flex flex-col gap-2" }, row.answers.map((a) => {
1761
1661
  const answerText = a.join("\n");
1762
- return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React__namespace.createElement(core.Text, null, answerText));
1763
- })))));
1764
- });
1765
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { py: 4, spacing: 10, sx: { minWidth: 700 } }, rows);
1662
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: answerText, className: "rounded-lg bg-slate-50 p-3 text-sm text-slate-700" }, answerText);
1663
+ })));
1664
+ }));
1766
1665
  }
1767
1666
  const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
1768
1667
 
1769
- const useStyles$d = core.createStyles((theme) => ({
1770
- title: {
1771
- fontSize: 34,
1772
- fontWeight: 900,
1773
- [theme.fn.smallerThan("sm")]: {
1774
- fontSize: 24
1775
- }
1776
- },
1777
- description: {
1778
- maxWidth: 600
1779
- }
1780
- }));
1668
+ const initialsFor = (name) => name.split(/[ -]/).map((n) => n.charAt(0)).join("").toUpperCase();
1781
1669
  const Lesson = (props) => {
1782
- const { classes } = useStyles$d();
1783
1670
  const [tab, setTab] = React.useState("question");
1784
1671
  const numberOfStudents = props.students.length;
1785
1672
  const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
1786
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
1787
1673
  const contributors = props.contributors || [];
1788
- const avatars = contributors.slice(0, 5).map((u, i) => {
1789
- const fullName = u.name;
1790
- let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
1791
- const src = AvatarInit.initialAvatar({
1792
- background: "#1c7ed6",
1793
- color: "#fff",
1794
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1795
- fontSize: 10,
1796
- fontWeight: 250,
1797
- size: 30,
1798
- initials
1799
- });
1800
- return /* @__PURE__ */ React__namespace.createElement(core.Avatar, { key: i, src, radius: "xl" });
1801
- });
1802
- const remainingUsers = contributors.slice(5).length;
1803
- if (remainingUsers) {
1804
- const initials = "+" + compact(remainingUsers);
1805
- const src = AvatarInit.initialAvatar({
1806
- background: "#1c7ed6",
1807
- color: "#fff",
1808
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1809
- fontSize: 10,
1810
- fontWeight: 250,
1811
- size: 30,
1812
- initials
1813
- });
1814
- avatars.push(/* @__PURE__ */ React__namespace.createElement(core.Avatar, { src, radius: "xl" }));
1815
- }
1674
+ const visibleContributors = contributors.slice(0, 5);
1675
+ const remainingContributors = contributors.slice(5).length;
1816
1676
  const tabs = props.trial ? [
1817
1677
  { label: "By question", value: "question" },
1818
1678
  { label: "By student", value: "students" }
@@ -1821,15 +1681,7 @@ const Lesson = (props) => {
1821
1681
  { label: "By student", value: "students" },
1822
1682
  { label: "By reflection", value: "reflections" }
1823
1683
  ];
1824
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, 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(
1825
- core.Badge,
1826
- {
1827
- variant: "filled",
1828
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
1829
- size: "lg"
1830
- },
1831
- "Back"
1832
- )), /* @__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 || "Lesson"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
1684
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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 || "Lesson"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(
1833
1685
  SplitButton$3,
1834
1686
  {
1835
1687
  href: props.href,
@@ -1837,58 +1689,36 @@ const Lesson = (props) => {
1837
1689
  onCopyLinkClick: props.onCopyLinkClick,
1838
1690
  onExportDataClick: props.onExportDataClick
1839
1691
  }
1840
- ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
1841
- StatsGroup,
1842
- {
1843
- data: [
1844
- {
1845
- title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1846
- value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons,
1847
- unit: props.trial ? "" : ""
1848
- }
1849
- ]
1850
- }
1851
- ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar.Group, { spacing: "sm" }, avatars)), !props.trial && /* @__PURE__ */ React__namespace.createElement(
1852
- core.Select,
1692
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1853
1693
  {
1854
- clearable: true,
1855
- clearButtonLabel: "Clear class selection",
1856
- size: "sm",
1857
- placeholder: "Select a class",
1858
- nothingFound: "No options",
1859
- value: props.classId,
1860
- onChange: props.onClassChange,
1861
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, null),
1862
- data: props.classes.map((g) => {
1863
- return { value: g.classId, label: g.name };
1864
- })
1694
+ title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1695
+ value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons
1865
1696
  }
1866
- ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
1867
- Tabs,
1868
- {
1869
- value: tab,
1870
- data: tabs,
1871
- onChange: setTab
1872
- }
1873
- ), tab === "question" && /* @__PURE__ */ React__namespace.createElement(
1874
- Stack$2,
1697
+ ] }), contributors.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex" }, visibleContributors.map((u, i) => /* @__PURE__ */ React__namespace.createElement(
1698
+ "div",
1875
1699
  {
1876
- loading: props.loading,
1877
- items: props.questions
1878
- }
1879
- ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
1880
- Table$7,
1700
+ key: i,
1701
+ className: "-ml-2 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-white bg-mint-400/20 text-[10px] font-bold text-dark-blue-400 first:ml-0"
1702
+ },
1703
+ initialsFor(u.name)
1704
+ )), remainingContributors > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "-ml-2 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-white bg-slate-200 text-[10px] font-bold text-slate-600" }, "+", compact(remainingContributors))), !props.trial && /* @__PURE__ */ React__namespace.createElement("div", { className: "relative w-full max-w-xs" }, /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
1705
+ "select",
1881
1706
  {
1882
- loading: props.loading,
1883
- items: props.reflections
1884
- }
1885
- ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
1886
- Table$6,
1707
+ value: props.classId,
1708
+ onChange: (e) => props.onClassChange(e.target.value),
1709
+ className: "w-full appearance-none rounded-lg border border-slate-200 bg-white py-2 pl-9 pr-4 text-sm text-dark-blue-400 focus:border-sky-blue-400 focus:outline-none"
1710
+ },
1711
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
1712
+ props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, c.name))
1713
+ )), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__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(
1714
+ "button",
1887
1715
  {
1888
- loading: props.loading,
1889
- items: props.students
1890
- }
1891
- )))))));
1716
+ key: t.value,
1717
+ onClick: () => setTab(t.value),
1718
+ 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"}`
1719
+ },
1720
+ t.label
1721
+ ))), tab === "question" && /* @__PURE__ */ React__namespace.createElement(Stack$2, { loading: props.loading, items: props.questions }), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(Table$7, { loading: props.loading, items: props.reflections }), tab === "students" && /* @__PURE__ */ React__namespace.createElement(Table$6, { loading: props.loading, items: props.students })));
1892
1722
  };
1893
1723
 
1894
1724
  function Table$5(props) {
@@ -1898,7 +1728,7 @@ function Table$5(props) {
1898
1728
  if (props.items.length === 0) {
1899
1729
  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.");
1900
1730
  }
1901
- 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(
1731
+ 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" }, "Badge"), /* @__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(
1902
1732
  reactRouterDom.Link,
1903
1733
  {
1904
1734
  key: row.lessonId,
@@ -1906,13 +1736,14 @@ function Table$5(props) {
1906
1736
  className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
1907
1737
  },
1908
1738
  /* @__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)),
1739
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.badge || "\u2014"),
1909
1740
  /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
1910
1741
  /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
1911
1742
  )));
1912
1743
  }
1913
1744
 
1914
1745
  const Lessons = (props) => {
1915
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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(
1746
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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(PathwayFilterPills, { pathways: props.pathways, selected: props.selectedPathway, onChange: props.onPathwayChange }), /* @__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(
1916
1747
  "input",
1917
1748
  {
1918
1749
  type: "text",
@@ -1923,37 +1754,23 @@ const Lessons = (props) => {
1923
1754
  )), /* @__PURE__ */ React__namespace.createElement(Table$5, { loading: props.loading, items: props.lessons }));
1924
1755
  };
1925
1756
 
1926
- const useStyles$c = core.createStyles((theme) => ({
1927
- title: {
1928
- fontSize: 22,
1929
- fontWeight: 900,
1930
- fontFamily: `Greycliff CF, ${theme.fontFamily}`
1931
- },
1932
- controls: {
1933
- [theme.fn.smallerThan("xs")]: {
1934
- flexDirection: "column-reverse"
1935
- }
1936
- },
1937
- control: {
1938
- [theme.fn.smallerThan("xs")]: {
1939
- width: "100%",
1940
- textAlign: "center"
1941
- }
1942
- }
1943
- }));
1944
1757
  function AccessCode(props) {
1945
- const { classes } = useStyles$c();
1946
- 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(
1947
- core.Anchor,
1758
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-[460px]" }, /* @__PURE__ */ React__namespace.createElement("h2", { className: "text-lg font-extrabold text-dark-blue-400" }, "Access code"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Grant access to join your organization"), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(
1759
+ "input",
1948
1760
  {
1949
- component: reactRouterDom.Link,
1950
- to: props.peopleLink,
1951
- color: "dimmed",
1952
- size: "sm",
1953
- className: classes.control
1761
+ value: props.value,
1762
+ readOnly: true,
1763
+ className: "w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-dark-blue-400"
1764
+ }
1765
+ ), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-4 flex flex-wrap items-center justify-between gap-3" }, /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: props.peopleLink, className: "flex items-center gap-1.5 text-xs font-bold text-slate-500 no-underline hover:text-slate-700" }, /* @__PURE__ */ React__namespace.createElement(icons.IconPointer, { size: 12, stroke: 1.5 }), "See people in my organization"), /* @__PURE__ */ React__namespace.createElement(
1766
+ "button",
1767
+ {
1768
+ type: "button",
1769
+ onClick: props.onCopyCode,
1770
+ className: "rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-4 py-2 text-xs font-bold text-dark-blue-400 shadow-[0_3px_12px_rgba(255,212,77,0.35)]"
1954
1771
  },
1955
- /* @__PURE__ */ React__namespace.createElement(core.Center, { inline: true }, /* @__PURE__ */ React__namespace.createElement(icons.IconPointer, { size: 12, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement(core.Box, { ml: 5 }, "See people in my organization"))
1956
- ), /* @__PURE__ */ React__namespace.createElement(core.Button, { onClick: props.onCopyCode, className: classes.control }, "Copy code"))));
1772
+ "Copy code"
1773
+ ))));
1957
1774
  }
1958
1775
 
1959
1776
  const monthNames = [
@@ -1970,46 +1787,8 @@ const monthNames = [
1970
1787
  "November",
1971
1788
  "December"
1972
1789
  ];
1973
- const useStyles$b = core.createStyles((theme) => ({
1974
- title: {
1975
- fontSize: 34,
1976
- fontWeight: 900,
1977
- [theme.fn.smallerThan("sm")]: {
1978
- fontSize: 24
1979
- }
1980
- },
1981
- description: {
1982
- maxWidth: 600
1983
- },
1984
- wrapper: {
1985
- position: "relative",
1986
- marginBottom: 30
1987
- },
1988
- dropzone: {
1989
- borderWidth: 1,
1990
- paddingBottom: 50
1991
- },
1992
- icon: {
1993
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
1994
- },
1995
- control: {
1996
- position: "absolute",
1997
- width: 250,
1998
- left: "calc(50% - 125px)",
1999
- bottom: -20
2000
- }
2001
- }));
2002
1790
  const Organization = (props) => {
2003
- const { classes } = useStyles$b();
2004
- return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, 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(
2005
- core.Badge,
2006
- {
2007
- variant: "filled",
2008
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
2009
- size: "lg"
2010
- },
2011
- "Back"
2012
- )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Overview"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description"))), /* @__PURE__ */ React__namespace.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1791
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__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 || "Overview"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
2013
1792
  {
2014
1793
  title: "# OF STUDENTS",
2015
1794
  value: props.numberOfStudents || 0
@@ -2023,55 +1802,43 @@ const Organization = (props) => {
2023
1802
  value: props.percentageOfAccountsActive,
2024
1803
  unit: "%"
2025
1804
  }
2026
- ] }))))));
1805
+ ] }));
2027
1806
  };
2028
1807
 
2029
- const useStyles$a = core.createStyles((theme) => ({
2030
- button: {
2031
- borderTopRightRadius: 0,
2032
- borderBottomRightRadius: 0,
2033
- marginLeft: 0,
2034
- marginRight: 0
2035
- },
2036
- menuControl: {
2037
- borderTopLeftRadius: 0,
2038
- borderBottomLeftRadius: 0,
2039
- border: 0,
2040
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
2041
- }
2042
- }));
2043
1808
  const SplitButton$2 = (props) => {
2044
- const { classes, theme } = useStyles$a();
2045
- const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
2046
- const hasMenu = !!props.withOrganizationLink;
2047
- return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
2048
- core.Button,
1809
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
1810
+ "button",
2049
1811
  {
2050
- className: hasMenu ? classes.button : "",
2051
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 }),
2052
- onClick: props.onAddUsersClick
1812
+ type: "button",
1813
+ onClick: props.onAddUsersClick,
1814
+ 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)]"
2053
1815
  },
1816
+ /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 13, stroke: 2 }),
2054
1817
  "Add members"
2055
- ), hasMenu && /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
2056
- core.ActionIcon,
2057
- {
2058
- variant: "filled",
2059
- color: theme.primaryColor,
2060
- size: 36,
2061
- className: classes.menuControl
2062
- },
2063
- /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
2064
- )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, !!props.withOrganizationLink && /* @__PURE__ */ React__namespace.createElement(
2065
- core.Menu.Item,
1818
+ ), props.withOrganizationLink && /* @__PURE__ */ React__namespace.createElement(
1819
+ "button",
2066
1820
  {
2067
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
2068
- onClick: props.onCopyOrganizationLinkClick
1821
+ type: "button",
1822
+ onClick: props.onCopyOrganizationLinkClick,
1823
+ 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"
2069
1824
  },
1825
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
2070
1826
  "Copy organization link"
2071
- ))));
1827
+ ));
2072
1828
  };
2073
1829
 
1830
+ const openDeleteModal = (person, onDelete) => modals.openConfirmModal({
1831
+ title: `Remove "${person.givenName && person.familyName ? `${person.givenName} ${person.familyName}` : person.email}" from your organization?`,
1832
+ centered: true,
1833
+ children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Click confirm if you want to remove this person from your organization. This will NOT remove them from the Tech Platform."),
1834
+ labels: { confirm: "Remove", cancel: "Cancel" },
1835
+ confirmProps: { color: "red" },
1836
+ onConfirm: () => onDelete(person)
1837
+ });
2074
1838
  function Table$4(props) {
1839
+ if (props.loading) {
1840
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
1841
+ }
2075
1842
  if (props.items.length === 0) {
2076
1843
  return /* @__PURE__ */ React__namespace.createElement(
2077
1844
  PlaceholderBanner,
@@ -2083,29 +1850,48 @@ function Table$4(props) {
2083
1850
  }
2084
1851
  );
2085
1852
  }
2086
- const openDeleteModal = (student) => modals.openConfirmModal({
2087
- title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
2088
- centered: true,
2089
- 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."),
2090
- labels: { confirm: "Remove Student", cancel: "Cancel" },
2091
- confirmProps: { color: "red" },
2092
- onConfirm: () => props.onDelete && props.onDelete(student)
2093
- });
2094
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.email }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: row.href }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Box, { maw: 150 }, /* @__PURE__ */ React__namespace.createElement(
2095
- core.Select,
2096
- {
2097
- size: "sm",
2098
- value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
2099
- onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
2100
- data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }, { value: "admin", label: "Admin" }]
2101
- }
2102
- ))), /* @__PURE__ */ React__namespace.createElement("td", null, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { color: "green" })), /* @__PURE__ */ React__namespace.createElement("td", null, row.numberOfClasses), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red" }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
2103
- 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)));
1853
+ 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_1fr_0.6fr] gap-3 border-b border-slate-100 px-5 py-3 text-[10px] font-bold uppercase tracking-wide text-slate-500" }, /* @__PURE__ */ React__namespace.createElement("div", null, "Name"), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center" }, "Role"), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center" }, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center" }, "# of Classes"), /* @__PURE__ */ React__namespace.createElement("div", null)), props.items.map((row, i) => {
1854
+ var _a, _b;
1855
+ const name = row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email;
1856
+ const initials = (((_a = row.givenName) == null ? void 0 : _a[0]) || row.email[0] || "?") + (((_b = row.familyName) == null ? void 0 : _b[0]) || "");
1857
+ const identity = /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, 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-500" }, row.email)));
1858
+ return /* @__PURE__ */ React__namespace.createElement(
1859
+ "div",
1860
+ {
1861
+ key: row.email,
1862
+ className: `grid grid-cols-[2.2fr_1.2fr_1fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
1863
+ },
1864
+ row.href ? /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: row.href, className: "flex min-w-0 items-center gap-2.5 no-underline" }, identity) : /* @__PURE__ */ React__namespace.createElement("div", { className: "flex min-w-0 items-center gap-2.5" }, identity),
1865
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React__namespace.createElement(
1866
+ "select",
1867
+ {
1868
+ disabled: row.readonly,
1869
+ value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
1870
+ onChange: (e) => props.onRoleChange && props.onRoleChange(row, e.target.value),
1871
+ 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"
1872
+ },
1873
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "student" }, "Student"),
1874
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "educator" }, "Educator"),
1875
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "admin" }, "Admin")
1876
+ )),
1877
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-center" }, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { size: 16, stroke: 3, className: "text-mint-400" })),
1878
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, row.numberOfClasses),
1879
+ /* @__PURE__ */ React__namespace.createElement("div", null, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(
1880
+ "button",
1881
+ {
1882
+ type: "button",
1883
+ onClick: () => openDeleteModal(row, props.onDelete),
1884
+ className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
1885
+ },
1886
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 14, stroke: 1.75 })
1887
+ ))
1888
+ );
1889
+ }));
2104
1890
  }
2105
1891
 
2106
1892
  var __defProp$9 = Object.defineProperty;
2107
- var __defProps$6 = Object.defineProperties;
2108
- var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
1893
+ var __defProps$7 = Object.defineProperties;
1894
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
2109
1895
  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
2110
1896
  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
2111
1897
  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -2121,38 +1907,8 @@ var __spreadValues$9 = (a, b) => {
2121
1907
  }
2122
1908
  return a;
2123
1909
  };
2124
- var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2125
- const useStyles$9 = core.createStyles((theme) => ({
2126
- title: {
2127
- fontSize: 34,
2128
- fontWeight: 900,
2129
- [theme.fn.smallerThan("sm")]: {
2130
- fontSize: 24
2131
- }
2132
- },
2133
- description: {
2134
- maxWidth: 600
2135
- },
2136
- wrapper: {
2137
- position: "relative",
2138
- marginBottom: 30
2139
- },
2140
- dropzone: {
2141
- borderWidth: 1,
2142
- paddingBottom: 50
2143
- },
2144
- icon: {
2145
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
2146
- },
2147
- control: {
2148
- position: "absolute",
2149
- width: 250,
2150
- left: "calc(50% - 125px)",
2151
- bottom: -20
2152
- }
2153
- }));
1910
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
2154
1911
  const People = (props) => {
2155
- const { classes } = useStyles$9();
2156
1912
  const form$1 = form.useForm({
2157
1913
  initialValues: {
2158
1914
  userId: "",
@@ -2183,12 +1939,12 @@ const People = (props) => {
2183
1939
  padding: "xl",
2184
1940
  size: "xl"
2185
1941
  },
2186
- /* @__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(() => {
1942
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$7(__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(() => {
2187
1943
  const values = form$1.values;
2188
1944
  form$1.reset();
2189
1945
  setOpened(false);
2190
1946
  props.onCreateUsers && props.onCreateUsers([values]);
2191
- }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
1947
+ }) }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement(
2192
1948
  core.TextInput,
2193
1949
  __spreadValues$9({
2194
1950
  withAsterisk: true,
@@ -2207,23 +1963,22 @@ const People = (props) => {
2207
1963
  label: "Family name",
2208
1964
  placeholder: "Family name"
2209
1965
  }, form$1.getInputProps("familyName"))
2210
- )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
2211
- ), /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, 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(
2212
- core.Badge,
2213
- {
2214
- variant: "filled",
2215
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
2216
- size: "lg"
2217
- },
2218
- "Back"
2219
- )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "People"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Manage members of your organization")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
1966
+ )), /* @__PURE__ */ React__namespace.createElement(
1967
+ "button",
1968
+ {
1969
+ type: "submit",
1970
+ className: "mt-2 rounded-lg bg-dark-blue-400 px-4 py-2.5 text-xs font-bold text-white"
1971
+ },
1972
+ "Submit"
1973
+ ))))
1974
+ ), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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" }, "People"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, "Manage members of your organization")), !props.loading && /* @__PURE__ */ React__namespace.createElement(
2220
1975
  SplitButton$2,
2221
1976
  {
2222
1977
  withOrganizationLink: props.withOrganizationLink,
2223
1978
  onAddUsersClick: () => setOpened(true),
2224
1979
  onCopyOrganizationLinkClick: props.onCopyLinkClick
2225
1980
  }
2226
- ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1981
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
2227
1982
  {
2228
1983
  title: "# OF PEOPLE",
2229
1984
  value: props.users.length
@@ -2238,14 +1993,15 @@ const People = (props) => {
2238
1993
  unit: "%",
2239
1994
  value: props.percentageRostered
2240
1995
  }
2241
- ] }), /* @__PURE__ */ React__namespace.createElement(
2242
- core.Autocomplete,
1996
+ ] }), /* @__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(
1997
+ "input",
2243
1998
  {
1999
+ type: "text",
2244
2000
  placeholder: "Search for a people in your organization",
2245
- data: props.users.map((item) => item.email),
2246
- onChange: props.onAutocompleteChange
2001
+ onChange: (e) => props.onAutocompleteChange(e.target.value),
2002
+ 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"
2247
2003
  }
2248
- ), /* @__PURE__ */ React__namespace.createElement(
2004
+ )), /* @__PURE__ */ React__namespace.createElement(
2249
2005
  Table$4,
2250
2006
  {
2251
2007
  loading: props.loading,
@@ -2253,10 +2009,9 @@ const People = (props) => {
2253
2009
  onDelete: props.onDeleteUser,
2254
2010
  onRoleChange: props.onChangeUserRole
2255
2011
  }
2256
- ))))));
2012
+ )));
2257
2013
  };
2258
2014
  const DropzoneButton = (props) => {
2259
- const { classes, theme } = useStyles$9();
2260
2015
  const openRef = React__namespace.useRef(null);
2261
2016
  const [loading, setLoading] = React__namespace.useState(false);
2262
2017
  const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -2277,32 +2032,33 @@ const DropzoneButton = (props) => {
2277
2032
  });
2278
2033
  });
2279
2034
  }, []);
2280
- return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(
2035
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative mb-8" }, /* @__PURE__ */ React__namespace.createElement(
2281
2036
  dropzone.Dropzone,
2282
2037
  {
2283
2038
  loading,
2284
2039
  openRef,
2285
2040
  onDrop,
2286
- className: classes.dropzone,
2287
2041
  radius: "md",
2042
+ className: "border pb-12",
2288
2043
  accept: [dropzone.MIME_TYPES.csv],
2289
2044
  maxSize: 5 * 1024 ** 2
2290
2045
  },
2291
- /* @__PURE__ */ React__namespace.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "center" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, /* @__PURE__ */ React__namespace.createElement(icons.IconDownload, { size: 50, color: theme.colors[theme.primaryColor][6], stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, /* @__PURE__ */ React__namespace.createElement(icons.IconX, { size: 50, color: theme.colors.red[6], stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, /* @__PURE__ */ React__namespace.createElement(
2292
- icons.IconCloudUpload,
2293
- {
2294
- size: 50,
2295
- color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
2296
- stroke: 1.5
2297
- }
2298
- ))), /* @__PURE__ */ React__namespace.createElement(core.Text, { align: "center", weight: 700, size: "lg", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, "Upload multiple")), /* @__PURE__ */ React__namespace.createElement(core.Text, { align: "center", size: "sm", mt: "xs", color: "dimmed" }, "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."))
2299
- ), /* @__PURE__ */ React__namespace.createElement(core.Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
2300
- var _a;
2301
- return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
2302
- } }, "Select file"));
2046
+ /* @__PURE__ */ React__namespace.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "center" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, /* @__PURE__ */ React__namespace.createElement(icons.IconDownload, { size: 50, color: "#1EE2AF", stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, /* @__PURE__ */ React__namespace.createElement(icons.IconX, { size: 50, color: "#ef4444", stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, /* @__PURE__ */ React__namespace.createElement(icons.IconCloudUpload, { size: 50, color: "#232A3A", stroke: 1.5 }))), /* @__PURE__ */ React__namespace.createElement("p", { className: "mt-6 text-center text-lg font-bold text-dark-blue-400" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, "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."))
2047
+ ), /* @__PURE__ */ React__namespace.createElement(
2048
+ "button",
2049
+ {
2050
+ type: "button",
2051
+ onClick: () => {
2052
+ var _a;
2053
+ return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
2054
+ },
2055
+ className: "absolute bottom-[-20px] left-1/2 w-[250px] -translate-x-1/2 rounded-full bg-dark-blue-400 px-6 py-2.5 text-xs font-bold text-white"
2056
+ },
2057
+ "Select file"
2058
+ ));
2303
2059
  };
2304
2060
 
2305
- const useStyles$8 = core.createStyles((theme) => ({
2061
+ const useStyles$6 = core.createStyles((theme) => ({
2306
2062
  form: {
2307
2063
  backgroundColor: theme.white,
2308
2064
  padding: theme.spacing.xl,
@@ -2365,7 +2121,7 @@ const useStyles$8 = core.createStyles((theme) => ({
2365
2121
  }
2366
2122
  }));
2367
2123
  const StartAnonymousLesson = (props) => {
2368
- const { classes } = useStyles$8();
2124
+ const { classes } = useStyles$6();
2369
2125
  const [name, setName] = React__namespace.useState("");
2370
2126
  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(
2371
2127
  core.TextInput,
@@ -2422,7 +2178,7 @@ function TaskCard(props) {
2422
2178
  ));
2423
2179
  }
2424
2180
 
2425
- const useStyles$7 = core.createStyles((theme) => ({
2181
+ const useStyles$5 = core.createStyles((theme) => ({
2426
2182
  title: {
2427
2183
  fontSize: 34,
2428
2184
  fontWeight: 900,
@@ -2436,7 +2192,7 @@ const useStyles$7 = core.createStyles((theme) => ({
2436
2192
  }
2437
2193
  }));
2438
2194
  const UserInfo = (props) => {
2439
- const { classes } = useStyles$7();
2195
+ const { classes } = useStyles$5();
2440
2196
  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));
2441
2197
  };
2442
2198
 
@@ -2468,7 +2224,7 @@ var __objRest$1 = (source, exclude) => {
2468
2224
  }
2469
2225
  return target;
2470
2226
  };
2471
- const useStyles$6 = core.createStyles((theme) => ({
2227
+ const useStyles$4 = core.createStyles((theme) => ({
2472
2228
  card: {
2473
2229
  height: 240,
2474
2230
  backgroundSize: "cover",
@@ -2513,7 +2269,7 @@ const TenantBanner = (_a) => {
2513
2269
  "className",
2514
2270
  "code"
2515
2271
  ]);
2516
- const { classes, cx, theme } = useStyles$6();
2272
+ const { classes, cx, theme } = useStyles$4();
2517
2273
  const handleCopy = async () => {
2518
2274
  if (!code)
2519
2275
  return;
@@ -2560,7 +2316,7 @@ const TenantBanner = (_a) => {
2560
2316
  );
2561
2317
  };
2562
2318
 
2563
- const useStyles$5 = core.createStyles((theme) => ({
2319
+ const useStyles$3 = core.createStyles((theme) => ({
2564
2320
  action: {
2565
2321
  backgroundColor: "inherit",
2566
2322
  ":hover": {
@@ -2579,7 +2335,7 @@ const useStyles$5 = core.createStyles((theme) => ({
2579
2335
  }
2580
2336
  }));
2581
2337
  const TrialHome = (props) => {
2582
- const { classes } = useStyles$5();
2338
+ const { classes } = useStyles$3();
2583
2339
  return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true }, /* @__PURE__ */ React__namespace.createElement(core.Badge, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React__namespace.createElement(
2584
2340
  core.Button,
2585
2341
  {
@@ -2609,8 +2365,8 @@ const TrialHome = (props) => {
2609
2365
  };
2610
2366
 
2611
2367
  var __defProp$6 = Object.defineProperty;
2612
- var __defProps$5 = Object.defineProperties;
2613
- var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2368
+ var __defProps$6 = Object.defineProperties;
2369
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
2614
2370
  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
2615
2371
  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
2616
2372
  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -2626,7 +2382,7 @@ var __spreadValues$6 = (a, b) => {
2626
2382
  }
2627
2383
  return a;
2628
2384
  };
2629
- var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2385
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2630
2386
  var __objRest = (source, exclude) => {
2631
2387
  var target = {};
2632
2388
  for (var prop in source)
@@ -2639,7 +2395,7 @@ var __objRest = (source, exclude) => {
2639
2395
  }
2640
2396
  return target;
2641
2397
  };
2642
- const useStyles$4 = core.createStyles((theme, { checked }) => ({
2398
+ const useStyles$2 = core.createStyles((theme, { checked }) => ({
2643
2399
  button: {
2644
2400
  display: "flex",
2645
2401
  alignItems: "center",
@@ -2681,10 +2437,10 @@ function ImageCheckbox(_a) {
2681
2437
  finalValue: false,
2682
2438
  onChange
2683
2439
  });
2684
- const { classes, cx } = useStyles$4({ checked: value });
2440
+ const { classes, cx } = useStyles$2({ checked: value });
2685
2441
  return /* @__PURE__ */ React__namespace.createElement(
2686
2442
  core.UnstyledButton,
2687
- __spreadProps$5(__spreadValues$6({}, others), {
2443
+ __spreadProps$6(__spreadValues$6({}, others), {
2688
2444
  onClick: () => handleChange(!value),
2689
2445
  className: cx(classes.button, className)
2690
2446
  }),
@@ -2705,7 +2461,7 @@ function ImageCheckbox(_a) {
2705
2461
  function SelectGrid(props) {
2706
2462
  const items = props.items.map((item) => /* @__PURE__ */ React__namespace.createElement(
2707
2463
  ImageCheckbox,
2708
- __spreadProps$5(__spreadValues$6({}, item), {
2464
+ __spreadProps$6(__spreadValues$6({}, item), {
2709
2465
  key: item.title,
2710
2466
  onChange: (checked) => props.onChange(item.title, checked)
2711
2467
  })
@@ -2724,8 +2480,8 @@ function SelectGrid(props) {
2724
2480
  }
2725
2481
 
2726
2482
  var __defProp$5 = Object.defineProperty;
2727
- var __defProps$4 = Object.defineProperties;
2728
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2483
+ var __defProps$5 = Object.defineProperties;
2484
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2729
2485
  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
2730
2486
  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
2731
2487
  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
@@ -2741,8 +2497,8 @@ var __spreadValues$5 = (a, b) => {
2741
2497
  }
2742
2498
  return a;
2743
2499
  };
2744
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2745
- const useStyles$3 = core.createStyles((theme) => ({
2500
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2501
+ const useStyles$1 = core.createStyles((theme) => ({
2746
2502
  wrapper: {
2747
2503
  minHeight: "100%",
2748
2504
  boxSizing: "border-box",
@@ -2805,7 +2561,7 @@ const OPTIONS = [
2805
2561
  { description: "project-based learning", title: "Project-Based Learning", icon: icons.IconTools }
2806
2562
  ];
2807
2563
  const TrialRegistration = (props) => {
2808
- const { classes } = useStyles$3();
2564
+ const { classes } = useStyles$1();
2809
2565
  const [firstName, setFirstName] = React__namespace.useState("");
2810
2566
  const [lastName, setLastName] = React__namespace.useState("");
2811
2567
  const [organization, setOrganization] = React__namespace.useState({ organizationId: "", displayName: "" });
@@ -2851,7 +2607,7 @@ const TrialRegistration = (props) => {
2851
2607
  label: "School/Organization Name",
2852
2608
  placeholder: "What's the name of your school?",
2853
2609
  data: props.organizations.map((o) => {
2854
- return __spreadProps$4(__spreadValues$5({}, o), { value: o.displayName });
2610
+ return __spreadProps$5(__spreadValues$5({}, o), { value: o.displayName });
2855
2611
  }),
2856
2612
  onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
2857
2613
  onChange: (next) => {
@@ -2863,7 +2619,7 @@ const TrialRegistration = (props) => {
2863
2619
  SelectGrid,
2864
2620
  {
2865
2621
  items: OPTIONS,
2866
- onChange: (e, checked) => setInterests(__spreadProps$4(__spreadValues$5({}, interests), { [e]: checked }))
2622
+ onChange: (e, checked) => setInterests(__spreadProps$5(__spreadValues$5({}, interests), { [e]: checked }))
2867
2623
  }
2868
2624
  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
2869
2625
  core.Button,
@@ -2902,8 +2658,8 @@ const AdminProvider = (props) => {
2902
2658
  };
2903
2659
 
2904
2660
  var __defProp$4 = Object.defineProperty;
2905
- var __defProps$3 = Object.defineProperties;
2906
- var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
2661
+ var __defProps$4 = Object.defineProperties;
2662
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2907
2663
  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
2908
2664
  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
2909
2665
  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -2919,8 +2675,8 @@ var __spreadValues$4 = (a, b) => {
2919
2675
  }
2920
2676
  return a;
2921
2677
  };
2922
- var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
2923
- const useStyles$2 = core.createStyles((theme, props) => ({
2678
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2679
+ const useStyles = core.createStyles((theme, props) => ({
2924
2680
  footer: {
2925
2681
  paddingTop: theme.spacing.md,
2926
2682
  paddingBottom: theme.spacing.md,
@@ -3007,7 +2763,7 @@ const useStyles$2 = core.createStyles((theme, props) => ({
3007
2763
  }
3008
2764
  }));
3009
2765
  const App = (props) => {
3010
- const { classes } = useStyles$2(props);
2766
+ const { classes } = useStyles(props);
3011
2767
  const account = useAccount(props.account, props.accounts, props.onAccountChange);
3012
2768
  return /* @__PURE__ */ React__namespace.createElement(
3013
2769
  core.AppShell,
@@ -3015,7 +2771,7 @@ const App = (props) => {
3015
2771
  padding: "xs",
3016
2772
  navbar: props.navbar && /* @__PURE__ */ React__namespace.createElement(
3017
2773
  Navbar,
3018
- __spreadProps$3(__spreadValues$4({}, props.navbar.props), {
2774
+ __spreadProps$4(__spreadValues$4({}, props.navbar.props), {
3019
2775
  onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
3020
2776
  })
3021
2777
  ),
@@ -3109,61 +2865,52 @@ function Table$3(props) {
3109
2865
  if (props.items.length === 0) {
3110
2866
  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.");
3111
2867
  }
3112
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
3113
- reactRouterDom.Link,
3114
- {
3115
- key: row.badgeId,
3116
- to: row.href,
3117
- className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
3118
- },
3119
- /* @__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)),
3120
- /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
3121
- )));
2868
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => {
2869
+ var _a;
2870
+ return /* @__PURE__ */ React__namespace.createElement(
2871
+ reactRouterDom.Link,
2872
+ {
2873
+ key: row.pathwayId,
2874
+ to: row.href,
2875
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
2876
+ },
2877
+ /* @__PURE__ */ React__namespace.createElement(Emblem, { imageURL: row.imageURL, alt: row.name, size: "sm", icon: icons.IconRoute, accent: "cyan" }),
2878
+ /* @__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), !!((_a = row.displayTags) == null ? void 0 : _a.length) && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 flex flex-wrap gap-1.5" }, row.displayTags.map((tag) => /* @__PURE__ */ React__namespace.createElement("span", { key: tag, className: "rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold text-slate-500" }, tag)))),
2879
+ !!row.numberOfBadges && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-24 shrink-0 text-right text-xs text-slate-500" }, row.numberOfBadges, " badge", row.numberOfBadges === 1 ? "" : "s"),
2880
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
2881
+ );
2882
+ }));
3122
2883
  }
3123
2884
 
3124
2885
  const Pathways = (props) => {
3125
2886
  return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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 }));
3126
2887
  };
3127
2888
 
3128
- const useStyles$1 = core.createStyles((theme) => ({
3129
- button: {
3130
- borderTopRightRadius: 0,
3131
- borderBottomRightRadius: 0,
3132
- marginLeft: 0,
3133
- marginRight: 0
3134
- },
3135
- menuControl: {
3136
- borderTopLeftRadius: 0,
3137
- borderBottomLeftRadius: 0,
3138
- border: 0,
3139
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
3140
- }
3141
- }));
3142
2889
  const SplitButton$1 = (props) => {
3143
- const { classes, theme } = useStyles$1();
3144
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
3145
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
3146
- core.Button,
2890
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
2891
+ reactRouterDom.Link,
3147
2892
  {
3148
- component: reactRouterDom.Link,
3149
2893
  to: props.href,
3150
- className: classes.button,
3151
- variant: "gradient"
2894
+ 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 no-underline hover:bg-slate-50"
3152
2895
  },
3153
2896
  "Preview"
3154
2897
  ), /* @__PURE__ */ React__namespace.createElement(
3155
- core.Button,
2898
+ "button",
3156
2899
  {
3157
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
3158
- onClick: props.onCopyLinkClick
2900
+ type: "button",
2901
+ onClick: props.onCopyLinkClick,
2902
+ 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"
3159
2903
  },
2904
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
3160
2905
  "Copy link"
3161
2906
  ), /* @__PURE__ */ React__namespace.createElement(
3162
- core.Button,
2907
+ "button",
3163
2908
  {
3164
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14 }),
3165
- onClick: props.onExportDataClick
2909
+ type: "button",
2910
+ onClick: props.onExportDataClick,
2911
+ 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)]"
3166
2912
  },
2913
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 13, stroke: 2 }),
3167
2914
  "Export data (.csv)"
3168
2915
  ));
3169
2916
  };
@@ -3172,11 +2919,12 @@ function Stack$1(props) {
3172
2919
  if (props.items.length === 0) {
3173
2920
  return null;
3174
2921
  }
3175
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href, color: "dark.4", weight: "bold", size: "md" }, row.badgeName)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
3176
- return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
2922
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-2" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("div", { key: row.badgeName, className: "flex items-center justify-between gap-4 py-1.5" }, /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: row.href, className: "text-sm font-bold text-dark-blue-400 no-underline hover:underline" }, row.badgeName), row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-mint-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
3177
2923
  }
3178
2924
 
3179
2925
  var __defProp$3 = Object.defineProperty;
2926
+ var __defProps$3 = Object.defineProperties;
2927
+ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
3180
2928
  var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
3181
2929
  var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
3182
2930
  var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -3192,7 +2940,10 @@ var __spreadValues$3 = (a, b) => {
3192
2940
  }
3193
2941
  return a;
3194
2942
  };
2943
+ var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
3195
2944
  function Table$2(props) {
2945
+ const [expanded, setExpanded] = React__namespace.useState({});
2946
+ const categories = props.categories || [];
3196
2947
  const preparedItems = React__namespace.useMemo(() => {
3197
2948
  return (props.items || []).map((item) => __spreadValues$3(__spreadValues$3({}, item), item.categoryPoints));
3198
2949
  }, [props.items]);
@@ -3208,55 +2959,26 @@ function Table$2(props) {
3208
2959
  }
3209
2960
  );
3210
2961
  }
3211
- const sortStatus = {
3212
- columnAccessor: sortConfig.key,
3213
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3214
- };
3215
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
3216
- mantineDatatable.DataTable,
3217
- {
3218
- verticalSpacing: "sm",
3219
- sx: { minWidth: 700 },
3220
- withBorder: false,
3221
- borderRadius: "sm",
3222
- withColumnBorders: true,
3223
- striped: true,
3224
- highlightOnHover: true,
3225
- records: sortedItems,
3226
- idAccessor: "userId",
3227
- sortStatus,
3228
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3229
- columns: [
3230
- {
3231
- accessor: "name",
3232
- title: "Student Name",
3233
- sortable: true,
3234
- titleStyle: { whiteSpace: "nowrap" },
3235
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm", noWrap: true }, /* @__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)))
3236
- },
3237
- {
3238
- accessor: "isComplete",
3239
- title: "Status",
3240
- sortable: true,
3241
- titleStyle: { whiteSpace: "nowrap" },
3242
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: row.isComplete ? "blue" : "red", variant: "filled" }, row.isComplete ? "Complete" : "Incomplete")
3243
- },
3244
- ...props.categories.map((category) => ({
3245
- accessor: category.categoryId,
3246
- title: category.name,
3247
- sortable: true,
3248
- titleStyle: { whiteSpace: "nowrap" },
3249
- render: (row) => {
3250
- var _a;
3251
- return /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "blue", variant: "filled" }, (_a = row[category.categoryId]) != null ? _a : 0, " pts");
3252
- }
3253
- }))
3254
- ],
3255
- rowExpansion: {
3256
- content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$1, { items: record.badges })
3257
- }
3258
- }
3259
- ));
2962
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
2963
+ 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("isComplete"), className: "w-28 shrink-0 text-center hover:text-slate-600" }, "Status", indicator("isComplete")), categories.map((category) => /* @__PURE__ */ React__namespace.createElement("button", { key: category.categoryId, onClick: () => requestSort(category.categoryId), className: "w-24 shrink-0 text-center hover:text-slate-600" }, category.name, indicator(category.categoryId))), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
2964
+ var _a;
2965
+ const isOpen = !!expanded[row.userId];
2966
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
2967
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(
2968
+ "div",
2969
+ {
2970
+ onClick: () => setExpanded(__spreadProps$3(__spreadValues$3({}, expanded), { [row.userId]: !isOpen })),
2971
+ className: "flex cursor-pointer items-center gap-4 p-4"
2972
+ },
2973
+ /* @__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-mint-400/20 text-xs font-bold text-dark-blue-400" }, initials), /* @__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))),
2974
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-28 shrink-0 text-center" }, row.isComplete ? /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-mint-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Complete") : /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, "Incomplete")),
2975
+ categories.map((category) => {
2976
+ var _a2;
2977
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: category.categoryId, className: "w-24 shrink-0 text-center" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "rounded-full bg-sky-blue-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, (_a2 = row[category.categoryId]) != null ? _a2 : 0, " pts"));
2978
+ }),
2979
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
2980
+ ), isOpen && /* @__PURE__ */ React__namespace.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React__namespace.createElement(Stack$1, { items: row.badges })));
2981
+ }));
3260
2982
  }
3261
2983
 
3262
2984
  function Table$1(props) {
@@ -3272,138 +2994,60 @@ function Table$1(props) {
3272
2994
  }
3273
2995
  );
3274
2996
  }
3275
- const sortStatus = {
3276
- columnAccessor: sortConfig.key,
3277
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3278
- };
3279
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
3280
- mantineDatatable.DataTable,
2997
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
2998
+ 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("button", { onClick: () => requestSort("badgeName"), className: "flex-1 text-left hover:text-slate-600" }, "Badge Name", indicator("badgeName")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("percentageCompletion"), className: "w-36 shrink-0 text-right hover:text-slate-600" }, "Badge Completion", indicator("percentageCompletion"))), sortedItems.map((row) => /* @__PURE__ */ React__namespace.createElement(
2999
+ reactRouterDom.Link,
3281
3000
  {
3282
- verticalSpacing: "sm",
3283
- withBorder: false,
3284
- borderRadius: "sm",
3285
- sx: { minWidth: 700 },
3286
- highlightOnHover: true,
3287
- striped: true,
3288
- records: sortedItems,
3289
- idAccessor: "badgeId",
3290
- sortStatus,
3291
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3292
- columns: [
3293
- {
3294
- accessor: "badgeName",
3295
- title: "Badge Name",
3296
- sortable: true,
3297
- render: (row) => /* @__PURE__ */ React__namespace.createElement(
3298
- core.Text,
3299
- {
3300
- component: reactRouterDom.Link,
3301
- to: row.href,
3302
- sx: (theme) => ({
3303
- color: theme.colorScheme === "dark" ? theme.white : theme.black,
3304
- textDecoration: "none",
3305
- fontWeight: 500,
3306
- "&:hover": {
3307
- textDecoration: "underline",
3308
- color: theme.colors.blue[6]
3309
- }
3310
- })
3311
- },
3312
- row.badgeName
3313
- )
3314
- },
3315
- {
3316
- accessor: "percentageCompletion",
3317
- title: "Badge Completion",
3318
- sortable: true,
3319
- render: (row) => {
3320
- const roundedValue = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
3321
- return `${roundedValue}%`;
3322
- }
3323
- }
3324
- ]
3325
- }
3326
- ));
3001
+ key: row.badgeId,
3002
+ to: row.href,
3003
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
3004
+ },
3005
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1 text-sm font-bold text-dark-blue-400" }, row.badgeName),
3006
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-36 shrink-0 text-right text-xs text-slate-500" }, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")
3007
+ )));
3327
3008
  }
3328
3009
 
3329
- const useStyles = core.createStyles((theme) => ({
3330
- title: {
3331
- fontSize: 34,
3332
- fontWeight: 900,
3333
- [theme.fn.smallerThan("sm")]: {
3334
- fontSize: 24
3335
- }
3336
- },
3337
- description: {
3338
- maxWidth: 600
3339
- }
3340
- }));
3010
+ const TABS$1 = [
3011
+ { label: "By Badge", value: "badges" },
3012
+ { label: "By student", value: "students" }
3013
+ ];
3341
3014
  const Pathway = (props) => {
3342
- const { classes } = useStyles();
3015
+ var _a;
3343
3016
  const [tab, setTab] = React.useState("badges");
3344
3017
  const numberOfStudents = props.students.length;
3345
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
3346
3018
  const numberOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
3347
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, 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(
3348
- core.Badge,
3349
- {
3350
- variant: "filled",
3351
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
3352
- size: "lg"
3353
- },
3354
- "Back"
3355
- )), /* @__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.title || "Pathway"), /* @__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(
3019
+ const criteria = props.criteria || {};
3020
+ const criteriaCategories = (props.categories || []).filter((c) => criteria[c.categoryId] !== void 0);
3021
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex 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: "flex items-start gap-4" }, /* @__PURE__ */ React__namespace.createElement(Emblem, { imageURL: props.imageURL, alt: props.title, size: "lg", icon: icons.IconRoute, accent: "cyan" }), /* @__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.title || "Pathway"), !!((_a = props.displayTags) == null ? void 0 : _a.length) && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap gap-1.5" }, props.displayTags.map((tag) => /* @__PURE__ */ React__namespace.createElement("span", { key: tag, className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, tag))), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description"), criteriaCategories.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap items-center gap-1.5 pt-0.5" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, "Criteria"), criteriaCategories.map((c) => /* @__PURE__ */ React__namespace.createElement("span", { key: c.categoryId, className: "rounded-full bg-sky-blue-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, c.name, ": ", criteria[c.categoryId], "+", c.maxPoints ? ` of ${c.maxPoints}` : "", " pts"))))), !props.trial && /* @__PURE__ */ React__namespace.createElement(
3356
3022
  SplitButton$1,
3357
3023
  {
3358
3024
  href: props.href,
3359
3025
  onCopyLinkClick: props.onCopyLinkClick,
3360
3026
  onExportDataClick: props.onExportDataClick
3361
3027
  }
3362
- ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
3028
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
3363
3029
  {
3364
3030
  title: props.trial ? "BADGES SUBMITTED" : "PATHWAY COMPLETION",
3365
- value: props.trial ? 0 : numberOfBadgesEarned,
3366
- unit: props.trial ? "" : ""
3031
+ value: props.trial ? 0 : numberOfBadgesEarned
3367
3032
  }
3368
- ] }), !props.trial && /* @__PURE__ */ React__namespace.createElement(
3369
- core.Select,
3033
+ ] }), !props.trial && /* @__PURE__ */ React__namespace.createElement("div", { className: "relative w-full max-w-xs" }, /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
3034
+ "select",
3370
3035
  {
3371
- clearable: true,
3372
- clearButtonLabel: "Clear class selection",
3373
- size: "sm",
3374
- placeholder: "Select a class",
3375
- nothingFound: "No options",
3376
3036
  value: props.classId,
3377
- onChange: props.onClassChange,
3378
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, null),
3379
- data: props.classes.map((g) => {
3380
- return { value: g.classId, label: g.name };
3381
- })
3382
- }
3383
- ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, !props.trial && /* @__PURE__ */ React__namespace.createElement(
3384
- Tabs,
3385
- {
3386
- value: tab,
3387
- data: [
3388
- { label: "By Badge", value: "badges" },
3389
- { label: "By student", value: "students" }
3390
- ],
3391
- onChange: setTab
3392
- }
3393
- ), (!!props.trial || tab === "badges") && /* @__PURE__ */ React__namespace.createElement(
3394
- Table$1,
3395
- {
3396
- loading: props.loading,
3397
- items: props.badges
3398
- }
3399
- ), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(
3400
- Table$2,
3037
+ onChange: (e) => props.onClassChange(e.target.value),
3038
+ className: "w-full appearance-none rounded-lg border border-slate-200 bg-white py-2 pl-9 pr-4 text-sm text-dark-blue-400 focus:border-sky-blue-400 focus:outline-none"
3039
+ },
3040
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
3041
+ props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, c.name))
3042
+ )), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, !props.trial && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$1.map((t) => /* @__PURE__ */ React__namespace.createElement(
3043
+ "button",
3401
3044
  {
3402
- loading: props.loading,
3403
- items: props.students,
3404
- categories: props.categories
3405
- }
3406
- )))))));
3045
+ key: t.value,
3046
+ onClick: () => setTab(t.value),
3047
+ 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"}`
3048
+ },
3049
+ t.label
3050
+ ))), (!!props.trial || tab === "badges") && /* @__PURE__ */ React__namespace.createElement(Table$1, { loading: props.loading, items: props.badges }), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(Table$2, { loading: props.loading, items: props.students, categories: props.categories })));
3407
3051
  };
3408
3052
 
3409
3053
  const SplitButton = (props) => {