@local-civics/mgmt-ui 0.1.214 → 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 +28 -2
  2. package/dist/index.js +594 -944
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +596 -946
  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}.mx-auto{margin-left:auto;margin-right:auto}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-1\\.5{margin-top:.375rem}.ml-\\[29px\\]{margin-left:29px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-full{height:100%}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-9{height:2.25rem}.h-screen{height:100vh}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-7{width:1.75rem}.w-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-36{width:9rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-\\[440px\\]{width:440px}.w-40{width:10rem}.w-screen{width:100vw}.w-\\[230px\\]{width:230px}.w-24{width:6rem}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-\\[1100px\\]{max-width:1100px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[18px\\]{gap:18px}.gap-5{gap:1.25rem}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-3{gap:.75rem}.gap-3\\.5{gap:.875rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-y-4{row-gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-sky-blue-400\\/30{border-color:rgba(59,208,242,.3)}.border-mint-400\\/30{border-color:rgba(30,226,175,.3)}.border-gold-400\\/30{border-color:rgba(255,212,77,.3)}.border-transparent{border-color:transparent}.border-l-sky-blue-400{--tw-border-opacity:1;border-left-color:rgb(59 208 242/var(--tw-border-opacity))}.border-l-mint-400{--tw-border-opacity:1;border-left-color:rgb(30 226 175/var(--tw-border-opacity))}.border-l-gold-400{--tw-border-opacity:1;border-left-color:rgb(255 212 77/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-blue-400{--tw-gradient-from:#3bd0f2;--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mint-400{--tw-gradient-from:#1ee2af;--tw-gradient-to:rgba(30,226,175,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gold-400{--tw-gradient-from:#ffd44d;--tw-gradient-to:rgba(255,212,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-dark-blue-600{--tw-gradient-from:#0a0f2e;--tw-gradient-to:rgba(10,15,46,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-blue-400\\/15{--tw-gradient-from:rgba(59,208,242,.15);--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-dark-blue-400{--tw-gradient-to:rgba(35,42,58,0);--tw-gradient-stops:var(--tw-gradient-from),#232a3a,var(--tw-gradient-to)}.to-dark-blue-400{--tw-gradient-to:#232a3a}.to-\\[\\#f5c300\\]{--tw-gradient-to:#f5c300}.to-sky-blue-400{--tw-gradient-to:#3bd0f2}.to-mint-400\\/15{--tw-gradient-to:rgba(30,226,175,.15)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-8{padding:2rem}.p-4{padding:1rem}.p-1{padding:.25rem}.p-5{padding:1.25rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.py-\\[18px\\]{padding-bottom:18px;padding-top:18px}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-proxima{font-family:ProximaNova}.text-\\[15\\.5px\\]{font-size:15.5px}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-\\[11px\\]{font-size:11px}.text-\\[28px\\]{font-size:28px}.text-\\[12\\.5px\\]{font-size:12.5px}.text-base{font-size:1rem;line-height:1.5rem}.text-\\[11\\.5px\\]{font-size:11.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-dark-blue-400{--tw-text-opacity:1;color:rgb(35 42 58/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-gold-400{--tw-text-opacity:1;color:rgb(255 212 77/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\]{--tw-shadow:0 3px 12px rgba(255,212,77,.35);--tw-shadow-colored:0 3px 12px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{--tw-shadow:0 2px 10px rgba(30,226,175,.15);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{border-style:solid;border-width:0}button{background-color:transparent;background-image:none;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-transform:none}.placeholder\\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:scale-\\[1\\.02\\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-sky-blue-400:focus{--tw-border-opacity:1;border-color:rgb(59 208 242/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\\:opacity-50:disabled{opacity:.5}";
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 }) {
@@ -145,25 +144,25 @@ function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened,
145
144
  ), hasLinks && opened && /* @__PURE__ */ React__namespace.createElement("div", { className: "ml-[29px] mt-0.5 flex flex-col gap-0.5 border-l border-slate-100 pl-2.5" }, items));
146
145
  }
147
146
 
148
- var __defProp$e = Object.defineProperty;
149
- var __defProps$a = Object.defineProperties;
150
- var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
151
- var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
152
- var __hasOwnProp$e = Object.prototype.hasOwnProperty;
153
- var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
154
- var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
155
- var __spreadValues$e = (a, b) => {
147
+ var __defProp$f = Object.defineProperty;
148
+ var __defProps$c = Object.defineProperties;
149
+ var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
150
+ var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
151
+ var __hasOwnProp$f = Object.prototype.hasOwnProperty;
152
+ var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
153
+ var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
154
+ var __spreadValues$f = (a, b) => {
156
155
  for (var prop in b || (b = {}))
157
- if (__hasOwnProp$e.call(b, prop))
158
- __defNormalProp$e(a, prop, b[prop]);
159
- if (__getOwnPropSymbols$e)
160
- for (var prop of __getOwnPropSymbols$e(b)) {
161
- if (__propIsEnum$e.call(b, prop))
162
- __defNormalProp$e(a, prop, b[prop]);
156
+ if (__hasOwnProp$f.call(b, prop))
157
+ __defNormalProp$f(a, prop, b[prop]);
158
+ if (__getOwnPropSymbols$f)
159
+ for (var prop of __getOwnPropSymbols$f(b)) {
160
+ if (__propIsEnum$f.call(b, prop))
161
+ __defNormalProp$f(a, prop, b[prop]);
163
162
  }
164
163
  return a;
165
164
  };
166
- var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(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,12 +189,12 @@ function Navbar(props) {
190
189
  }
191
190
  return /* @__PURE__ */ React__namespace.createElement(
192
191
  LinksGroup,
193
- __spreadProps$a(__spreadValues$e(__spreadValues$e({
192
+ __spreadProps$c(__spreadValues$f(__spreadValues$f({
194
193
  key: item.label,
195
194
  active: props.active
196
195
  }, item), context), {
197
196
  links: (item.links || []).map((link) => {
198
- return __spreadValues$e(__spreadValues$e({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
197
+ return __spreadValues$f(__spreadValues$f({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
199
198
  })
200
199
  })
201
200
  );
@@ -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 }) {
@@ -489,28 +486,29 @@ function useSortableData(items, config = { key: "", direction: null }) {
489
486
  return { items: sortedItems, requestSort, sortConfig };
490
487
  }
491
488
 
492
- var __defProp$d = Object.defineProperty;
493
- var __defProps$9 = Object.defineProperties;
494
- var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
495
- var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
496
- var __hasOwnProp$d = Object.prototype.hasOwnProperty;
497
- var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
498
- var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
499
- var __spreadValues$d = (a, b) => {
489
+ var __defProp$e = Object.defineProperty;
490
+ var __defProps$b = Object.defineProperties;
491
+ var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
492
+ var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
493
+ var __hasOwnProp$e = Object.prototype.hasOwnProperty;
494
+ var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
495
+ var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
496
+ var __spreadValues$e = (a, b) => {
500
497
  for (var prop in b || (b = {}))
501
- if (__hasOwnProp$d.call(b, prop))
502
- __defNormalProp$d(a, prop, b[prop]);
503
- if (__getOwnPropSymbols$d)
504
- for (var prop of __getOwnPropSymbols$d(b)) {
505
- if (__propIsEnum$d.call(b, prop))
506
- __defNormalProp$d(a, prop, b[prop]);
498
+ if (__hasOwnProp$e.call(b, prop))
499
+ __defNormalProp$e(a, prop, b[prop]);
500
+ if (__getOwnPropSymbols$e)
501
+ for (var prop of __getOwnPropSymbols$e(b)) {
502
+ if (__propIsEnum$e.call(b, prop))
503
+ __defNormalProp$e(a, prop, b[prop]);
507
504
  }
508
505
  return a;
509
506
  };
510
- var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(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$9(__spreadValues$d({}, 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, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
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: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Project-sized skills acquisition and standards alignment.")), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2.5 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(icons.IconSearch, { size: 15, stroke: 1.75, className: "text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
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(
@@ -823,7 +771,7 @@ function Table$d(props) {
823
771
 
824
772
  const Dashboard = (props) => {
825
773
  const [tab, setTab] = React.useState("students");
826
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h3" }, "Dashboard"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm", mt: "md" }, "Track your students\u2019 pathway progress")), /* @__PURE__ */ React__namespace.createElement(core.Stack, 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, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
774
+ return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h3" }, "Dashboard"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm", mt: "md" }, "Track your students\u2019 pathway progress")), /* @__PURE__ */ React__namespace.createElement(core.Stack, 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, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
827
775
  {
828
776
  title: "# OF STUDENTS",
829
777
  value: props.students.length
@@ -905,7 +853,26 @@ const Dashboard = (props) => {
905
853
  )))))));
906
854
  };
907
855
 
908
- const openDeleteModal = (student, onDelete) => modals.openConfirmModal({
856
+ var __defProp$d = Object.defineProperty;
857
+ var __defProps$a = Object.defineProperties;
858
+ var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
859
+ var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
860
+ var __hasOwnProp$d = Object.prototype.hasOwnProperty;
861
+ var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
862
+ var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
863
+ var __spreadValues$d = (a, b) => {
864
+ for (var prop in b || (b = {}))
865
+ if (__hasOwnProp$d.call(b, prop))
866
+ __defNormalProp$d(a, prop, b[prop]);
867
+ if (__getOwnPropSymbols$d)
868
+ for (var prop of __getOwnPropSymbols$d(b)) {
869
+ if (__propIsEnum$d.call(b, prop))
870
+ __defNormalProp$d(a, prop, b[prop]);
871
+ }
872
+ return a;
873
+ };
874
+ var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
875
+ const openDeleteModal$1 = (student, onDelete) => modals.openConfirmModal({
909
876
  title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
910
877
  centered: true,
911
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."),
@@ -914,24 +881,32 @@ const openDeleteModal = (student, onDelete) => modals.openConfirmModal({
914
881
  onConfirm: () => onDelete(student)
915
882
  });
916
883
  function Table$c(props) {
884
+ const preparedItems = React__namespace.useMemo(() => {
885
+ return props.items.map((item) => __spreadProps$a(__spreadValues$d({}, item), {
886
+ fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
887
+ }));
888
+ }, [props.items]);
889
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
917
890
  if (props.loading) {
918
891
  return /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
919
892
  }
920
893
  if (props.items.length === 0) {
921
894
  return /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "You have not rostered any students yet.");
922
895
  }
923
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] gap-3 border-b border-slate-100 px-5 py-3 text-[10px] font-bold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("div", null, "Name"), /* @__PURE__ */ React__namespace.createElement("div", null, "Role"), /* @__PURE__ */ React__namespace.createElement("div", null, "Badges Earned"), /* @__PURE__ */ React__namespace.createElement("div", null, "Lessons Completed"), /* @__PURE__ */ React__namespace.createElement("div", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("div", null)), props.items.map((row, i) => {
896
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
897
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] gap-3 border-b border-slate-100 px-5 py-3 text-[10px] font-bold uppercase tracking-wide text-slate-500" }, /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("fullName"), className: "flex items-center text-left hover:text-slate-700" }, "Name", indicator("fullName")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("isAdmin"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Role", indicator("isAdmin")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("badgesEarned"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Badges Earned", indicator("badgesEarned")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("lessonsCompleted"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Lessons Completed", indicator("lessonsCompleted")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("hasAccount"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Account Created?", indicator("hasAccount")), /* @__PURE__ */ React__namespace.createElement("div", null)), sortedItems.map((row, i) => {
924
898
  var _a, _b;
925
899
  const name = row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email;
926
900
  const initials = (((_a = row.givenName) == null ? void 0 : _a[0]) || row.email[0] || "?") + (((_b = row.familyName) == null ? void 0 : _b[0]) || "");
901
+ 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)));
927
902
  return /* @__PURE__ */ React__namespace.createElement(
928
903
  "div",
929
904
  {
930
905
  key: row.email,
931
- className: `grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
906
+ className: `grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < sortedItems.length - 1 ? "border-b border-slate-100" : ""}`
932
907
  },
933
- /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: row.href, className: "flex min-w-0 items-center gap-2.5 no-underline" }, row.avatar ? /* @__PURE__ */ React__namespace.createElement("img", { className: "h-8 w-8 shrink-0 rounded-full object-cover", src: row.avatar, alt: name }) : /* @__PURE__ */ React__namespace.createElement("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-mint-400/20 text-[10px] font-bold text-dark-blue-400" }, initials.toUpperCase()), /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-[10.5px] text-slate-400" }, row.email))),
934
- /* @__PURE__ */ React__namespace.createElement(
908
+ 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),
909
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React__namespace.createElement(
935
910
  "select",
936
911
  {
937
912
  disabled: row.readonly,
@@ -941,16 +916,16 @@ function Table$c(props) {
941
916
  },
942
917
  /* @__PURE__ */ React__namespace.createElement("option", { value: "student" }, "Student"),
943
918
  /* @__PURE__ */ React__namespace.createElement("option", { value: "educator" }, "Educator")
944
- ),
945
- /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.badgesEarned),
946
- /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.lessonsCompleted),
947
- /* @__PURE__ */ React__namespace.createElement("div", null, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { size: 16, stroke: 3, className: "text-mint-400" })),
919
+ )),
920
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, row.badgesEarned),
921
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, row.lessonsCompleted),
922
+ /* @__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" })),
948
923
  /* @__PURE__ */ React__namespace.createElement("div", null, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(
949
924
  "button",
950
925
  {
951
926
  type: "button",
952
- onClick: () => openDeleteModal(row, props.onDelete),
953
- className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-300 hover:bg-red-50 hover:text-red-500"
927
+ onClick: () => openDeleteModal$1(row, props.onDelete),
928
+ className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
954
929
  },
955
930
  /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 14, stroke: 1.75 })
956
931
  ))
@@ -959,8 +934,8 @@ function Table$c(props) {
959
934
  }
960
935
 
961
936
  var __defProp$c = Object.defineProperty;
962
- var __defProps$8 = Object.defineProperties;
963
- var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
937
+ var __defProps$9 = Object.defineProperties;
938
+ var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
964
939
  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
965
940
  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
966
941
  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -976,7 +951,7 @@ var __spreadValues$c = (a, b) => {
976
951
  }
977
952
  return a;
978
953
  };
979
- var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
954
+ var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
980
955
  const Class = (props) => {
981
956
  const [opened, setOpened] = React.useState(false);
982
957
  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
@@ -988,8 +963,8 @@ const Class = (props) => {
988
963
  padding: "xl",
989
964
  size: "xl"
990
965
  },
991
- /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$8(__spreadValues$c({}, props), { close: () => setOpened(false) }))
992
- ), /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex max-w-5xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React__namespace.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, props.description || "No description")), !props.loading && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
966
+ /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$9(__spreadValues$c({}, props), { close: () => setOpened(false) }))
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(
993
968
  "button",
994
969
  {
995
970
  type: "button",
@@ -1223,7 +1198,7 @@ var __spreadValues$b = (a, b) => {
1223
1198
  }
1224
1199
  return a;
1225
1200
  };
1226
- const useStyles$f = core.createStyles((theme) => ({
1201
+ const useStyles$7 = core.createStyles((theme) => ({
1227
1202
  title: {
1228
1203
  fontSize: 34,
1229
1204
  fontWeight: 900,
@@ -1236,7 +1211,7 @@ const useStyles$f = core.createStyles((theme) => ({
1236
1211
  }
1237
1212
  }));
1238
1213
  const Classes = (props) => {
1239
- const { classes } = useStyles$f();
1214
+ const { classes } = useStyles$7();
1240
1215
  const form$1 = form.useForm({
1241
1216
  initialValues: {
1242
1217
  classId: "",
@@ -1278,7 +1253,7 @@ const Classes = (props) => {
1278
1253
  placeholder: "A class for my first period English students"
1279
1254
  }, form$1.getInputProps("description"))
1280
1255
  )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))
1281
- ), /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Organize people into classes"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Create classes, cohorts, or custom subgroups")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
1256
+ ), /* @__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.Badge, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Organize people into classes"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Create classes, cohorts, or custom subgroups")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
1282
1257
  core.Button,
1283
1258
  {
1284
1259
  onClick: () => setOpened(true),
@@ -1307,24 +1282,6 @@ const Classes = (props) => {
1307
1282
  ))))));
1308
1283
  };
1309
1284
 
1310
- const useStyles$e = core.createStyles((theme) => ({
1311
- title: {
1312
- fontSize: 34,
1313
- fontWeight: 900,
1314
- marginTop: 16,
1315
- [theme.fn.smallerThan("sm")]: {
1316
- fontSize: 24
1317
- }
1318
- },
1319
- description: {
1320
- maxWidth: 600
1321
- }
1322
- }));
1323
- const UserInfo = (props) => {
1324
- const { classes } = useStyles$e();
1325
- return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
1326
- };
1327
-
1328
1285
  function Table$a(props) {
1329
1286
  if (props.items.length === 0) {
1330
1287
  return /* @__PURE__ */ React__namespace.createElement(
@@ -1337,28 +1294,15 @@ function Table$a(props) {
1337
1294
  }
1338
1295
  );
1339
1296
  }
1340
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1341
- mantineDatatable.DataTable,
1297
+ 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(
1298
+ "div",
1342
1299
  {
1343
- verticalSpacing: "sm",
1344
- sx: { minWidth: 700 },
1345
- withBorder: false,
1346
- borderRadius: "sm",
1347
- withColumnBorders: true,
1348
- striped: true,
1349
- highlightOnHover: true,
1350
- records: props.items,
1351
- idAccessor: "badgeId",
1352
- columns: [{
1353
- accessor: "name",
1354
- title: "Badge Name",
1355
- render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Text, null, row.badgeName))
1356
- }, {
1357
- accessor: "status",
1358
- 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"))
1359
- }]
1360
- }
1361
- ));
1300
+ key: row.badgeId || row.badgeName,
1301
+ className: `flex items-center justify-between gap-4 px-5 py-4 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
1302
+ },
1303
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.badgeName),
1304
+ /* @__PURE__ */ React__namespace.createElement("span", { className: `shrink-0 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide ${row.isComplete ? "bg-mint-100 text-dark-blue-400" : "bg-slate-100 text-slate-500"}` }, row.isComplete ? "Complete" : "Incomplete")
1305
+ )));
1362
1306
  }
1363
1307
 
1364
1308
  function Table$9(props) {
@@ -1373,8 +1317,26 @@ function Table$9(props) {
1373
1317
  }
1374
1318
  );
1375
1319
  }
1376
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.questionName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.questionName), /* @__PURE__ */ React__namespace.createElement("td", null, row.answer.join(","))));
1377
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Question"), /* @__PURE__ */ React__namespace.createElement("th", null, "Answer"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
1320
+ const groups = [];
1321
+ const groupByLessonId = {};
1322
+ props.items.forEach((row) => {
1323
+ let group = groupByLessonId[row.lessonId];
1324
+ if (!group) {
1325
+ group = { lessonId: row.lessonId, lessonName: row.lessonName, badgeName: row.badgeName, href: row.href, items: [] };
1326
+ groupByLessonId[row.lessonId] = group;
1327
+ groups.push(group);
1328
+ }
1329
+ group.items.push(row);
1330
+ });
1331
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, groups.map((group) => /* @__PURE__ */ React__namespace.createElement("div", { key: group.lessonId, className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "border-b border-slate-100 px-5 py-4" }, /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: group.href, className: "text-sm font-bold text-dark-blue-400 no-underline hover:underline" }, group.lessonName), group.badgeName && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs text-slate-500" }, group.badgeName)), group.items.map((row, i) => /* @__PURE__ */ React__namespace.createElement(
1332
+ "div",
1333
+ {
1334
+ key: row.questionName,
1335
+ className: `px-5 py-4 ${i < group.items.length - 1 ? "border-b border-slate-100" : ""}`
1336
+ },
1337
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-semibold text-slate-500" }, row.questionName),
1338
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs text-slate-600" }, row.answer.join(", "))
1339
+ )))));
1378
1340
  }
1379
1341
 
1380
1342
  function Table$8(props) {
@@ -1389,74 +1351,48 @@ function Table$8(props) {
1389
1351
  }
1390
1352
  );
1391
1353
  }
1392
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, row.rating.toLocaleString())));
1393
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
1354
+ 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(
1355
+ "div",
1356
+ {
1357
+ key: row.lessonId || row.lessonName,
1358
+ className: `flex items-start justify-between gap-4 px-5 py-4 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
1359
+ },
1360
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0" }, /* @__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.badgeName && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs text-slate-500" }, row.badgeName), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 text-xs text-slate-600" }, row.reflection)),
1361
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "shrink-0 rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, row.rating.toLocaleString())
1362
+ )));
1394
1363
  }
1395
1364
 
1365
+ const TABS$2 = [
1366
+ { label: "My badges", value: "badges" },
1367
+ { label: "My answers", value: "answers" },
1368
+ { label: "My reflections", value: "reflections" }
1369
+ ];
1396
1370
  const Student = (props) => {
1397
1371
  const [tab, setTab] = React.useState("badges");
1398
1372
  const numberOfBadgesCompleted = props.badges.length > 0 ? props.badges.filter((b) => b.isComplete).length : 0;
1399
- const TEMPORARY_numberOfLessonsCompleted = props.lessons.filter((l) => l.isComplete).length;
1400
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
1401
- core.Badge,
1402
- {
1403
- variant: "filled",
1404
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
1405
- size: "lg"
1406
- },
1407
- "Back"
1408
- )), /* @__PURE__ */ React__namespace.createElement(
1409
- UserInfo,
1410
- {
1411
- variant: "compact",
1412
- name: props.name,
1413
- impactStatement: props.impactStatement
1414
- }
1415
- ))), /* @__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: "lg" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1373
+ const numberOfLessonsCompleted = props.lessons.filter((l) => l.isComplete).length;
1374
+ 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.name || "Student"), props.impactStatement && /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.impactStatement)), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1416
1375
  {
1417
1376
  title: "PROBLEMS SOLVED",
1418
1377
  value: props.numberOfProblemsSolved
1419
1378
  },
1420
1379
  {
1421
1380
  title: "LESSON COMPLETION",
1422
- value: TEMPORARY_numberOfLessonsCompleted,
1423
- unit: ""
1381
+ value: numberOfLessonsCompleted
1424
1382
  },
1425
1383
  {
1426
1384
  title: "BADGE COMPLETION",
1427
- value: numberOfBadgesCompleted,
1428
- unit: ""
1429
- }
1430
- ] }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
1431
- Tabs,
1432
- {
1433
- value: tab,
1434
- data: [
1435
- { label: "My badges", value: "badges" },
1436
- { label: "My answers", value: "answers" },
1437
- { label: "My reflections", value: "reflections" }
1438
- ],
1439
- onChange: setTab
1440
- }
1441
- ), tab === "badges" && /* @__PURE__ */ React__namespace.createElement(
1442
- Table$a,
1443
- {
1444
- loading: props.loading,
1445
- items: props.badges
1446
- }
1447
- ), tab === "answers" && /* @__PURE__ */ React__namespace.createElement(
1448
- Table$9,
1449
- {
1450
- loading: props.loading,
1451
- items: props.answers
1385
+ value: numberOfBadgesCompleted
1452
1386
  }
1453
- ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
1454
- Table$8,
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(
1388
+ "button",
1455
1389
  {
1456
- loading: props.loading,
1457
- items: props.reflections
1458
- }
1459
- ))))));
1390
+ key: t.value,
1391
+ onClick: () => setTab(t.value),
1392
+ 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"}`
1393
+ },
1394
+ t.label
1395
+ ))), tab === "badges" && /* @__PURE__ */ React__namespace.createElement(Table$a, { loading: props.loading, items: props.badges }), tab === "answers" && /* @__PURE__ */ React__namespace.createElement(Table$9, { loading: props.loading, items: props.answers }), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(Table$8, { loading: props.loading, items: props.reflections }));
1460
1396
  };
1461
1397
 
1462
1398
  const ACCENT_BORDER = {
@@ -1498,7 +1434,7 @@ const Home = (props) => {
1498
1434
  console.error("Failed to copy code", err);
1499
1435
  }
1500
1436
  };
1501
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex w-full max-w-[1100px] flex-col gap-5" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-stretch gap-5" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-[28px] font-extrabold text-dark-blue-400" }, props.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 text-[12.5px] text-slate-400" }, props.impactStatement)), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-[440px] shrink-0 flex-col justify-between gap-3 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 p-5" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-base font-extrabold text-white" }, props.organization.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-white/70" }, props.organization.description)), accessCode && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "text-[11px] text-white/70" }, "Community code: ", accessCode), /* @__PURE__ */ React__namespace.createElement(
1437
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-full flex-col gap-5" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-stretch gap-5" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-[28px] font-extrabold text-dark-blue-400" }, props.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 text-[12.5px] text-slate-400" }, props.impactStatement)), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-[440px] shrink-0 flex-col justify-between gap-3 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 p-5" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-base font-extrabold text-white" }, props.organization.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-white/70" }, props.organization.description)), accessCode && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "text-[11px] text-white/70" }, "Community code: ", accessCode), /* @__PURE__ */ React__namespace.createElement(
1502
1438
  "button",
1503
1439
  {
1504
1440
  onClick: onCopyAccessCode,
@@ -1566,65 +1502,35 @@ function Table$7(props) {
1566
1502
  }
1567
1503
  );
1568
1504
  }
1569
- const sortStatus = {
1570
- columnAccessor: sortConfig.key,
1571
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1572
- };
1573
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1574
- mantineDatatable.DataTable,
1575
- {
1576
- records: sortedItems,
1577
- sortStatus,
1578
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1579
- columns: [
1580
- { accessor: "studentName", title: "Student Name", sortable: true },
1581
- { accessor: "reflection", title: "Reflection" },
1582
- { accessor: "rating", title: "Rating", sortable: true }
1583
- ]
1584
- }
1585
- ));
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)))));
1586
1507
  }
1587
1508
 
1588
- const useStyles$d = core.createStyles((theme) => ({
1589
- button: {
1590
- borderTopRightRadius: 0,
1591
- borderBottomRightRadius: 0,
1592
- marginLeft: 0,
1593
- marginRight: 0
1594
- },
1595
- menuControl: {
1596
- borderTopLeftRadius: 0,
1597
- borderBottomLeftRadius: 0,
1598
- border: 0,
1599
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
1600
- }
1601
- }));
1602
1509
  const SplitButton$3 = (props) => {
1603
- const { classes, theme } = useStyles$d();
1604
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
1605
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
1606
- core.Button,
1510
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
1511
+ reactRouterDom.Link,
1607
1512
  {
1608
- component: reactRouterDom.Link,
1609
1513
  to: props.href,
1610
- className: classes.button,
1611
- 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"
1612
1515
  },
1613
1516
  "Preview"
1614
1517
  ), /* @__PURE__ */ React__namespace.createElement(
1615
- core.Button,
1518
+ "button",
1616
1519
  {
1617
- variant: "gradient",
1618
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
1619
- 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"
1620
1523
  },
1524
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
1621
1525
  "Copy link"
1622
1526
  ), /* @__PURE__ */ React__namespace.createElement(
1623
- core.Button,
1527
+ "button",
1624
1528
  {
1625
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14 }),
1626
- 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)]"
1627
1532
  },
1533
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 13, stroke: 2 }),
1628
1534
  "Export data (.csv)"
1629
1535
  ));
1630
1536
  };
@@ -1633,13 +1539,12 @@ function Stack$3(props) {
1633
1539
  if (props.items.length === 0) {
1634
1540
  return null;
1635
1541
  }
1636
- 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.")));
1637
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
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."))));
1638
1543
  }
1639
1544
 
1640
1545
  var __defProp$a = Object.defineProperty;
1641
- var __defProps$7 = Object.defineProperties;
1642
- var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
1546
+ var __defProps$8 = Object.defineProperties;
1547
+ var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
1643
1548
  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
1644
1549
  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
1645
1550
  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -1655,18 +1560,15 @@ var __spreadValues$a = (a, b) => {
1655
1560
  }
1656
1561
  return a;
1657
1562
  };
1658
- var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
1563
+ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
1659
1564
  function Table$6(props) {
1565
+ const [expanded, setExpanded] = React__namespace.useState({});
1660
1566
  const preparedItems = React__namespace.useMemo(() => {
1661
- return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
1567
+ return props.items.map((item) => __spreadProps$8(__spreadValues$a({}, item), {
1662
1568
  status: item.isComplete ? 2 : item.isStarted ? 1 : 0
1663
1569
  }));
1664
1570
  }, [props.items]);
1665
1571
  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
1666
- const sortStatus = {
1667
- columnAccessor: sortConfig.key,
1668
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1669
- };
1670
1572
  if (props.items.length === 0) {
1671
1573
  return /* @__PURE__ */ React__namespace.createElement(
1672
1574
  PlaceholderBanner,
@@ -1678,36 +1580,22 @@ function Table$6(props) {
1678
1580
  }
1679
1581
  );
1680
1582
  }
1681
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1682
- mantineDatatable.DataTable,
1683
- {
1684
- verticalSpacing: "sm",
1685
- sx: { minWidth: 700 },
1686
- withBorder: false,
1687
- borderRadius: "sm",
1688
- withColumnBorders: true,
1689
- striped: true,
1690
- highlightOnHover: true,
1691
- idAccessor: "userId",
1692
- records: sortedItems,
1693
- sortStatus,
1694
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1695
- columns: [{
1696
- accessor: "name",
1697
- title: "Student Name",
1698
- sortable: true,
1699
- 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))))
1700
- }, {
1701
- accessor: "status",
1702
- title: "Status",
1703
- sortable: true,
1704
- 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"))
1705
- }],
1706
- rowExpansion: {
1707
- content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$3, { href: record.href, items: record.answers })
1708
- }
1709
- }
1710
- ));
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
+ }));
1711
1599
  }
1712
1600
 
1713
1601
  function Stack$2(props) {
@@ -1738,7 +1626,7 @@ function Stack$2(props) {
1738
1626
  }
1739
1627
  );
1740
1628
  }
1741
- const rows = props.items.map((row) => {
1629
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => {
1742
1630
  if (row.chart) {
1743
1631
  const labelMap = {};
1744
1632
  const choices = row.choices || [];
@@ -1750,7 +1638,7 @@ function Stack$2(props) {
1750
1638
  labelMap[r] = labelMap[r] ? labelMap[r] + 1 : 1;
1751
1639
  }
1752
1640
  }));
1753
- 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(
1754
1642
  reactCharts.Chart,
1755
1643
  {
1756
1644
  options: {
@@ -1767,64 +1655,24 @@ function Stack$2(props) {
1767
1655
  secondaryAxes
1768
1656
  }
1769
1657
  }
1770
- ))));
1658
+ )));
1771
1659
  }
1772
- 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) => {
1773
1661
  const answerText = a.join("\n");
1774
- return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React__namespace.createElement(core.Text, null, answerText));
1775
- })))));
1776
- });
1777
- 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
+ }));
1778
1665
  }
1779
1666
  const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
1780
1667
 
1781
- const useStyles$c = core.createStyles((theme) => ({
1782
- title: {
1783
- fontSize: 34,
1784
- fontWeight: 900,
1785
- [theme.fn.smallerThan("sm")]: {
1786
- fontSize: 24
1787
- }
1788
- },
1789
- description: {
1790
- maxWidth: 600
1791
- }
1792
- }));
1668
+ const initialsFor = (name) => name.split(/[ -]/).map((n) => n.charAt(0)).join("").toUpperCase();
1793
1669
  const Lesson = (props) => {
1794
- const { classes } = useStyles$c();
1795
1670
  const [tab, setTab] = React.useState("question");
1796
1671
  const numberOfStudents = props.students.length;
1797
1672
  const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
1798
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
1799
1673
  const contributors = props.contributors || [];
1800
- const avatars = contributors.slice(0, 5).map((u, i) => {
1801
- const fullName = u.name;
1802
- let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
1803
- const src = AvatarInit.initialAvatar({
1804
- background: "#1c7ed6",
1805
- color: "#fff",
1806
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1807
- fontSize: 10,
1808
- fontWeight: 250,
1809
- size: 30,
1810
- initials
1811
- });
1812
- return /* @__PURE__ */ React__namespace.createElement(core.Avatar, { key: i, src, radius: "xl" });
1813
- });
1814
- const remainingUsers = contributors.slice(5).length;
1815
- if (remainingUsers) {
1816
- const initials = "+" + compact(remainingUsers);
1817
- const src = AvatarInit.initialAvatar({
1818
- background: "#1c7ed6",
1819
- color: "#fff",
1820
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1821
- fontSize: 10,
1822
- fontWeight: 250,
1823
- size: 30,
1824
- initials
1825
- });
1826
- avatars.push(/* @__PURE__ */ React__namespace.createElement(core.Avatar, { src, radius: "xl" }));
1827
- }
1674
+ const visibleContributors = contributors.slice(0, 5);
1675
+ const remainingContributors = contributors.slice(5).length;
1828
1676
  const tabs = props.trial ? [
1829
1677
  { label: "By question", value: "question" },
1830
1678
  { label: "By student", value: "students" }
@@ -1833,15 +1681,7 @@ const Lesson = (props) => {
1833
1681
  { label: "By student", value: "students" },
1834
1682
  { label: "By reflection", value: "reflections" }
1835
1683
  ];
1836
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
1837
- core.Badge,
1838
- {
1839
- variant: "filled",
1840
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
1841
- size: "lg"
1842
- },
1843
- "Back"
1844
- )), /* @__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(
1845
1685
  SplitButton$3,
1846
1686
  {
1847
1687
  href: props.href,
@@ -1849,58 +1689,36 @@ const Lesson = (props) => {
1849
1689
  onCopyLinkClick: props.onCopyLinkClick,
1850
1690
  onExportDataClick: props.onExportDataClick
1851
1691
  }
1852
- ))))), /* @__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(
1853
- StatsGroup,
1854
- {
1855
- data: [
1856
- {
1857
- title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1858
- value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons,
1859
- unit: props.trial ? "" : ""
1860
- }
1861
- ]
1862
- }
1863
- ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar.Group, { spacing: "sm" }, avatars)), !props.trial && /* @__PURE__ */ React__namespace.createElement(
1864
- core.Select,
1865
- {
1866
- clearable: true,
1867
- clearButtonLabel: "Clear class selection",
1868
- size: "sm",
1869
- placeholder: "Select a class",
1870
- nothingFound: "No options",
1871
- value: props.classId,
1872
- onChange: props.onClassChange,
1873
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, null),
1874
- data: props.classes.map((g) => {
1875
- return { value: g.classId, label: g.name };
1876
- })
1877
- }
1878
- ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
1879
- Tabs,
1692
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1880
1693
  {
1881
- value: tab,
1882
- data: tabs,
1883
- onChange: setTab
1694
+ title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1695
+ value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons
1884
1696
  }
1885
- ), tab === "question" && /* @__PURE__ */ React__namespace.createElement(
1886
- Stack$2,
1697
+ ] }), contributors.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex" }, visibleContributors.map((u, i) => /* @__PURE__ */ React__namespace.createElement(
1698
+ "div",
1887
1699
  {
1888
- loading: props.loading,
1889
- items: props.questions
1890
- }
1891
- ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
1892
- 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",
1893
1706
  {
1894
- loading: props.loading,
1895
- items: props.reflections
1896
- }
1897
- ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
1898
- 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",
1899
1715
  {
1900
- loading: props.loading,
1901
- items: props.students
1902
- }
1903
- )))))));
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 })));
1904
1722
  };
1905
1723
 
1906
1724
  function Table$5(props) {
@@ -1910,7 +1728,7 @@ function Table$5(props) {
1910
1728
  if (props.items.length === 0) {
1911
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.");
1912
1730
  }
1913
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, "Lesson"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
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(
1914
1732
  reactRouterDom.Link,
1915
1733
  {
1916
1734
  key: row.lessonId,
@@ -1918,13 +1736,14 @@ function Table$5(props) {
1918
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"
1919
1737
  },
1920
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"),
1921
1740
  /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
1922
1741
  /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
1923
1742
  )));
1924
1743
  }
1925
1744
 
1926
1745
  const Lessons = (props) => {
1927
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Bite-sized activities and learning experiences accelerating students achievement")), /* @__PURE__ */ React__namespace.createElement("div", { className: "relative" }, /* @__PURE__ */ React__namespace.createElement(icons.IconSearch, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
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(
1928
1747
  "input",
1929
1748
  {
1930
1749
  type: "text",
@@ -1935,37 +1754,23 @@ const Lessons = (props) => {
1935
1754
  )), /* @__PURE__ */ React__namespace.createElement(Table$5, { loading: props.loading, items: props.lessons }));
1936
1755
  };
1937
1756
 
1938
- const useStyles$b = core.createStyles((theme) => ({
1939
- title: {
1940
- fontSize: 22,
1941
- fontWeight: 900,
1942
- fontFamily: `Greycliff CF, ${theme.fontFamily}`
1943
- },
1944
- controls: {
1945
- [theme.fn.smallerThan("xs")]: {
1946
- flexDirection: "column-reverse"
1947
- }
1948
- },
1949
- control: {
1950
- [theme.fn.smallerThan("xs")]: {
1951
- width: "100%",
1952
- textAlign: "center"
1953
- }
1954
- }
1955
- }));
1956
1757
  function AccessCode(props) {
1957
- const { classes } = useStyles$b();
1958
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React__namespace.createElement(core.Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React__namespace.createElement(
1959
- 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",
1960
1760
  {
1961
- component: reactRouterDom.Link,
1962
- to: props.peopleLink,
1963
- color: "dimmed",
1964
- size: "sm",
1965
- 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)]"
1966
1771
  },
1967
- /* @__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"))
1968
- ), /* @__PURE__ */ React__namespace.createElement(core.Button, { onClick: props.onCopyCode, className: classes.control }, "Copy code"))));
1772
+ "Copy code"
1773
+ ))));
1969
1774
  }
1970
1775
 
1971
1776
  const monthNames = [
@@ -1982,46 +1787,8 @@ const monthNames = [
1982
1787
  "November",
1983
1788
  "December"
1984
1789
  ];
1985
- const useStyles$a = core.createStyles((theme) => ({
1986
- title: {
1987
- fontSize: 34,
1988
- fontWeight: 900,
1989
- [theme.fn.smallerThan("sm")]: {
1990
- fontSize: 24
1991
- }
1992
- },
1993
- description: {
1994
- maxWidth: 600
1995
- },
1996
- wrapper: {
1997
- position: "relative",
1998
- marginBottom: 30
1999
- },
2000
- dropzone: {
2001
- borderWidth: 1,
2002
- paddingBottom: 50
2003
- },
2004
- icon: {
2005
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
2006
- },
2007
- control: {
2008
- position: "absolute",
2009
- width: 250,
2010
- left: "calc(50% - 125px)",
2011
- bottom: -20
2012
- }
2013
- }));
2014
1790
  const Organization = (props) => {
2015
- const { classes } = useStyles$a();
2016
- return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
2017
- core.Badge,
2018
- {
2019
- variant: "filled",
2020
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
2021
- size: "lg"
2022
- },
2023
- "Back"
2024
- )), /* @__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: [
2025
1792
  {
2026
1793
  title: "# OF STUDENTS",
2027
1794
  value: props.numberOfStudents || 0
@@ -2035,55 +1802,43 @@ const Organization = (props) => {
2035
1802
  value: props.percentageOfAccountsActive,
2036
1803
  unit: "%"
2037
1804
  }
2038
- ] }))))));
1805
+ ] }));
2039
1806
  };
2040
1807
 
2041
- const useStyles$9 = core.createStyles((theme) => ({
2042
- button: {
2043
- borderTopRightRadius: 0,
2044
- borderBottomRightRadius: 0,
2045
- marginLeft: 0,
2046
- marginRight: 0
2047
- },
2048
- menuControl: {
2049
- borderTopLeftRadius: 0,
2050
- borderBottomLeftRadius: 0,
2051
- border: 0,
2052
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
2053
- }
2054
- }));
2055
1808
  const SplitButton$2 = (props) => {
2056
- const { classes, theme } = useStyles$9();
2057
- const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
2058
- const hasMenu = !!props.withOrganizationLink;
2059
- return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
2060
- core.Button,
1809
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
1810
+ "button",
2061
1811
  {
2062
- className: hasMenu ? classes.button : "",
2063
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 }),
2064
- 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)]"
2065
1815
  },
1816
+ /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 13, stroke: 2 }),
2066
1817
  "Add members"
2067
- ), hasMenu && /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
2068
- core.ActionIcon,
2069
- {
2070
- variant: "filled",
2071
- color: theme.primaryColor,
2072
- size: 36,
2073
- className: classes.menuControl
2074
- },
2075
- /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
2076
- )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, !!props.withOrganizationLink && /* @__PURE__ */ React__namespace.createElement(
2077
- core.Menu.Item,
1818
+ ), props.withOrganizationLink && /* @__PURE__ */ React__namespace.createElement(
1819
+ "button",
2078
1820
  {
2079
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
2080
- 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"
2081
1824
  },
1825
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
2082
1826
  "Copy organization link"
2083
- ))));
1827
+ ));
2084
1828
  };
2085
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
+ });
2086
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
+ }
2087
1842
  if (props.items.length === 0) {
2088
1843
  return /* @__PURE__ */ React__namespace.createElement(
2089
1844
  PlaceholderBanner,
@@ -2095,76 +1850,65 @@ function Table$4(props) {
2095
1850
  }
2096
1851
  );
2097
1852
  }
2098
- const openDeleteModal = (student) => modals.openConfirmModal({
2099
- title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
2100
- centered: true,
2101
- 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."),
2102
- labels: { confirm: "Remove Student", cancel: "Cancel" },
2103
- confirmProps: { color: "red" },
2104
- onConfirm: () => props.onDelete && props.onDelete(student)
2105
- });
2106
- 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(
2107
- core.Select,
2108
- {
2109
- size: "sm",
2110
- value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
2111
- onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
2112
- data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }, { value: "admin", label: "Admin" }]
2113
- }
2114
- ))), /* @__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 }))))));
2115
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Role"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "# of Classes"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
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
+ }));
2116
1890
  }
2117
1891
 
2118
1892
  var __defProp$9 = Object.defineProperty;
2119
- var __defProps$6 = Object.defineProperties;
2120
- var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
1893
+ var __defProps$7 = Object.defineProperties;
1894
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
2121
1895
  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
2122
1896
  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
2123
1897
  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
2124
- var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2125
- var __spreadValues$9 = (a, b) => {
2126
- for (var prop in b || (b = {}))
2127
- if (__hasOwnProp$9.call(b, prop))
2128
- __defNormalProp$9(a, prop, b[prop]);
2129
- if (__getOwnPropSymbols$9)
2130
- for (var prop of __getOwnPropSymbols$9(b)) {
2131
- if (__propIsEnum$9.call(b, prop))
2132
- __defNormalProp$9(a, prop, b[prop]);
2133
- }
2134
- return a;
2135
- };
2136
- var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2137
- const useStyles$8 = core.createStyles((theme) => ({
2138
- title: {
2139
- fontSize: 34,
2140
- fontWeight: 900,
2141
- [theme.fn.smallerThan("sm")]: {
2142
- fontSize: 24
2143
- }
2144
- },
2145
- description: {
2146
- maxWidth: 600
2147
- },
2148
- wrapper: {
2149
- position: "relative",
2150
- marginBottom: 30
2151
- },
2152
- dropzone: {
2153
- borderWidth: 1,
2154
- paddingBottom: 50
2155
- },
2156
- icon: {
2157
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
2158
- },
2159
- control: {
2160
- position: "absolute",
2161
- width: 250,
2162
- left: "calc(50% - 125px)",
2163
- bottom: -20
2164
- }
2165
- }));
1898
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1899
+ var __spreadValues$9 = (a, b) => {
1900
+ for (var prop in b || (b = {}))
1901
+ if (__hasOwnProp$9.call(b, prop))
1902
+ __defNormalProp$9(a, prop, b[prop]);
1903
+ if (__getOwnPropSymbols$9)
1904
+ for (var prop of __getOwnPropSymbols$9(b)) {
1905
+ if (__propIsEnum$9.call(b, prop))
1906
+ __defNormalProp$9(a, prop, b[prop]);
1907
+ }
1908
+ return a;
1909
+ };
1910
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
2166
1911
  const People = (props) => {
2167
- const { classes } = useStyles$8();
2168
1912
  const form$1 = form.useForm({
2169
1913
  initialValues: {
2170
1914
  userId: "",
@@ -2195,12 +1939,12 @@ const People = (props) => {
2195
1939
  padding: "xl",
2196
1940
  size: "xl"
2197
1941
  },
2198
- /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$6(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
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(() => {
2199
1943
  const values = form$1.values;
2200
1944
  form$1.reset();
2201
1945
  setOpened(false);
2202
1946
  props.onCreateUsers && props.onCreateUsers([values]);
2203
- }) }, /* @__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(
2204
1948
  core.TextInput,
2205
1949
  __spreadValues$9({
2206
1950
  withAsterisk: true,
@@ -2219,23 +1963,22 @@ const People = (props) => {
2219
1963
  label: "Family name",
2220
1964
  placeholder: "Family name"
2221
1965
  }, form$1.getInputProps("familyName"))
2222
- )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
2223
- ), /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
2224
- core.Badge,
2225
- {
2226
- variant: "filled",
2227
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
2228
- size: "lg"
2229
- },
2230
- "Back"
2231
- )), /* @__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(
2232
1975
  SplitButton$2,
2233
1976
  {
2234
1977
  withOrganizationLink: props.withOrganizationLink,
2235
1978
  onAddUsersClick: () => setOpened(true),
2236
1979
  onCopyOrganizationLinkClick: props.onCopyLinkClick
2237
1980
  }
2238
- ))), /* @__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: [
2239
1982
  {
2240
1983
  title: "# OF PEOPLE",
2241
1984
  value: props.users.length
@@ -2250,14 +1993,15 @@ const People = (props) => {
2250
1993
  unit: "%",
2251
1994
  value: props.percentageRostered
2252
1995
  }
2253
- ] }), /* @__PURE__ */ React__namespace.createElement(
2254
- 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",
2255
1998
  {
1999
+ type: "text",
2256
2000
  placeholder: "Search for a people in your organization",
2257
- data: props.users.map((item) => item.email),
2258
- 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"
2259
2003
  }
2260
- ), /* @__PURE__ */ React__namespace.createElement(
2004
+ )), /* @__PURE__ */ React__namespace.createElement(
2261
2005
  Table$4,
2262
2006
  {
2263
2007
  loading: props.loading,
@@ -2265,10 +2009,9 @@ const People = (props) => {
2265
2009
  onDelete: props.onDeleteUser,
2266
2010
  onRoleChange: props.onChangeUserRole
2267
2011
  }
2268
- ))))));
2012
+ )));
2269
2013
  };
2270
2014
  const DropzoneButton = (props) => {
2271
- const { classes, theme } = useStyles$8();
2272
2015
  const openRef = React__namespace.useRef(null);
2273
2016
  const [loading, setLoading] = React__namespace.useState(false);
2274
2017
  const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -2289,32 +2032,33 @@ const DropzoneButton = (props) => {
2289
2032
  });
2290
2033
  });
2291
2034
  }, []);
2292
- 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(
2293
2036
  dropzone.Dropzone,
2294
2037
  {
2295
2038
  loading,
2296
2039
  openRef,
2297
2040
  onDrop,
2298
- className: classes.dropzone,
2299
2041
  radius: "md",
2042
+ className: "border pb-12",
2300
2043
  accept: [dropzone.MIME_TYPES.csv],
2301
2044
  maxSize: 5 * 1024 ** 2
2302
2045
  },
2303
- /* @__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(
2304
- icons.IconCloudUpload,
2305
- {
2306
- size: 50,
2307
- color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
2308
- stroke: 1.5
2309
- }
2310
- ))), /* @__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."))
2311
- ), /* @__PURE__ */ React__namespace.createElement(core.Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
2312
- var _a;
2313
- return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
2314
- } }, "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
+ ));
2315
2059
  };
2316
2060
 
2317
- const useStyles$7 = core.createStyles((theme) => ({
2061
+ const useStyles$6 = core.createStyles((theme) => ({
2318
2062
  form: {
2319
2063
  backgroundColor: theme.white,
2320
2064
  padding: theme.spacing.xl,
@@ -2377,7 +2121,7 @@ const useStyles$7 = core.createStyles((theme) => ({
2377
2121
  }
2378
2122
  }));
2379
2123
  const StartAnonymousLesson = (props) => {
2380
- const { classes } = useStyles$7();
2124
+ const { classes } = useStyles$6();
2381
2125
  const [name, setName] = React__namespace.useState("");
2382
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(
2383
2127
  core.TextInput,
@@ -2434,6 +2178,24 @@ function TaskCard(props) {
2434
2178
  ));
2435
2179
  }
2436
2180
 
2181
+ const useStyles$5 = core.createStyles((theme) => ({
2182
+ title: {
2183
+ fontSize: 34,
2184
+ fontWeight: 900,
2185
+ marginTop: 16,
2186
+ [theme.fn.smallerThan("sm")]: {
2187
+ fontSize: 24
2188
+ }
2189
+ },
2190
+ description: {
2191
+ maxWidth: 600
2192
+ }
2193
+ }));
2194
+ const UserInfo = (props) => {
2195
+ const { classes } = useStyles$5();
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));
2197
+ };
2198
+
2437
2199
  var __defProp$7 = Object.defineProperty;
2438
2200
  var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
2439
2201
  var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
@@ -2462,7 +2224,7 @@ var __objRest$1 = (source, exclude) => {
2462
2224
  }
2463
2225
  return target;
2464
2226
  };
2465
- const useStyles$6 = core.createStyles((theme) => ({
2227
+ const useStyles$4 = core.createStyles((theme) => ({
2466
2228
  card: {
2467
2229
  height: 240,
2468
2230
  backgroundSize: "cover",
@@ -2507,7 +2269,7 @@ const TenantBanner = (_a) => {
2507
2269
  "className",
2508
2270
  "code"
2509
2271
  ]);
2510
- const { classes, cx, theme } = useStyles$6();
2272
+ const { classes, cx, theme } = useStyles$4();
2511
2273
  const handleCopy = async () => {
2512
2274
  if (!code)
2513
2275
  return;
@@ -2554,7 +2316,7 @@ const TenantBanner = (_a) => {
2554
2316
  );
2555
2317
  };
2556
2318
 
2557
- const useStyles$5 = core.createStyles((theme) => ({
2319
+ const useStyles$3 = core.createStyles((theme) => ({
2558
2320
  action: {
2559
2321
  backgroundColor: "inherit",
2560
2322
  ":hover": {
@@ -2573,8 +2335,8 @@ const useStyles$5 = core.createStyles((theme) => ({
2573
2335
  }
2574
2336
  }));
2575
2337
  const TrialHome = (props) => {
2576
- const { classes } = useStyles$5();
2577
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React__namespace.createElement(
2338
+ const { classes } = useStyles$3();
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(
2578
2340
  core.Button,
2579
2341
  {
2580
2342
  className: classes.action,
@@ -2603,8 +2365,8 @@ const TrialHome = (props) => {
2603
2365
  };
2604
2366
 
2605
2367
  var __defProp$6 = Object.defineProperty;
2606
- var __defProps$5 = Object.defineProperties;
2607
- var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2368
+ var __defProps$6 = Object.defineProperties;
2369
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
2608
2370
  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
2609
2371
  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
2610
2372
  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -2620,7 +2382,7 @@ var __spreadValues$6 = (a, b) => {
2620
2382
  }
2621
2383
  return a;
2622
2384
  };
2623
- var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2385
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2624
2386
  var __objRest = (source, exclude) => {
2625
2387
  var target = {};
2626
2388
  for (var prop in source)
@@ -2633,7 +2395,7 @@ var __objRest = (source, exclude) => {
2633
2395
  }
2634
2396
  return target;
2635
2397
  };
2636
- const useStyles$4 = core.createStyles((theme, { checked }) => ({
2398
+ const useStyles$2 = core.createStyles((theme, { checked }) => ({
2637
2399
  button: {
2638
2400
  display: "flex",
2639
2401
  alignItems: "center",
@@ -2675,10 +2437,10 @@ function ImageCheckbox(_a) {
2675
2437
  finalValue: false,
2676
2438
  onChange
2677
2439
  });
2678
- const { classes, cx } = useStyles$4({ checked: value });
2440
+ const { classes, cx } = useStyles$2({ checked: value });
2679
2441
  return /* @__PURE__ */ React__namespace.createElement(
2680
2442
  core.UnstyledButton,
2681
- __spreadProps$5(__spreadValues$6({}, others), {
2443
+ __spreadProps$6(__spreadValues$6({}, others), {
2682
2444
  onClick: () => handleChange(!value),
2683
2445
  className: cx(classes.button, className)
2684
2446
  }),
@@ -2699,7 +2461,7 @@ function ImageCheckbox(_a) {
2699
2461
  function SelectGrid(props) {
2700
2462
  const items = props.items.map((item) => /* @__PURE__ */ React__namespace.createElement(
2701
2463
  ImageCheckbox,
2702
- __spreadProps$5(__spreadValues$6({}, item), {
2464
+ __spreadProps$6(__spreadValues$6({}, item), {
2703
2465
  key: item.title,
2704
2466
  onChange: (checked) => props.onChange(item.title, checked)
2705
2467
  })
@@ -2718,8 +2480,8 @@ function SelectGrid(props) {
2718
2480
  }
2719
2481
 
2720
2482
  var __defProp$5 = Object.defineProperty;
2721
- var __defProps$4 = Object.defineProperties;
2722
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2483
+ var __defProps$5 = Object.defineProperties;
2484
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2723
2485
  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
2724
2486
  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
2725
2487
  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
@@ -2735,8 +2497,8 @@ var __spreadValues$5 = (a, b) => {
2735
2497
  }
2736
2498
  return a;
2737
2499
  };
2738
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2739
- 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) => ({
2740
2502
  wrapper: {
2741
2503
  minHeight: "100%",
2742
2504
  boxSizing: "border-box",
@@ -2799,7 +2561,7 @@ const OPTIONS = [
2799
2561
  { description: "project-based learning", title: "Project-Based Learning", icon: icons.IconTools }
2800
2562
  ];
2801
2563
  const TrialRegistration = (props) => {
2802
- const { classes } = useStyles$3();
2564
+ const { classes } = useStyles$1();
2803
2565
  const [firstName, setFirstName] = React__namespace.useState("");
2804
2566
  const [lastName, setLastName] = React__namespace.useState("");
2805
2567
  const [organization, setOrganization] = React__namespace.useState({ organizationId: "", displayName: "" });
@@ -2845,7 +2607,7 @@ const TrialRegistration = (props) => {
2845
2607
  label: "School/Organization Name",
2846
2608
  placeholder: "What's the name of your school?",
2847
2609
  data: props.organizations.map((o) => {
2848
- return __spreadProps$4(__spreadValues$5({}, o), { value: o.displayName });
2610
+ return __spreadProps$5(__spreadValues$5({}, o), { value: o.displayName });
2849
2611
  }),
2850
2612
  onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
2851
2613
  onChange: (next) => {
@@ -2857,7 +2619,7 @@ const TrialRegistration = (props) => {
2857
2619
  SelectGrid,
2858
2620
  {
2859
2621
  items: OPTIONS,
2860
- onChange: (e, checked) => setInterests(__spreadProps$4(__spreadValues$5({}, interests), { [e]: checked }))
2622
+ onChange: (e, checked) => setInterests(__spreadProps$5(__spreadValues$5({}, interests), { [e]: checked }))
2861
2623
  }
2862
2624
  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
2863
2625
  core.Button,
@@ -2896,8 +2658,8 @@ const AdminProvider = (props) => {
2896
2658
  };
2897
2659
 
2898
2660
  var __defProp$4 = Object.defineProperty;
2899
- var __defProps$3 = Object.defineProperties;
2900
- var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
2661
+ var __defProps$4 = Object.defineProperties;
2662
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2901
2663
  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
2902
2664
  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
2903
2665
  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -2913,8 +2675,8 @@ var __spreadValues$4 = (a, b) => {
2913
2675
  }
2914
2676
  return a;
2915
2677
  };
2916
- var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
2917
- 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) => ({
2918
2680
  footer: {
2919
2681
  paddingTop: theme.spacing.md,
2920
2682
  paddingBottom: theme.spacing.md,
@@ -3001,7 +2763,7 @@ const useStyles$2 = core.createStyles((theme, props) => ({
3001
2763
  }
3002
2764
  }));
3003
2765
  const App = (props) => {
3004
- const { classes } = useStyles$2(props);
2766
+ const { classes } = useStyles(props);
3005
2767
  const account = useAccount(props.account, props.accounts, props.onAccountChange);
3006
2768
  return /* @__PURE__ */ React__namespace.createElement(
3007
2769
  core.AppShell,
@@ -3009,7 +2771,7 @@ const App = (props) => {
3009
2771
  padding: "xs",
3010
2772
  navbar: props.navbar && /* @__PURE__ */ React__namespace.createElement(
3011
2773
  Navbar,
3012
- __spreadProps$3(__spreadValues$4({}, props.navbar.props), {
2774
+ __spreadProps$4(__spreadValues$4({}, props.navbar.props), {
3013
2775
  onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
3014
2776
  })
3015
2777
  ),
@@ -3103,61 +2865,52 @@ function Table$3(props) {
3103
2865
  if (props.items.length === 0) {
3104
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.");
3105
2867
  }
3106
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
3107
- reactRouterDom.Link,
3108
- {
3109
- key: row.badgeId,
3110
- to: row.href,
3111
- className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
3112
- },
3113
- /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)),
3114
- /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
3115
- )));
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
+ }));
3116
2883
  }
3117
2884
 
3118
2885
  const Pathways = (props) => {
3119
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Pathways"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Explore all your unique pathway requirements in one clear space")), /* @__PURE__ */ React__namespace.createElement(Table$3, { loading: props.loading, items: props.pathways }));
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 }));
3120
2887
  };
3121
2888
 
3122
- const useStyles$1 = core.createStyles((theme) => ({
3123
- button: {
3124
- borderTopRightRadius: 0,
3125
- borderBottomRightRadius: 0,
3126
- marginLeft: 0,
3127
- marginRight: 0
3128
- },
3129
- menuControl: {
3130
- borderTopLeftRadius: 0,
3131
- borderBottomLeftRadius: 0,
3132
- border: 0,
3133
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
3134
- }
3135
- }));
3136
2889
  const SplitButton$1 = (props) => {
3137
- const { classes, theme } = useStyles$1();
3138
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
3139
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
3140
- core.Button,
2890
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
2891
+ reactRouterDom.Link,
3141
2892
  {
3142
- component: reactRouterDom.Link,
3143
2893
  to: props.href,
3144
- className: classes.button,
3145
- 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"
3146
2895
  },
3147
2896
  "Preview"
3148
2897
  ), /* @__PURE__ */ React__namespace.createElement(
3149
- core.Button,
2898
+ "button",
3150
2899
  {
3151
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
3152
- 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"
3153
2903
  },
2904
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
3154
2905
  "Copy link"
3155
2906
  ), /* @__PURE__ */ React__namespace.createElement(
3156
- core.Button,
2907
+ "button",
3157
2908
  {
3158
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14 }),
3159
- 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)]"
3160
2912
  },
2913
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 13, stroke: 2 }),
3161
2914
  "Export data (.csv)"
3162
2915
  ));
3163
2916
  };
@@ -3166,11 +2919,12 @@ function Stack$1(props) {
3166
2919
  if (props.items.length === 0) {
3167
2920
  return null;
3168
2921
  }
3169
- 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"))));
3170
- 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"))));
3171
2923
  }
3172
2924
 
3173
2925
  var __defProp$3 = Object.defineProperty;
2926
+ var __defProps$3 = Object.defineProperties;
2927
+ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
3174
2928
  var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
3175
2929
  var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
3176
2930
  var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -3186,7 +2940,10 @@ var __spreadValues$3 = (a, b) => {
3186
2940
  }
3187
2941
  return a;
3188
2942
  };
2943
+ var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
3189
2944
  function Table$2(props) {
2945
+ const [expanded, setExpanded] = React__namespace.useState({});
2946
+ const categories = props.categories || [];
3190
2947
  const preparedItems = React__namespace.useMemo(() => {
3191
2948
  return (props.items || []).map((item) => __spreadValues$3(__spreadValues$3({}, item), item.categoryPoints));
3192
2949
  }, [props.items]);
@@ -3202,55 +2959,26 @@ function Table$2(props) {
3202
2959
  }
3203
2960
  );
3204
2961
  }
3205
- const sortStatus = {
3206
- columnAccessor: sortConfig.key,
3207
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3208
- };
3209
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
3210
- mantineDatatable.DataTable,
3211
- {
3212
- verticalSpacing: "sm",
3213
- sx: { minWidth: 700 },
3214
- withBorder: false,
3215
- borderRadius: "sm",
3216
- withColumnBorders: true,
3217
- striped: true,
3218
- highlightOnHover: true,
3219
- records: sortedItems,
3220
- idAccessor: "userId",
3221
- sortStatus,
3222
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3223
- columns: [
3224
- {
3225
- accessor: "name",
3226
- title: "Student Name",
3227
- sortable: true,
3228
- titleStyle: { whiteSpace: "nowrap" },
3229
- 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)))
3230
- },
3231
- {
3232
- accessor: "isComplete",
3233
- title: "Status",
3234
- sortable: true,
3235
- titleStyle: { whiteSpace: "nowrap" },
3236
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: row.isComplete ? "blue" : "red", variant: "filled" }, row.isComplete ? "Complete" : "Incomplete")
3237
- },
3238
- ...props.categories.map((category) => ({
3239
- accessor: category.categoryId,
3240
- title: category.name,
3241
- sortable: true,
3242
- titleStyle: { whiteSpace: "nowrap" },
3243
- render: (row) => {
3244
- var _a;
3245
- return /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "blue", variant: "filled" }, (_a = row[category.categoryId]) != null ? _a : 0, " pts");
3246
- }
3247
- }))
3248
- ],
3249
- rowExpansion: {
3250
- content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$1, { items: record.badges })
3251
- }
3252
- }
3253
- ));
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
+ }));
3254
2982
  }
3255
2983
 
3256
2984
  function Table$1(props) {
@@ -3266,138 +2994,60 @@ function Table$1(props) {
3266
2994
  }
3267
2995
  );
3268
2996
  }
3269
- const sortStatus = {
3270
- columnAccessor: sortConfig.key,
3271
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3272
- };
3273
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
3274
- 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,
3275
3000
  {
3276
- verticalSpacing: "sm",
3277
- withBorder: false,
3278
- borderRadius: "sm",
3279
- sx: { minWidth: 700 },
3280
- highlightOnHover: true,
3281
- striped: true,
3282
- records: sortedItems,
3283
- idAccessor: "badgeId",
3284
- sortStatus,
3285
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3286
- columns: [
3287
- {
3288
- accessor: "badgeName",
3289
- title: "Badge Name",
3290
- sortable: true,
3291
- render: (row) => /* @__PURE__ */ React__namespace.createElement(
3292
- core.Text,
3293
- {
3294
- component: reactRouterDom.Link,
3295
- to: row.href,
3296
- sx: (theme) => ({
3297
- color: theme.colorScheme === "dark" ? theme.white : theme.black,
3298
- textDecoration: "none",
3299
- fontWeight: 500,
3300
- "&:hover": {
3301
- textDecoration: "underline",
3302
- color: theme.colors.blue[6]
3303
- }
3304
- })
3305
- },
3306
- row.badgeName
3307
- )
3308
- },
3309
- {
3310
- accessor: "percentageCompletion",
3311
- title: "Badge Completion",
3312
- sortable: true,
3313
- render: (row) => {
3314
- const roundedValue = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
3315
- return `${roundedValue}%`;
3316
- }
3317
- }
3318
- ]
3319
- }
3320
- ));
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
+ )));
3321
3008
  }
3322
3009
 
3323
- const useStyles = core.createStyles((theme) => ({
3324
- title: {
3325
- fontSize: 34,
3326
- fontWeight: 900,
3327
- [theme.fn.smallerThan("sm")]: {
3328
- fontSize: 24
3329
- }
3330
- },
3331
- description: {
3332
- maxWidth: 600
3333
- }
3334
- }));
3010
+ const TABS$1 = [
3011
+ { label: "By Badge", value: "badges" },
3012
+ { label: "By student", value: "students" }
3013
+ ];
3335
3014
  const Pathway = (props) => {
3336
- const { classes } = useStyles();
3015
+ var _a;
3337
3016
  const [tab, setTab] = React.useState("badges");
3338
3017
  const numberOfStudents = props.students.length;
3339
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
3340
3018
  const numberOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
3341
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
3342
- core.Badge,
3343
- {
3344
- variant: "filled",
3345
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
3346
- size: "lg"
3347
- },
3348
- "Back"
3349
- )), /* @__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(
3350
3022
  SplitButton$1,
3351
3023
  {
3352
3024
  href: props.href,
3353
3025
  onCopyLinkClick: props.onCopyLinkClick,
3354
3026
  onExportDataClick: props.onExportDataClick
3355
3027
  }
3356
- ))))), /* @__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: [
3357
3029
  {
3358
3030
  title: props.trial ? "BADGES SUBMITTED" : "PATHWAY COMPLETION",
3359
- value: props.trial ? 0 : numberOfBadgesEarned,
3360
- unit: props.trial ? "" : ""
3031
+ value: props.trial ? 0 : numberOfBadgesEarned
3361
3032
  }
3362
- ] }), !props.trial && /* @__PURE__ */ React__namespace.createElement(
3363
- 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",
3364
3035
  {
3365
- clearable: true,
3366
- clearButtonLabel: "Clear class selection",
3367
- size: "sm",
3368
- placeholder: "Select a class",
3369
- nothingFound: "No options",
3370
3036
  value: props.classId,
3371
- onChange: props.onClassChange,
3372
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, null),
3373
- data: props.classes.map((g) => {
3374
- return { value: g.classId, label: g.name };
3375
- })
3376
- }
3377
- ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, !props.trial && /* @__PURE__ */ React__namespace.createElement(
3378
- Tabs,
3379
- {
3380
- value: tab,
3381
- data: [
3382
- { label: "By Badge", value: "badges" },
3383
- { label: "By student", value: "students" }
3384
- ],
3385
- onChange: setTab
3386
- }
3387
- ), (!!props.trial || tab === "badges") && /* @__PURE__ */ React__namespace.createElement(
3388
- Table$1,
3389
- {
3390
- loading: props.loading,
3391
- items: props.badges
3392
- }
3393
- ), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(
3394
- 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",
3395
3044
  {
3396
- loading: props.loading,
3397
- items: props.students,
3398
- categories: props.categories
3399
- }
3400
- )))))));
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 })));
3401
3051
  };
3402
3052
 
3403
3053
  const SplitButton = (props) => {
@@ -3524,7 +3174,7 @@ function Table(props) {
3524
3174
  const initials = (name) => name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
3525
3175
  function SubmissionDetail(props) {
3526
3176
  const { student } = props;
3527
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-4 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2 text-xs text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("button", { onClick: props.onBack, className: "font-bold text-sky-blue-400 hover:underline" }, "File Locker"), /* @__PURE__ */ React__namespace.createElement("span", null, "/"), /* @__PURE__ */ React__namespace.createElement("span", { className: "font-bold text-dark-blue-400" }, student.name)), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, student.avatar ? /* @__PURE__ */ React__namespace.createElement("img", { src: student.avatar, className: "h-12 w-12 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React__namespace.createElement("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-sm font-bold text-white" }, initials(student.name)), /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-lg font-extrabold text-dark-blue-400" }, student.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-0.5 text-xs text-slate-400" }, student.email, props.context ? ` \xB7 ${props.context}` : "")), /* @__PURE__ */ React__namespace.createElement("div", { className: "shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500" }, student.submissions.length, " file", student.submissions.length === 1 ? "" : "s")), /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, "Files"), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React__namespace.createElement(Stack, { items: student.submissions }))), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React__namespace.createElement(
3177
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-full flex-col gap-4 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2 text-xs text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("button", { onClick: props.onBack, className: "font-bold text-sky-blue-400 hover:underline" }, "File Locker"), /* @__PURE__ */ React__namespace.createElement("span", null, "/"), /* @__PURE__ */ React__namespace.createElement("span", { className: "font-bold text-dark-blue-400" }, student.name)), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, student.avatar ? /* @__PURE__ */ React__namespace.createElement("img", { src: student.avatar, className: "h-12 w-12 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React__namespace.createElement("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-sm font-bold text-white" }, initials(student.name)), /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-lg font-extrabold text-dark-blue-400" }, student.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-0.5 text-xs text-slate-400" }, student.email, props.context ? ` \xB7 ${props.context}` : "")), /* @__PURE__ */ React__namespace.createElement("div", { className: "shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500" }, student.submissions.length, " file", student.submissions.length === 1 ? "" : "s")), /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, "Files"), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React__namespace.createElement(Stack, { items: student.submissions }))), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React__namespace.createElement(
3528
3178
  "button",
3529
3179
  {
3530
3180
  onClick: () => props.onNav(-1),
@@ -3726,7 +3376,7 @@ const FileLocker = (props) => {
3726
3376
  }
3727
3377
  );
3728
3378
  }
3729
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("button", { onClick: props.onBackClick, className: "flex items-center gap-1 text-xs font-bold text-sky-blue-400 hover:underline" }, /* @__PURE__ */ React__namespace.createElement(icons.IconChevronLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "mt-1.5 text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "File Locker"), /* @__PURE__ */ React__namespace.createElement("p", { className: "mt-1 text-sm text-slate-500" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React__namespace.createElement(SplitButton, { href: props.href, onCopyLinkClick: props.onCopyLinkClick, onExportDataClick: props.onExportDataClick })), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: props.trial ? [
3379
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-full flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("button", { onClick: props.onBackClick, className: "flex items-center gap-1 text-xs font-bold text-sky-blue-400 hover:underline" }, /* @__PURE__ */ React__namespace.createElement(icons.IconChevronLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "mt-1.5 text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "File Locker"), /* @__PURE__ */ React__namespace.createElement("p", { className: "mt-1 text-sm text-slate-500" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React__namespace.createElement(SplitButton, { href: props.href, onCopyLinkClick: props.onCopyLinkClick, onExportDataClick: props.onExportDataClick })), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: props.trial ? [
3730
3380
  { title: "LESSONS SUBMITTED", value: props.lessonsCompleted || 0 }
3731
3381
  ] : [
3732
3382
  { title: "FILES", value: numberOfFiles },