@local-civics/mgmt-ui 0.1.215 → 0.1.217

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 +29 -2
  2. package/dist/index.js +655 -951
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +657 -953
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -5,12 +5,10 @@ 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');
14
12
  var reactCharts = require('react-charts');
15
13
  var hooks = require('@mantine/hooks');
16
14
 
@@ -61,7 +59,7 @@ function styleInject(css, ref) {
61
59
  }
62
60
  }
63
61
 
64
- var css_248z = "@font-face{font-family:ProximaNova;src:url(https://cdn.localcivics.io/fonts/ProximaNova.otf) format(\"opentype\")}@font-face{font-family:ProximaNova;font-weight:700;src:url(https://cdn.localcivics.io/fonts/ProximaNovaBold.otf) format(\"opentype\")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\\!relative{position:relative!important}.left-3\\.5{left:.875rem}.top-1\\/2{top:50%}.left-3{left:.75rem}.m-3{margin:.75rem}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-1\\.5{margin-top:.375rem}.ml-\\[29px\\]{margin-left:29px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-full{height:100%}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-9{height:2.25rem}.h-screen{height:100vh}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-7{width:1.75rem}.w-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-36{width:9rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-\\[440px\\]{width:440px}.w-40{width:10rem}.w-screen{width:100vw}.w-\\[230px\\]{width:230px}.w-24{width:6rem}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[18px\\]{gap:18px}.gap-5{gap:1.25rem}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-3{gap:.75rem}.gap-3\\.5{gap:.875rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-y-4{row-gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-sky-blue-400\\/30{border-color:rgba(59,208,242,.3)}.border-mint-400\\/30{border-color:rgba(30,226,175,.3)}.border-gold-400\\/30{border-color:rgba(255,212,77,.3)}.border-transparent{border-color:transparent}.border-l-sky-blue-400{--tw-border-opacity:1;border-left-color:rgb(59 208 242/var(--tw-border-opacity))}.border-l-mint-400{--tw-border-opacity:1;border-left-color:rgb(30 226 175/var(--tw-border-opacity))}.border-l-gold-400{--tw-border-opacity:1;border-left-color:rgb(255 212 77/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.bg-gold-100{--tw-bg-opacity:1;background-color:rgb(255 248 214/var(--tw-bg-opacity))}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-blue-400{--tw-gradient-from:#3bd0f2;--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mint-400{--tw-gradient-from:#1ee2af;--tw-gradient-to:rgba(30,226,175,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gold-400{--tw-gradient-from:#ffd44d;--tw-gradient-to:rgba(255,212,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-dark-blue-600{--tw-gradient-from:#0a0f2e;--tw-gradient-to:rgba(10,15,46,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-blue-400\\/15{--tw-gradient-from:rgba(59,208,242,.15);--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-dark-blue-400{--tw-gradient-to:rgba(35,42,58,0);--tw-gradient-stops:var(--tw-gradient-from),#232a3a,var(--tw-gradient-to)}.to-dark-blue-400{--tw-gradient-to:#232a3a}.to-\\[\\#f5c300\\]{--tw-gradient-to:#f5c300}.to-sky-blue-400{--tw-gradient-to:#3bd0f2}.to-mint-400\\/15{--tw-gradient-to:rgba(30,226,175,.15)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-8{padding:2rem}.p-4{padding:1rem}.p-1{padding:.25rem}.p-5{padding:1.25rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.py-\\[18px\\]{padding-bottom:18px;padding-top:18px}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-proxima{font-family:ProximaNova}.text-\\[15\\.5px\\]{font-size:15.5px}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-\\[11px\\]{font-size:11px}.text-\\[28px\\]{font-size:28px}.text-\\[12\\.5px\\]{font-size:12.5px}.text-base{font-size:1rem;line-height:1.5rem}.text-\\[11\\.5px\\]{font-size:11.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-dark-blue-400{--tw-text-opacity:1;color:rgb(35 42 58/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-gold-400{--tw-text-opacity:1;color:rgb(255 212 77/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\]{--tw-shadow:0 3px 12px rgba(255,212,77,.35);--tw-shadow-colored:0 3px 12px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{--tw-shadow:0 2px 10px rgba(30,226,175,.15);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{border-style:solid;border-width:0}button{background-color:transparent;background-image:none;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-transform:none}.placeholder\\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:scale-\\[1\\.02\\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-sky-blue-400:focus{--tw-border-opacity:1;border-color:rgb(59 208 242/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\\:opacity-50:disabled{opacity:.5}";
62
+ 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-\\[1\\.5fr_2fr_1fr_0\\.6fr\\]{grid-template-columns:1.5fr 2fr 1fr .6fr}.grid-cols-\\[1\\.5fr_2fr_0\\.8fr\\]{grid-template-columns:1.5fr 2fr .8fr}.grid-cols-\\[1fr_3fr\\]{grid-template-columns:1fr 3fr}.grid-cols-\\[1fr_1fr_2fr_0\\.8fr\\]{grid-template-columns:1fr 1fr 2fr .8fr}.grid-cols-\\[2fr_1fr\\]{grid-template-columns:2fr 1fr}.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}.pl-10{padding-left:2.5rem}.pb-2{padding-bottom:.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-sky-blue-400:hover{--tw-text-opacity:1;color:rgb(59 208 242/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
63
  styleInject(css_248z);
66
64
 
67
65
  function UserButton({ image, name, email }) {
@@ -145,25 +143,25 @@ function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened,
145
143
  ), 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
144
  }
147
145
 
148
- var __defProp$f = Object.defineProperty;
149
- var __defProps$b = Object.defineProperties;
150
- var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
151
- var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
152
- var __hasOwnProp$f = Object.prototype.hasOwnProperty;
153
- var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
154
- var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
155
- var __spreadValues$f = (a, b) => {
146
+ var __defProp$g = Object.defineProperty;
147
+ var __defProps$d = Object.defineProperties;
148
+ var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
149
+ var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
150
+ var __hasOwnProp$g = Object.prototype.hasOwnProperty;
151
+ var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
152
+ var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
153
+ var __spreadValues$g = (a, b) => {
156
154
  for (var prop in b || (b = {}))
157
- if (__hasOwnProp$f.call(b, prop))
158
- __defNormalProp$f(a, prop, b[prop]);
159
- if (__getOwnPropSymbols$f)
160
- for (var prop of __getOwnPropSymbols$f(b)) {
161
- if (__propIsEnum$f.call(b, prop))
162
- __defNormalProp$f(a, prop, b[prop]);
155
+ if (__hasOwnProp$g.call(b, prop))
156
+ __defNormalProp$g(a, prop, b[prop]);
157
+ if (__getOwnPropSymbols$g)
158
+ for (var prop of __getOwnPropSymbols$g(b)) {
159
+ if (__propIsEnum$g.call(b, prop))
160
+ __defNormalProp$g(a, prop, b[prop]);
163
161
  }
164
162
  return a;
165
163
  };
166
- var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
164
+ var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
167
165
  const data = [
168
166
  { label: "Home", icon: icons.IconHome2, accent: "cyan" },
169
167
  { label: "Dashboard", icon: icons.IconGauge, accent: "mint" },
@@ -190,12 +188,12 @@ function Navbar(props) {
190
188
  }
191
189
  return /* @__PURE__ */ React__namespace.createElement(
192
190
  LinksGroup,
193
- __spreadProps$b(__spreadValues$f(__spreadValues$f({
191
+ __spreadProps$d(__spreadValues$g(__spreadValues$g({
194
192
  key: item.label,
195
193
  active: props.active
196
194
  }, item), context), {
197
195
  links: (item.links || []).map((link) => {
198
- return __spreadValues$f(__spreadValues$f({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
196
+ return __spreadValues$g(__spreadValues$g({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
199
197
  })
200
198
  })
201
199
  );
@@ -215,7 +213,7 @@ const UtilLink = (props) => {
215
213
  );
216
214
  };
217
215
 
218
- const useStyles$k = core.createStyles((theme) => ({
216
+ const useStyles$9 = core.createStyles((theme) => ({
219
217
  inner: {
220
218
  paddingTop: theme.spacing.xl,
221
219
  paddingBottom: theme.spacing.xl * 4
@@ -251,7 +249,7 @@ const useStyles$k = core.createStyles((theme) => ({
251
249
  }
252
250
  }));
253
251
  const GettingStarted = (props) => {
254
- const { classes } = useStyles$k();
252
+ const { classes } = useStyles$9();
255
253
  return /* @__PURE__ */ React__namespace.createElement(
256
254
  core.Modal,
257
255
  {
@@ -265,7 +263,7 @@ const GettingStarted = (props) => {
265
263
  );
266
264
  };
267
265
 
268
- const useStyles$j = core.createStyles((theme) => ({
266
+ const useStyles$8 = core.createStyles((theme) => ({
269
267
  title: {
270
268
  fontSize: 34,
271
269
  fontWeight: 900,
@@ -306,7 +304,7 @@ const useStyles$j = core.createStyles((theme) => ({
306
304
  }
307
305
  }));
308
306
  const SwitchAccount = (props) => {
309
- const { classes, theme } = useStyles$j();
307
+ const { classes, theme } = useStyles$8();
310
308
  const options = props.accounts.map((a) => {
311
309
  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
310
  });
@@ -337,56 +335,55 @@ const StatsGroup = ({ data, footer }) => {
337
335
  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
336
  };
339
337
 
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));
338
+ const SIZE = {
339
+ sm: { box: "h-11 w-11", rounded: "rounded-xl", icon: 20 },
340
+ lg: { box: "h-16 w-16", rounded: "rounded-2xl", icon: 28 }
344
341
  };
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}`
342
+ const ACCENT = {
343
+ cyan: { bg: "bg-sky-blue-400/15", text: "text-sky-blue-400" },
344
+ mint: { bg: "bg-mint-400/15", text: "text-mint-400" },
345
+ gold: { bg: "bg-gold-400/15", text: "text-gold-400" }
346
+ };
347
+ function Emblem(props) {
348
+ const s = SIZE[props.size || "sm"];
349
+ const a = ACCENT[props.accent];
350
+ const Icon = props.icon;
351
+ if (props.imageURL) {
352
+ return /* @__PURE__ */ React__namespace.createElement("img", { src: props.imageURL, alt: props.alt || "", className: `${s.box} shrink-0 ${s.rounded} object-cover` });
358
353
  }
359
- }));
354
+ 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 }));
355
+ }
356
+
360
357
  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,
358
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
359
+ reactRouterDom.Link,
365
360
  {
366
- component: reactRouterDom.Link,
367
361
  to: props.href,
368
- className: classes.button,
369
- variant: "gradient"
362
+ 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
363
  },
371
364
  "Preview"
372
365
  ), /* @__PURE__ */ React__namespace.createElement(
373
- core.Button,
366
+ "button",
374
367
  {
375
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
376
- onClick: props.onCopyLinkClick
368
+ type: "button",
369
+ onClick: props.onCopyLinkClick,
370
+ 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
371
  },
372
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
378
373
  "Copy link"
379
374
  ), /* @__PURE__ */ React__namespace.createElement(
380
- core.Button,
375
+ "button",
381
376
  {
382
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14 }),
383
- onClick: props.onExportDataClick
377
+ type: "button",
378
+ onClick: props.onExportDataClick,
379
+ 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
380
  },
381
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 13, stroke: 2 }),
385
382
  "Export data (.csv)"
386
383
  ));
387
384
  };
388
385
 
389
- const useStyles$h = core.createStyles((theme) => ({
386
+ const useStyles$7 = core.createStyles((theme) => ({
390
387
  wrapper: {
391
388
  display: "flex",
392
389
  alignItems: "center",
@@ -437,7 +434,7 @@ const useStyles$h = core.createStyles((theme) => ({
437
434
  }
438
435
  }));
439
436
  const PlaceholderBanner = (props) => {
440
- const { classes } = useStyles$h();
437
+ const { classes } = useStyles$7();
441
438
  const title = props.title || "Nothing to display";
442
439
  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
440
  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 +444,7 @@ function Stack$4(props) {
447
444
  if (props.items.length === 0) {
448
445
  return null;
449
446
  }
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);
447
+ 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
448
  }
453
449
 
454
450
  function useSortableData(items, config = { key: "", direction: null }) {
@@ -489,28 +485,29 @@ function useSortableData(items, config = { key: "", direction: null }) {
489
485
  return { items: sortedItems, requestSort, sortConfig };
490
486
  }
491
487
 
492
- var __defProp$e = Object.defineProperty;
493
- var __defProps$a = Object.defineProperties;
494
- var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
495
- var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
496
- var __hasOwnProp$e = Object.prototype.hasOwnProperty;
497
- var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
498
- var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
499
- var __spreadValues$e = (a, b) => {
488
+ var __defProp$f = Object.defineProperty;
489
+ var __defProps$c = Object.defineProperties;
490
+ var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
491
+ var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
492
+ var __hasOwnProp$f = Object.prototype.hasOwnProperty;
493
+ var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
494
+ var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
495
+ var __spreadValues$f = (a, b) => {
500
496
  for (var prop in b || (b = {}))
501
- if (__hasOwnProp$e.call(b, prop))
502
- __defNormalProp$e(a, prop, b[prop]);
503
- if (__getOwnPropSymbols$e)
504
- for (var prop of __getOwnPropSymbols$e(b)) {
505
- if (__propIsEnum$e.call(b, prop))
506
- __defNormalProp$e(a, prop, b[prop]);
497
+ if (__hasOwnProp$f.call(b, prop))
498
+ __defNormalProp$f(a, prop, b[prop]);
499
+ if (__getOwnPropSymbols$f)
500
+ for (var prop of __getOwnPropSymbols$f(b)) {
501
+ if (__propIsEnum$f.call(b, prop))
502
+ __defNormalProp$f(a, prop, b[prop]);
507
503
  }
508
504
  return a;
509
505
  };
510
- var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
506
+ var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
511
507
  function Table$k(props) {
508
+ const [expanded, setExpanded] = React__namespace.useState({});
512
509
  const preparedItems = React__namespace.useMemo(() => {
513
- return props.items.map((item) => __spreadProps$a(__spreadValues$e({}, item), {
510
+ return props.items.map((item) => __spreadProps$c(__spreadValues$f({}, item), {
514
511
  status: item.isComplete ? 1 : 0
515
512
  }));
516
513
  }, [props.items]);
@@ -526,40 +523,22 @@ function Table$k(props) {
526
523
  }
527
524
  );
528
525
  }
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
- ));
526
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
527
+ 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) => {
528
+ var _a;
529
+ const isOpen = !!expanded[row.userId];
530
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
531
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(
532
+ "div",
533
+ {
534
+ onClick: () => setExpanded(__spreadProps$c(__spreadValues$f({}, expanded), { [row.userId]: !isOpen })),
535
+ className: "flex cursor-pointer items-center gap-4 p-4"
536
+ },
537
+ /* @__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))),
538
+ /* @__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")),
539
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
540
+ ), 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 })));
541
+ }));
563
542
  }
564
543
 
565
544
  function Table$j(props) {
@@ -569,121 +548,63 @@ function Table$j(props) {
569
548
  PlaceholderBanner,
570
549
  {
571
550
  title: "No lessons to display",
572
- description: "There are not lessons in badge.",
551
+ description: "There are no lessons in this badge.",
573
552
  loading: props.loading,
574
553
  icon: "badges"
575
554
  }
576
555
  );
577
556
  }
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,
584
- {
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
- ));
557
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
558
+ 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(
559
+ reactRouterDom.Link,
560
+ {
561
+ key: row.lessonId,
562
+ to: row.href,
563
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
564
+ },
565
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1 text-sm font-bold text-dark-blue-400" }, row.lessonName),
566
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-36 shrink-0 text-right text-xs text-slate-500" }, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")
567
+ )));
608
568
  }
609
569
 
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
- }));
570
+ const TABS$4 = [
571
+ { label: "By lesson", value: "lessons" },
572
+ { label: "By student", value: "students" }
573
+ ];
622
574
  const Badge = (props) => {
623
- const { classes } = useStyles$g();
624
575
  const [tab, setTab] = React.useState("lessons");
625
576
  const numberOfStudents = props.students.length;
626
577
  const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
627
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
628
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
629
- core.Badge,
630
- {
631
- variant: "filled",
632
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
633
- size: "lg"
634
- },
635
- "Back"
636
- )), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
578
+ 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
579
  SplitButton$4,
638
580
  {
639
581
  href: props.href,
640
582
  onCopyLinkClick: props.onCopyLinkClick,
641
583
  onExportDataClick: props.onExportDataClick
642
584
  }
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: [
585
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
644
586
  {
645
587
  title: props.trial ? "LESSONS SUBMITTED" : "BADGE COMPLETION",
646
- value: props.trial ? props.lessonsCompleted || 0 : numberOfBadges,
647
- unit: props.trial ? "" : ""
588
+ value: props.trial ? props.lessonsCompleted || 0 : numberOfBadges
648
589
  }
649
- ] }), !props.trial && /* @__PURE__ */ React__namespace.createElement(
650
- core.Select,
590
+ ] }), !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(
591
+ "select",
651
592
  {
652
- clearable: true,
653
- clearButtonLabel: "Clear class selection",
654
- size: "sm",
655
- placeholder: "Select a class",
656
- nothingFound: "No options",
657
593
  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,
594
+ onChange: (e) => props.onClassChange(e.target.value),
595
+ 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"
596
+ },
597
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
598
+ props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, c.name))
599
+ )), /* @__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$4.map((t) => /* @__PURE__ */ React__namespace.createElement(
600
+ "button",
682
601
  {
683
- loading: props.loading,
684
- items: props.students
685
- }
686
- )))))));
602
+ key: t.value,
603
+ onClick: () => setTab(t.value),
604
+ 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"}`
605
+ },
606
+ t.label
607
+ ))), (!!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
608
  };
688
609
 
689
610
  function Table$i(props) {
@@ -693,20 +614,40 @@ function Table$i(props) {
693
614
  if (props.items.length === 0) {
694
615
  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
616
  }
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(
617
+ 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
618
  reactRouterDom.Link,
698
619
  {
699
620
  key: row.badgeId,
700
621
  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" : ""}`
622
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
623
+ },
624
+ /* @__PURE__ */ React__namespace.createElement(Emblem, { imageURL: row.imageURL, alt: row.name, size: "sm", icon: icons.IconAlbum, accent: "mint" }),
625
+ /* @__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)),
626
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
627
+ /* @__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"),
628
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
629
+ )));
630
+ }
631
+
632
+ function PathwayFilterPills(props) {
633
+ if (props.pathways.length === 0) {
634
+ return null;
635
+ }
636
+ 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"}`;
637
+ 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(
638
+ "button",
639
+ {
640
+ key: p.pathwayId,
641
+ type: "button",
642
+ onClick: () => props.onChange(p.pathwayId),
643
+ className: pillClass(props.selected === p.pathwayId)
702
644
  },
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)
645
+ p.title
705
646
  )));
706
647
  }
707
648
 
708
649
  const Badges = (props) => {
709
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Project-sized skills acquisition and standards alignment.")), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2.5 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(icons.IconSearch, { size: 15, stroke: 1.75, className: "text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
650
+ 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
651
  "input",
711
652
  {
712
653
  type: "text",
@@ -718,6 +659,7 @@ const Badges = (props) => {
718
659
  };
719
660
 
720
661
  function Table$h(props) {
662
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
721
663
  if (props.items.length === 0) {
722
664
  return /* @__PURE__ */ React__namespace.createElement(
723
665
  PlaceholderBanner,
@@ -729,8 +671,24 @@ function Table$h(props) {
729
671
  }
730
672
  );
731
673
  }
732
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onViewProfile(row) }, row.studentName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.className)));
733
- 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, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Class Name"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
674
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
675
+ 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-[2fr_1fr] 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("studentName"), className: "flex items-center text-left hover:text-slate-700" }, "Student Name", indicator("studentName")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("className"), className: "flex items-center text-left hover:text-slate-700" }, "Class Name", indicator("className"))), sortedItems.map((row, i) => /* @__PURE__ */ React__namespace.createElement(
676
+ "div",
677
+ {
678
+ key: row.studentId,
679
+ className: `grid grid-cols-[2fr_1fr] items-center gap-3 px-5 py-3.5 ${i < sortedItems.length - 1 ? "border-b border-slate-100" : ""}`
680
+ },
681
+ /* @__PURE__ */ React__namespace.createElement(
682
+ "button",
683
+ {
684
+ type: "button",
685
+ onClick: () => props.onViewProfile(row),
686
+ className: "truncate text-left text-xs font-bold text-dark-blue-400 hover:text-sky-blue-400"
687
+ },
688
+ row.studentName
689
+ ),
690
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs text-slate-500" }, row.className)
691
+ )));
734
692
  }
735
693
 
736
694
  const units = [
@@ -757,7 +715,32 @@ function relativeTimeFromElapsed(elapsed) {
757
715
  return "";
758
716
  }
759
717
 
718
+ var __defProp$e = Object.defineProperty;
719
+ var __defProps$b = Object.defineProperties;
720
+ var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
721
+ var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
722
+ var __hasOwnProp$e = Object.prototype.hasOwnProperty;
723
+ var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
724
+ var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
725
+ var __spreadValues$e = (a, b) => {
726
+ for (var prop in b || (b = {}))
727
+ if (__hasOwnProp$e.call(b, prop))
728
+ __defNormalProp$e(a, prop, b[prop]);
729
+ if (__getOwnPropSymbols$e)
730
+ for (var prop of __getOwnPropSymbols$e(b)) {
731
+ if (__propIsEnum$e.call(b, prop))
732
+ __defNormalProp$e(a, prop, b[prop]);
733
+ }
734
+ return a;
735
+ };
736
+ var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
760
737
  function Table$g(props) {
738
+ const preparedItems = React__namespace.useMemo(() => {
739
+ return props.items.map((item) => __spreadProps$b(__spreadValues$e({}, item), {
740
+ updatedAtDate: new Date(item.updatedAt)
741
+ }));
742
+ }, [props.items]);
743
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
761
744
  if (props.items.length === 0) {
762
745
  return /* @__PURE__ */ React__namespace.createElement(
763
746
  PlaceholderBanner,
@@ -769,11 +752,22 @@ function Table$g(props) {
769
752
  }
770
753
  );
771
754
  }
772
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName + row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.lessonName), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, relativeTimeFromDates(new Date(row.updatedAt)))));
773
- 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, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Updated At"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
755
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
756
+ 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-[1fr_1fr_2fr_0.8fr] 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("studentName"), className: "flex items-center text-left hover:text-slate-700" }, "Student Name", indicator("studentName")), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("lessonName"), className: "flex items-center text-left hover:text-slate-700" }, "Lesson Name", indicator("lessonName")), /* @__PURE__ */ React__namespace.createElement("div", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("updatedAtDate"), className: "flex items-center text-left hover:text-slate-700" }, "Updated At", indicator("updatedAtDate"))), sortedItems.map((row, i) => /* @__PURE__ */ React__namespace.createElement(
757
+ "div",
758
+ {
759
+ key: row.studentName + row.lessonName,
760
+ className: `grid grid-cols-[1fr_1fr_2fr_0.8fr] items-center gap-3 px-5 py-3.5 ${i < sortedItems.length - 1 ? "border-b border-slate-100" : ""}`
761
+ },
762
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, row.studentName),
763
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs text-slate-500" }, row.lessonName),
764
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-slate-500" }, row.reflection),
765
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-slate-500" }, relativeTimeFromDates(row.updatedAtDate))
766
+ )));
774
767
  }
775
768
 
776
769
  function Table$f(props) {
770
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
777
771
  if (props.items.length === 0) {
778
772
  return /* @__PURE__ */ React__namespace.createElement(
779
773
  PlaceholderBanner,
@@ -785,11 +779,20 @@ function Table$f(props) {
785
779
  }
786
780
  );
787
781
  }
788
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.impactStatement)));
789
- 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, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Impact Statement"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
782
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
783
+ 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-[1fr_3fr] 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("studentName"), className: "flex items-center text-left hover:text-slate-700" }, "Student Name", indicator("studentName")), /* @__PURE__ */ React__namespace.createElement("div", null, "Impact Statement")), sortedItems.map((row, i) => /* @__PURE__ */ React__namespace.createElement(
784
+ "div",
785
+ {
786
+ key: row.studentName,
787
+ className: `grid grid-cols-[1fr_3fr] items-center gap-3 px-5 py-3.5 ${i < sortedItems.length - 1 ? "border-b border-slate-100" : ""}`
788
+ },
789
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, row.studentName),
790
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-slate-500" }, row.impactStatement)
791
+ )));
790
792
  }
791
793
 
792
794
  function Table$e(props) {
795
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
793
796
  if (props.items.length === 0) {
794
797
  return /* @__PURE__ */ React__namespace.createElement(
795
798
  PlaceholderBanner,
@@ -801,11 +804,29 @@ function Table$e(props) {
801
804
  }
802
805
  );
803
806
  }
804
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React__namespace.createElement("td", null, row.description), /* @__PURE__ */ React__namespace.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
805
- 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, "Badge Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
807
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
808
+ 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-[1.5fr_2fr_0.8fr] 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("name"), className: "flex items-center text-left hover:text-slate-700" }, "Badge Name", indicator("name")), /* @__PURE__ */ React__namespace.createElement("div", null, "Description"), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("percentageCompletion"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Completion", indicator("percentageCompletion"))), sortedItems.map((row, i) => /* @__PURE__ */ React__namespace.createElement(
809
+ "div",
810
+ {
811
+ key: row.badgeId,
812
+ className: `grid grid-cols-[1.5fr_2fr_0.8fr] items-center gap-3 px-5 py-3.5 ${i < sortedItems.length - 1 ? "border-b border-slate-100" : ""}`
813
+ },
814
+ /* @__PURE__ */ React__namespace.createElement(
815
+ "button",
816
+ {
817
+ type: "button",
818
+ onClick: () => props.onClick && props.onClick(row),
819
+ className: "truncate text-left text-xs font-bold text-dark-blue-400 hover:text-sky-blue-400"
820
+ },
821
+ row.name
822
+ ),
823
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs text-slate-500" }, row.description),
824
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")
825
+ )));
806
826
  }
807
827
 
808
828
  function Table$d(props) {
829
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
809
830
  if (props.items.length === 0) {
810
831
  return /* @__PURE__ */ React__namespace.createElement(
811
832
  PlaceholderBanner,
@@ -817,13 +838,37 @@ function Table$d(props) {
817
838
  }
818
839
  );
819
840
  }
820
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React__namespace.createElement("td", null, row.description), /* @__PURE__ */ React__namespace.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
821
- 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, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
841
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
842
+ 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-[1.5fr_2fr_0.8fr] 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("name"), className: "flex items-center text-left hover:text-slate-700" }, "Lesson Name", indicator("name")), /* @__PURE__ */ React__namespace.createElement("div", null, "Description"), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("percentageCompletion"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Completion", indicator("percentageCompletion"))), sortedItems.map((row, i) => /* @__PURE__ */ React__namespace.createElement(
843
+ "div",
844
+ {
845
+ key: row.lessonId,
846
+ className: `grid grid-cols-[1.5fr_2fr_0.8fr] items-center gap-3 px-5 py-3.5 ${i < sortedItems.length - 1 ? "border-b border-slate-100" : ""}`
847
+ },
848
+ /* @__PURE__ */ React__namespace.createElement(
849
+ "button",
850
+ {
851
+ type: "button",
852
+ onClick: () => props.onClick && props.onClick(row),
853
+ className: "truncate text-left text-xs font-bold text-dark-blue-400 hover:text-sky-blue-400"
854
+ },
855
+ row.name
856
+ ),
857
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs text-slate-500" }, row.description),
858
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")
859
+ )));
822
860
  }
823
861
 
862
+ const TABS$3 = [
863
+ { label: "My students", value: "students" },
864
+ { label: "Impact statements", value: "impact" },
865
+ { label: "Reflections", value: "reflections" },
866
+ { label: "Badges", value: "badges" },
867
+ { label: "Lessons", value: "lessons" }
868
+ ];
824
869
  const Dashboard = (props) => {
825
870
  const [tab, setTab] = React.useState("students");
826
- 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: [
871
+ 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("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Dashboard"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, "Track your students' pathway progress")), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
827
872
  {
828
873
  title: "# OF STUDENTS",
829
874
  value: props.students.length
@@ -841,35 +886,24 @@ const Dashboard = (props) => {
841
886
  title: "LESSONS COMPLETED",
842
887
  value: props.numberOfLessonsCompleted
843
888
  }
844
- ] }), /* @__PURE__ */ React__namespace.createElement(
845
- core.Select,
889
+ ] }), /* @__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(
890
+ "select",
846
891
  {
847
- clearable: true,
848
- clearButtonLabel: "Clear class selection",
849
- size: "sm",
850
- placeholder: "Select a class",
851
- nothingFound: "No options",
852
892
  value: props.classId,
853
- onChange: props.onClassChange,
854
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, null),
855
- data: props.classes.map((g) => {
856
- return { value: g.classId, label: g.name };
857
- })
858
- }
859
- ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
860
- Tabs,
893
+ onChange: (e) => props.onClassChange(e.target.value),
894
+ 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"
895
+ },
896
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
897
+ props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, c.name))
898
+ )), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit flex-wrap gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$3.map((t) => /* @__PURE__ */ React__namespace.createElement(
899
+ "button",
861
900
  {
862
- value: tab,
863
- data: [
864
- { label: "My students", value: "students" },
865
- { label: "Impact statements", value: "impact" },
866
- { label: "Reflections", value: "reflections" },
867
- { label: "Badges", value: "badges" },
868
- { label: "Lessons", value: "lessons" }
869
- ],
870
- onChange: setTab
871
- }
872
- ), tab === "impact" && /* @__PURE__ */ React__namespace.createElement(
901
+ key: t.value,
902
+ onClick: () => setTab(t.value),
903
+ 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"}`
904
+ },
905
+ t.label
906
+ ))), tab === "impact" && /* @__PURE__ */ React__namespace.createElement(
873
907
  Table$f,
874
908
  {
875
909
  loading: props.loading,
@@ -902,12 +936,12 @@ const Dashboard = (props) => {
902
936
  items: props.students,
903
937
  onViewProfile: props.onViewStudentProfile
904
938
  }
905
- )))))));
939
+ )));
906
940
  };
907
941
 
908
942
  var __defProp$d = Object.defineProperty;
909
- var __defProps$9 = Object.defineProperties;
910
- var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
943
+ var __defProps$a = Object.defineProperties;
944
+ var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
911
945
  var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
912
946
  var __hasOwnProp$d = Object.prototype.hasOwnProperty;
913
947
  var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
@@ -923,8 +957,8 @@ var __spreadValues$d = (a, b) => {
923
957
  }
924
958
  return a;
925
959
  };
926
- var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
927
- const openDeleteModal = (student, onDelete) => modals.openConfirmModal({
960
+ var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
961
+ const openDeleteModal$2 = (student, onDelete) => modals.openConfirmModal({
928
962
  title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
929
963
  centered: true,
930
964
  children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Click confirm if you want to remove the student from this specific class. This will NOT remove the student from the Tech Platform."),
@@ -934,7 +968,7 @@ const openDeleteModal = (student, onDelete) => modals.openConfirmModal({
934
968
  });
935
969
  function Table$c(props) {
936
970
  const preparedItems = React__namespace.useMemo(() => {
937
- return props.items.map((item) => __spreadProps$9(__spreadValues$d({}, item), {
971
+ return props.items.map((item) => __spreadProps$a(__spreadValues$d({}, item), {
938
972
  fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
939
973
  }));
940
974
  }, [props.items]);
@@ -976,7 +1010,7 @@ function Table$c(props) {
976
1010
  "button",
977
1011
  {
978
1012
  type: "button",
979
- onClick: () => openDeleteModal(row, props.onDelete),
1013
+ onClick: () => openDeleteModal$2(row, props.onDelete),
980
1014
  className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
981
1015
  },
982
1016
  /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 14, stroke: 1.75 })
@@ -986,8 +1020,8 @@ function Table$c(props) {
986
1020
  }
987
1021
 
988
1022
  var __defProp$c = Object.defineProperty;
989
- var __defProps$8 = Object.defineProperties;
990
- var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
1023
+ var __defProps$9 = Object.defineProperties;
1024
+ var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
991
1025
  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
992
1026
  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
993
1027
  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -1003,7 +1037,7 @@ var __spreadValues$c = (a, b) => {
1003
1037
  }
1004
1038
  return a;
1005
1039
  };
1006
- var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
1040
+ var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
1007
1041
  const Class = (props) => {
1008
1042
  const [opened, setOpened] = React.useState(false);
1009
1043
  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
@@ -1015,7 +1049,7 @@ const Class = (props) => {
1015
1049
  padding: "xl",
1016
1050
  size: "xl"
1017
1051
  },
1018
- /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$8(__spreadValues$c({}, props), { close: () => setOpened(false) }))
1052
+ /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$9(__spreadValues$c({}, props), { close: () => setOpened(false) }))
1019
1053
  ), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React__namespace.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, props.description || "No description")), !props.loading && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
1020
1054
  "button",
1021
1055
  {
@@ -1168,6 +1202,14 @@ const DropzoneButton$1 = (props) => {
1168
1202
  ))));
1169
1203
  };
1170
1204
 
1205
+ const openDeleteModal$1 = (group, onDeleteClass) => modals.openConfirmModal({
1206
+ title: `Delete "${group.name}"?`,
1207
+ centered: true,
1208
+ children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Are you sure you want to delete this class? This action is destructive and you will have to contact support to restore your data."),
1209
+ labels: { confirm: "Delete class", cancel: "No don't delete it" },
1210
+ confirmProps: { color: "red" },
1211
+ onConfirm: () => onDeleteClass(group)
1212
+ });
1171
1213
  function Table$b(props) {
1172
1214
  const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
1173
1215
  if (props.items.length === 0) {
@@ -1181,57 +1223,26 @@ function Table$b(props) {
1181
1223
  }
1182
1224
  );
1183
1225
  }
1184
- const openDeleteModal = (group) => modals.openConfirmModal({
1185
- title: `Delete "${group.name}"?`,
1186
- centered: true,
1187
- children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Are you sure you want to delete this class? This action is destructive and you will have to contact support to restore your data."),
1188
- labels: { confirm: "Delete class", cancel: "No don't delete it" },
1189
- confirmProps: { color: "red" },
1190
- onConfirm: () => props.onDeleteClass(group)
1191
- });
1192
- const sortStatus = {
1193
- columnAccessor: sortConfig.key,
1194
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1195
- };
1196
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1197
- mantineDatatable.DataTable,
1198
- {
1199
- withBorder: false,
1200
- borderRadius: "sm",
1201
- verticalSpacing: "sm",
1202
- sx: { minWidth: 700 },
1203
- highlightOnHover: true,
1204
- striped: true,
1205
- records: sortedItems,
1206
- idAccessor: "classId",
1207
- sortStatus,
1208
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1209
- columns: [
1210
- {
1211
- accessor: "name",
1212
- title: "Class Name",
1213
- sortable: true,
1214
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: row.href }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14, weight: 500 }, row.name))
1215
- },
1216
- {
1217
- accessor: "description",
1218
- title: "Description",
1219
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.description)
1220
- },
1221
- {
1222
- accessor: "numberOfStudents",
1223
- title: "# of Students",
1224
- sortable: true,
1225
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.numberOfStudents || 0)
1226
- },
1227
- {
1228
- accessor: "actions",
1229
- title: "",
1230
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red", onClick: () => openDeleteModal(row) }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 16, stroke: 1.5 })))
1231
- }
1232
- ]
1233
- }
1234
- ));
1226
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
1227
+ 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-[1.5fr_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("name"), className: "flex items-center text-left hover:text-slate-700" }, "Class Name", indicator("name")), /* @__PURE__ */ React__namespace.createElement("div", null, "Description"), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("numberOfStudents"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "# of Students", indicator("numberOfStudents")), /* @__PURE__ */ React__namespace.createElement("div", null)), sortedItems.map((row, i) => /* @__PURE__ */ React__namespace.createElement(
1228
+ "div",
1229
+ {
1230
+ key: row.classId,
1231
+ className: `grid grid-cols-[1.5fr_2fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < sortedItems.length - 1 ? "border-b border-slate-100" : ""}`
1232
+ },
1233
+ row.href ? /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: row.href, className: "truncate text-xs font-bold text-dark-blue-400 no-underline hover:text-sky-blue-400" }, row.name) : /* @__PURE__ */ React__namespace.createElement("span", { className: "truncate text-xs font-bold text-dark-blue-400" }, row.name),
1234
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate text-xs text-slate-500" }, row.description),
1235
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, row.numberOfStudents || 0),
1236
+ /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
1237
+ "button",
1238
+ {
1239
+ type: "button",
1240
+ onClick: () => openDeleteModal$1(row, props.onDeleteClass),
1241
+ className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
1242
+ },
1243
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 14, stroke: 1.75 })
1244
+ ))
1245
+ )));
1235
1246
  }
1236
1247
 
1237
1248
  var __defProp$b = Object.defineProperty;
@@ -1250,20 +1261,7 @@ var __spreadValues$b = (a, b) => {
1250
1261
  }
1251
1262
  return a;
1252
1263
  };
1253
- const useStyles$f = core.createStyles((theme) => ({
1254
- title: {
1255
- fontSize: 34,
1256
- fontWeight: 900,
1257
- [theme.fn.smallerThan("sm")]: {
1258
- fontSize: 24
1259
- }
1260
- },
1261
- description: {
1262
- maxWidth: 600
1263
- }
1264
- }));
1265
1264
  const Classes = (props) => {
1266
- const { classes } = useStyles$f();
1267
1265
  const form$1 = form.useForm({
1268
1266
  initialValues: {
1269
1267
  classId: "",
@@ -1291,7 +1289,7 @@ const Classes = (props) => {
1291
1289
  form$1.reset();
1292
1290
  setOpened(false);
1293
1291
  props.onCreateClass && props.onCreateClass(values);
1294
- }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
1292
+ }) }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement(
1295
1293
  core.TextInput,
1296
1294
  __spreadValues$b({
1297
1295
  withAsterisk: true,
@@ -1304,34 +1302,44 @@ const Classes = (props) => {
1304
1302
  label: "Description",
1305
1303
  placeholder: "A class for my first period English students"
1306
1304
  }, form$1.getInputProps("description"))
1307
- )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))
1308
- ), /* @__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(
1309
- core.Button,
1305
+ ), /* @__PURE__ */ React__namespace.createElement(
1306
+ "button",
1307
+ {
1308
+ type: "submit",
1309
+ className: "mt-2 rounded-lg bg-dark-blue-400 px-4 py-2.5 text-xs font-bold text-white"
1310
+ },
1311
+ "Submit"
1312
+ )))
1313
+ ), /* @__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("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Organize people into classes"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, "Create classes, cohorts, or custom subgroups")), !props.loading && /* @__PURE__ */ React__namespace.createElement(
1314
+ "button",
1310
1315
  {
1316
+ type: "button",
1311
1317
  onClick: () => setOpened(true),
1312
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 })
1318
+ 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)]"
1313
1319
  },
1320
+ /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 13, stroke: 2 }),
1314
1321
  "Create class"
1315
- ))), /* @__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: [
1322
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1316
1323
  {
1317
1324
  title: "# OF CLASSES",
1318
1325
  value: props.classes.length
1319
1326
  }
1320
- ] }), /* @__PURE__ */ React__namespace.createElement(
1321
- core.Autocomplete,
1327
+ ] }), /* @__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(
1328
+ "input",
1322
1329
  {
1330
+ type: "text",
1323
1331
  placeholder: "Search for classes",
1324
- data: props.classes.map((item) => item.name),
1325
- onChange: props.onAutocompleteChange
1332
+ onChange: (e) => props.onAutocompleteChange(e.target.value),
1333
+ 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"
1326
1334
  }
1327
- ), /* @__PURE__ */ React__namespace.createElement(
1335
+ )), /* @__PURE__ */ React__namespace.createElement(
1328
1336
  Table$b,
1329
1337
  {
1330
1338
  loading: props.loading,
1331
1339
  items: props.classes,
1332
1340
  onDeleteClass: props.onDeleteClass
1333
1341
  }
1334
- ))))));
1342
+ )));
1335
1343
  };
1336
1344
 
1337
1345
  function Table$a(props) {
@@ -1414,7 +1422,7 @@ function Table$8(props) {
1414
1422
  )));
1415
1423
  }
1416
1424
 
1417
- const TABS$1 = [
1425
+ const TABS$2 = [
1418
1426
  { label: "My badges", value: "badges" },
1419
1427
  { label: "My answers", value: "answers" },
1420
1428
  { label: "My reflections", value: "reflections" }
@@ -1436,7 +1444,7 @@ const Student = (props) => {
1436
1444
  title: "BADGE COMPLETION",
1437
1445
  value: numberOfBadgesCompleted
1438
1446
  }
1439
- ] }), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$1.map((t) => /* @__PURE__ */ React__namespace.createElement(
1447
+ ] }), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$2.map((t) => /* @__PURE__ */ React__namespace.createElement(
1440
1448
  "button",
1441
1449
  {
1442
1450
  key: t.value,
@@ -1554,65 +1562,35 @@ function Table$7(props) {
1554
1562
  }
1555
1563
  );
1556
1564
  }
1557
- const sortStatus = {
1558
- columnAccessor: sortConfig.key,
1559
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1560
- };
1561
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1562
- mantineDatatable.DataTable,
1563
- {
1564
- records: sortedItems,
1565
- sortStatus,
1566
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1567
- columns: [
1568
- { accessor: "studentName", title: "Student Name", sortable: true },
1569
- { accessor: "reflection", title: "Reflection" },
1570
- { accessor: "rating", title: "Rating", sortable: true }
1571
- ]
1572
- }
1573
- ));
1565
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
1566
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("studentName"), className: "w-40 shrink-0 text-left hover:text-slate-600" }, "Student Name", indicator("studentName")), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, "Reflection"), /* @__PURE__ */ React__namespace.createElement("button", { onClick: () => requestSort("rating"), className: "w-20 shrink-0 text-right hover:text-slate-600" }, "Rating", indicator("rating"))), sortedItems.map((row, i) => /* @__PURE__ */ React__namespace.createElement("div", { key: `${row.studentName}-${i}`, className: "rounded-xl border border-slate-200 bg-white p-4 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-start gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-sm font-bold text-dark-blue-400" }, row.studentName), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 text-sm text-slate-600" }, row.reflection), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-20 shrink-0 text-right text-sm text-slate-500" }, row.rating)))));
1574
1567
  }
1575
1568
 
1576
- const useStyles$e = core.createStyles((theme) => ({
1577
- button: {
1578
- borderTopRightRadius: 0,
1579
- borderBottomRightRadius: 0,
1580
- marginLeft: 0,
1581
- marginRight: 0
1582
- },
1583
- menuControl: {
1584
- borderTopLeftRadius: 0,
1585
- borderBottomLeftRadius: 0,
1586
- border: 0,
1587
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
1588
- }
1589
- }));
1590
1569
  const SplitButton$3 = (props) => {
1591
- const { classes, theme } = useStyles$e();
1592
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
1593
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
1594
- core.Button,
1570
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
1571
+ reactRouterDom.Link,
1595
1572
  {
1596
- component: reactRouterDom.Link,
1597
1573
  to: props.href,
1598
- className: classes.button,
1599
- variant: "gradient"
1574
+ className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 no-underline hover:bg-slate-50"
1600
1575
  },
1601
1576
  "Preview"
1602
1577
  ), /* @__PURE__ */ React__namespace.createElement(
1603
- core.Button,
1578
+ "button",
1604
1579
  {
1605
- variant: "gradient",
1606
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
1607
- onClick: props.onCopyLinkClick
1580
+ type: "button",
1581
+ onClick: props.onCopyLinkClick,
1582
+ className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
1608
1583
  },
1584
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
1609
1585
  "Copy link"
1610
1586
  ), /* @__PURE__ */ React__namespace.createElement(
1611
- core.Button,
1587
+ "button",
1612
1588
  {
1613
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14 }),
1614
- onClick: props.onExportDataClick
1589
+ type: "button",
1590
+ onClick: props.onExportDataClick,
1591
+ className: "flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-3.5 py-2 text-xs font-bold text-dark-blue-400 shadow-[0_3px_12px_rgba(255,212,77,0.35)]"
1615
1592
  },
1593
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 13, stroke: 2 }),
1616
1594
  "Export data (.csv)"
1617
1595
  ));
1618
1596
  };
@@ -1621,13 +1599,12 @@ function Stack$3(props) {
1621
1599
  if (props.items.length === 0) {
1622
1600
  return null;
1623
1601
  }
1624
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0, key: row.questionName }, /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dark.4", size: "lg" }, row.questionName), /* @__PURE__ */ React__namespace.createElement(core.Text, null, row.answer.join(",") || "No answer.")));
1625
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
1602
+ return /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: props.href, className: "flex flex-col gap-4 no-underline" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("div", { key: row.questionName }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.questionName), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-sm text-slate-600" }, row.answer.join(", ") || "No answer."))));
1626
1603
  }
1627
1604
 
1628
1605
  var __defProp$a = Object.defineProperty;
1629
- var __defProps$7 = Object.defineProperties;
1630
- var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
1606
+ var __defProps$8 = Object.defineProperties;
1607
+ var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
1631
1608
  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
1632
1609
  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
1633
1610
  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -1643,18 +1620,15 @@ var __spreadValues$a = (a, b) => {
1643
1620
  }
1644
1621
  return a;
1645
1622
  };
1646
- var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
1623
+ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
1647
1624
  function Table$6(props) {
1625
+ const [expanded, setExpanded] = React__namespace.useState({});
1648
1626
  const preparedItems = React__namespace.useMemo(() => {
1649
- return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
1627
+ return props.items.map((item) => __spreadProps$8(__spreadValues$a({}, item), {
1650
1628
  status: item.isComplete ? 2 : item.isStarted ? 1 : 0
1651
1629
  }));
1652
1630
  }, [props.items]);
1653
1631
  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
1654
- const sortStatus = {
1655
- columnAccessor: sortConfig.key,
1656
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1657
- };
1658
1632
  if (props.items.length === 0) {
1659
1633
  return /* @__PURE__ */ React__namespace.createElement(
1660
1634
  PlaceholderBanner,
@@ -1666,36 +1640,22 @@ function Table$6(props) {
1666
1640
  }
1667
1641
  );
1668
1642
  }
1669
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
1670
- mantineDatatable.DataTable,
1671
- {
1672
- verticalSpacing: "sm",
1673
- sx: { minWidth: 700 },
1674
- withBorder: false,
1675
- borderRadius: "sm",
1676
- withColumnBorders: true,
1677
- striped: true,
1678
- highlightOnHover: true,
1679
- idAccessor: "userId",
1680
- records: sortedItems,
1681
- sortStatus,
1682
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1683
- columns: [{
1684
- accessor: "name",
1685
- title: "Student Name",
1686
- sortable: true,
1687
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, null, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))
1688
- }, {
1689
- accessor: "status",
1690
- title: "Status",
1691
- sortable: true,
1692
- render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, "In progress"))
1693
- }],
1694
- rowExpansion: {
1695
- content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$3, { href: record.href, items: record.answers })
1696
- }
1697
- }
1698
- ));
1643
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
1644
+ 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) => {
1645
+ var _a;
1646
+ const isOpen = !!expanded[row.userId];
1647
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
1648
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(
1649
+ "div",
1650
+ {
1651
+ onClick: () => setExpanded(__spreadProps$8(__spreadValues$a({}, expanded), { [row.userId]: !isOpen })),
1652
+ className: "flex cursor-pointer items-center gap-4 p-4"
1653
+ },
1654
+ /* @__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))),
1655
+ /* @__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")),
1656
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
1657
+ ), 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 })));
1658
+ }));
1699
1659
  }
1700
1660
 
1701
1661
  function Stack$2(props) {
@@ -1726,7 +1686,7 @@ function Stack$2(props) {
1726
1686
  }
1727
1687
  );
1728
1688
  }
1729
- const rows = props.items.map((row) => {
1689
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => {
1730
1690
  if (row.chart) {
1731
1691
  const labelMap = {};
1732
1692
  const choices = row.choices || [];
@@ -1738,7 +1698,7 @@ function Stack$2(props) {
1738
1698
  labelMap[r] = labelMap[r] ? labelMap[r] + 1 : 1;
1739
1699
  }
1740
1700
  }));
1741
- return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "lg" }, row.question), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement("div", { style: { background: "white", height: "300px", width: "100%", position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(
1701
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.question, className: "rounded-xl border border-slate-200 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-base font-extrabold text-dark-blue-400" }, row.question), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs text-slate-500" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement("div", { className: "relative mt-4 h-[300px] w-full bg-white" }, /* @__PURE__ */ React__namespace.createElement(
1742
1702
  reactCharts.Chart,
1743
1703
  {
1744
1704
  options: {
@@ -1755,64 +1715,24 @@ function Stack$2(props) {
1755
1715
  secondaryAxes
1756
1716
  }
1757
1717
  }
1758
- ))));
1718
+ )));
1759
1719
  }
1760
- return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "lg" }, row.question), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, row.answers.map((a) => {
1720
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.question, className: "rounded-xl border border-slate-200 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-base font-extrabold text-dark-blue-400" }, row.question), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs text-slate-500" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-4 flex flex-col gap-2" }, row.answers.map((a) => {
1761
1721
  const answerText = a.join("\n");
1762
- return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React__namespace.createElement(core.Text, null, answerText));
1763
- })))));
1764
- });
1765
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { py: 4, spacing: 10, sx: { minWidth: 700 } }, rows);
1722
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: answerText, className: "rounded-lg bg-slate-50 p-3 text-sm text-slate-700" }, answerText);
1723
+ })));
1724
+ }));
1766
1725
  }
1767
1726
  const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
1768
1727
 
1769
- const useStyles$d = core.createStyles((theme) => ({
1770
- title: {
1771
- fontSize: 34,
1772
- fontWeight: 900,
1773
- [theme.fn.smallerThan("sm")]: {
1774
- fontSize: 24
1775
- }
1776
- },
1777
- description: {
1778
- maxWidth: 600
1779
- }
1780
- }));
1728
+ const initialsFor = (name) => name.split(/[ -]/).map((n) => n.charAt(0)).join("").toUpperCase();
1781
1729
  const Lesson = (props) => {
1782
- const { classes } = useStyles$d();
1783
1730
  const [tab, setTab] = React.useState("question");
1784
1731
  const numberOfStudents = props.students.length;
1785
1732
  const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
1786
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
1787
1733
  const contributors = props.contributors || [];
1788
- const avatars = contributors.slice(0, 5).map((u, i) => {
1789
- const fullName = u.name;
1790
- let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
1791
- const src = AvatarInit.initialAvatar({
1792
- background: "#1c7ed6",
1793
- color: "#fff",
1794
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1795
- fontSize: 10,
1796
- fontWeight: 250,
1797
- size: 30,
1798
- initials
1799
- });
1800
- return /* @__PURE__ */ React__namespace.createElement(core.Avatar, { key: i, src, radius: "xl" });
1801
- });
1802
- const remainingUsers = contributors.slice(5).length;
1803
- if (remainingUsers) {
1804
- const initials = "+" + compact(remainingUsers);
1805
- const src = AvatarInit.initialAvatar({
1806
- background: "#1c7ed6",
1807
- color: "#fff",
1808
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1809
- fontSize: 10,
1810
- fontWeight: 250,
1811
- size: 30,
1812
- initials
1813
- });
1814
- avatars.push(/* @__PURE__ */ React__namespace.createElement(core.Avatar, { src, radius: "xl" }));
1815
- }
1734
+ const visibleContributors = contributors.slice(0, 5);
1735
+ const remainingContributors = contributors.slice(5).length;
1816
1736
  const tabs = props.trial ? [
1817
1737
  { label: "By question", value: "question" },
1818
1738
  { label: "By student", value: "students" }
@@ -1821,15 +1741,7 @@ const Lesson = (props) => {
1821
1741
  { label: "By student", value: "students" },
1822
1742
  { label: "By reflection", value: "reflections" }
1823
1743
  ];
1824
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
1825
- core.Badge,
1826
- {
1827
- variant: "filled",
1828
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
1829
- size: "lg"
1830
- },
1831
- "Back"
1832
- )), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
1744
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React__namespace.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Lesson"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(
1833
1745
  SplitButton$3,
1834
1746
  {
1835
1747
  href: props.href,
@@ -1837,58 +1749,36 @@ const Lesson = (props) => {
1837
1749
  onCopyLinkClick: props.onCopyLinkClick,
1838
1750
  onExportDataClick: props.onExportDataClick
1839
1751
  }
1840
- ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
1841
- StatsGroup,
1842
- {
1843
- data: [
1844
- {
1845
- title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1846
- value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons,
1847
- unit: props.trial ? "" : ""
1848
- }
1849
- ]
1850
- }
1851
- ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar.Group, { spacing: "sm" }, avatars)), !props.trial && /* @__PURE__ */ React__namespace.createElement(
1852
- core.Select,
1853
- {
1854
- clearable: true,
1855
- clearButtonLabel: "Clear class selection",
1856
- size: "sm",
1857
- placeholder: "Select a class",
1858
- nothingFound: "No options",
1859
- value: props.classId,
1860
- onChange: props.onClassChange,
1861
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, null),
1862
- data: props.classes.map((g) => {
1863
- return { value: g.classId, label: g.name };
1864
- })
1865
- }
1866
- ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
1867
- Tabs,
1752
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1868
1753
  {
1869
- value: tab,
1870
- data: tabs,
1871
- onChange: setTab
1754
+ title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1755
+ value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons
1872
1756
  }
1873
- ), tab === "question" && /* @__PURE__ */ React__namespace.createElement(
1874
- Stack$2,
1757
+ ] }), contributors.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex" }, visibleContributors.map((u, i) => /* @__PURE__ */ React__namespace.createElement(
1758
+ "div",
1875
1759
  {
1876
- loading: props.loading,
1877
- items: props.questions
1878
- }
1879
- ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
1880
- Table$7,
1760
+ key: i,
1761
+ 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"
1762
+ },
1763
+ initialsFor(u.name)
1764
+ )), 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(
1765
+ "select",
1881
1766
  {
1882
- loading: props.loading,
1883
- items: props.reflections
1884
- }
1885
- ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
1886
- Table$6,
1767
+ value: props.classId,
1768
+ onChange: (e) => props.onClassChange(e.target.value),
1769
+ 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"
1770
+ },
1771
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
1772
+ props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, c.name))
1773
+ )), /* @__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(
1774
+ "button",
1887
1775
  {
1888
- loading: props.loading,
1889
- items: props.students
1890
- }
1891
- )))))));
1776
+ key: t.value,
1777
+ onClick: () => setTab(t.value),
1778
+ 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"}`
1779
+ },
1780
+ t.label
1781
+ ))), tab === "question" && /* @__PURE__ */ React__namespace.createElement(Stack$2, { loading: props.loading, items: props.questions }), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(Table$7, { loading: props.loading, items: props.reflections }), tab === "students" && /* @__PURE__ */ React__namespace.createElement(Table$6, { loading: props.loading, items: props.students })));
1892
1782
  };
1893
1783
 
1894
1784
  function Table$5(props) {
@@ -1898,7 +1788,7 @@ function Table$5(props) {
1898
1788
  if (props.items.length === 0) {
1899
1789
  return /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "No lessons to display.");
1900
1790
  }
1901
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, "Lesson"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
1791
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, "Lesson"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0" }, "Badge"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
1902
1792
  reactRouterDom.Link,
1903
1793
  {
1904
1794
  key: row.lessonId,
@@ -1906,13 +1796,14 @@ function Table$5(props) {
1906
1796
  className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
1907
1797
  },
1908
1798
  /* @__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)),
1799
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.badge || "\u2014"),
1909
1800
  /* @__PURE__ */ React__namespace.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
1910
1801
  /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
1911
1802
  )));
1912
1803
  }
1913
1804
 
1914
1805
  const Lessons = (props) => {
1915
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Bite-sized activities and learning experiences accelerating students achievement")), /* @__PURE__ */ React__namespace.createElement("div", { className: "relative" }, /* @__PURE__ */ React__namespace.createElement(icons.IconSearch, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
1806
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Bite-sized activities and learning experiences accelerating students achievement")), /* @__PURE__ */ React__namespace.createElement(PathwayFilterPills, { pathways: props.pathways, selected: props.selectedPathway, onChange: props.onPathwayChange }), /* @__PURE__ */ React__namespace.createElement("div", { className: "relative" }, /* @__PURE__ */ React__namespace.createElement(icons.IconSearch, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React__namespace.createElement(
1916
1807
  "input",
1917
1808
  {
1918
1809
  type: "text",
@@ -1923,37 +1814,23 @@ const Lessons = (props) => {
1923
1814
  )), /* @__PURE__ */ React__namespace.createElement(Table$5, { loading: props.loading, items: props.lessons }));
1924
1815
  };
1925
1816
 
1926
- const useStyles$c = core.createStyles((theme) => ({
1927
- title: {
1928
- fontSize: 22,
1929
- fontWeight: 900,
1930
- fontFamily: `Greycliff CF, ${theme.fontFamily}`
1931
- },
1932
- controls: {
1933
- [theme.fn.smallerThan("xs")]: {
1934
- flexDirection: "column-reverse"
1935
- }
1936
- },
1937
- control: {
1938
- [theme.fn.smallerThan("xs")]: {
1939
- width: "100%",
1940
- textAlign: "center"
1941
- }
1942
- }
1943
- }));
1944
1817
  function AccessCode(props) {
1945
- const { classes } = useStyles$c();
1946
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React__namespace.createElement(core.Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React__namespace.createElement(
1947
- core.Anchor,
1948
- {
1949
- component: reactRouterDom.Link,
1950
- to: props.peopleLink,
1951
- color: "dimmed",
1952
- size: "sm",
1953
- className: classes.control
1818
+ 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(
1819
+ "input",
1820
+ {
1821
+ value: props.value,
1822
+ readOnly: true,
1823
+ className: "w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-dark-blue-400"
1824
+ }
1825
+ ), /* @__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(
1826
+ "button",
1827
+ {
1828
+ type: "button",
1829
+ onClick: props.onCopyCode,
1830
+ className: "rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-4 py-2 text-xs font-bold text-dark-blue-400 shadow-[0_3px_12px_rgba(255,212,77,0.35)]"
1954
1831
  },
1955
- /* @__PURE__ */ React__namespace.createElement(core.Center, { inline: true }, /* @__PURE__ */ React__namespace.createElement(icons.IconPointer, { size: 12, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement(core.Box, { ml: 5 }, "See people in my organization"))
1956
- ), /* @__PURE__ */ React__namespace.createElement(core.Button, { onClick: props.onCopyCode, className: classes.control }, "Copy code"))));
1832
+ "Copy code"
1833
+ ))));
1957
1834
  }
1958
1835
 
1959
1836
  const monthNames = [
@@ -1970,46 +1847,8 @@ const monthNames = [
1970
1847
  "November",
1971
1848
  "December"
1972
1849
  ];
1973
- const useStyles$b = core.createStyles((theme) => ({
1974
- title: {
1975
- fontSize: 34,
1976
- fontWeight: 900,
1977
- [theme.fn.smallerThan("sm")]: {
1978
- fontSize: 24
1979
- }
1980
- },
1981
- description: {
1982
- maxWidth: 600
1983
- },
1984
- wrapper: {
1985
- position: "relative",
1986
- marginBottom: 30
1987
- },
1988
- dropzone: {
1989
- borderWidth: 1,
1990
- paddingBottom: 50
1991
- },
1992
- icon: {
1993
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
1994
- },
1995
- control: {
1996
- position: "absolute",
1997
- width: 250,
1998
- left: "calc(50% - 125px)",
1999
- bottom: -20
2000
- }
2001
- }));
2002
1850
  const Organization = (props) => {
2003
- const { classes } = useStyles$b();
2004
- return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
2005
- core.Badge,
2006
- {
2007
- variant: "filled",
2008
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
2009
- size: "lg"
2010
- },
2011
- "Back"
2012
- )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Overview"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description"))), /* @__PURE__ */ React__namespace.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1851
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React__namespace.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Overview"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
2013
1852
  {
2014
1853
  title: "# OF STUDENTS",
2015
1854
  value: props.numberOfStudents || 0
@@ -2019,59 +1858,47 @@ const Organization = (props) => {
2019
1858
  value: props.numberOfEducators || 0
2020
1859
  },
2021
1860
  {
2022
- title: `ACTIVE USERS (${monthNames[new Date().getMonth()]})`,
2023
- value: props.percentageOfAccountsActive,
2024
- unit: "%"
2025
- }
2026
- ] }))))));
2027
- };
2028
-
2029
- const useStyles$a = core.createStyles((theme) => ({
2030
- button: {
2031
- borderTopRightRadius: 0,
2032
- borderBottomRightRadius: 0,
2033
- marginLeft: 0,
2034
- marginRight: 0
2035
- },
2036
- menuControl: {
2037
- borderTopLeftRadius: 0,
2038
- borderBottomLeftRadius: 0,
2039
- border: 0,
2040
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
2041
- }
2042
- }));
1861
+ title: `ACTIVE USERS (${monthNames[new Date().getMonth()]})`,
1862
+ value: props.percentageOfAccountsActive,
1863
+ unit: "%"
1864
+ }
1865
+ ] }));
1866
+ };
1867
+
2043
1868
  const SplitButton$2 = (props) => {
2044
- const { classes, theme } = useStyles$a();
2045
- const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
2046
- const hasMenu = !!props.withOrganizationLink;
2047
- return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
2048
- core.Button,
1869
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
1870
+ "button",
2049
1871
  {
2050
- className: hasMenu ? classes.button : "",
2051
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 }),
2052
- onClick: props.onAddUsersClick
1872
+ type: "button",
1873
+ onClick: props.onAddUsersClick,
1874
+ className: "flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-3.5 py-2 text-xs font-bold text-dark-blue-400 shadow-[0_3px_12px_rgba(255,212,77,0.35)]"
2053
1875
  },
1876
+ /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 13, stroke: 2 }),
2054
1877
  "Add members"
2055
- ), hasMenu && /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
2056
- core.ActionIcon,
2057
- {
2058
- variant: "filled",
2059
- color: theme.primaryColor,
2060
- size: 36,
2061
- className: classes.menuControl
2062
- },
2063
- /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
2064
- )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, !!props.withOrganizationLink && /* @__PURE__ */ React__namespace.createElement(
2065
- core.Menu.Item,
1878
+ ), props.withOrganizationLink && /* @__PURE__ */ React__namespace.createElement(
1879
+ "button",
2066
1880
  {
2067
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
2068
- onClick: props.onCopyOrganizationLinkClick
1881
+ type: "button",
1882
+ onClick: props.onCopyOrganizationLinkClick,
1883
+ className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
2069
1884
  },
1885
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
2070
1886
  "Copy organization link"
2071
- ))));
1887
+ ));
2072
1888
  };
2073
1889
 
1890
+ const openDeleteModal = (person, onDelete) => modals.openConfirmModal({
1891
+ title: `Remove "${person.givenName && person.familyName ? `${person.givenName} ${person.familyName}` : person.email}" from your organization?`,
1892
+ centered: true,
1893
+ 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."),
1894
+ labels: { confirm: "Remove", cancel: "Cancel" },
1895
+ confirmProps: { color: "red" },
1896
+ onConfirm: () => onDelete(person)
1897
+ });
2074
1898
  function Table$4(props) {
1899
+ if (props.loading) {
1900
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
1901
+ }
2075
1902
  if (props.items.length === 0) {
2076
1903
  return /* @__PURE__ */ React__namespace.createElement(
2077
1904
  PlaceholderBanner,
@@ -2083,29 +1910,48 @@ function Table$4(props) {
2083
1910
  }
2084
1911
  );
2085
1912
  }
2086
- const openDeleteModal = (student) => modals.openConfirmModal({
2087
- title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
2088
- centered: true,
2089
- children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Click confirm if you want to remove the student from this specific class. This will NOT remove the student from the Tech Platform."),
2090
- labels: { confirm: "Remove Student", cancel: "Cancel" },
2091
- confirmProps: { color: "red" },
2092
- onConfirm: () => props.onDelete && props.onDelete(student)
2093
- });
2094
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.email }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: row.href }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Box, { maw: 150 }, /* @__PURE__ */ React__namespace.createElement(
2095
- core.Select,
2096
- {
2097
- size: "sm",
2098
- value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
2099
- onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
2100
- data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }, { value: "admin", label: "Admin" }]
2101
- }
2102
- ))), /* @__PURE__ */ React__namespace.createElement("td", null, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { color: "green" })), /* @__PURE__ */ React__namespace.createElement("td", null, row.numberOfClasses), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red" }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
2103
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Role"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "# of Classes"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
1913
+ 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) => {
1914
+ var _a, _b;
1915
+ const name = row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email;
1916
+ const initials = (((_a = row.givenName) == null ? void 0 : _a[0]) || row.email[0] || "?") + (((_b = row.familyName) == null ? void 0 : _b[0]) || "");
1917
+ 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)));
1918
+ return /* @__PURE__ */ React__namespace.createElement(
1919
+ "div",
1920
+ {
1921
+ key: row.email,
1922
+ 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" : ""}`
1923
+ },
1924
+ 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),
1925
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React__namespace.createElement(
1926
+ "select",
1927
+ {
1928
+ disabled: row.readonly,
1929
+ value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
1930
+ onChange: (e) => props.onRoleChange && props.onRoleChange(row, e.target.value),
1931
+ 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"
1932
+ },
1933
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "student" }, "Student"),
1934
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "educator" }, "Educator"),
1935
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "admin" }, "Admin")
1936
+ )),
1937
+ /* @__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" })),
1938
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, row.numberOfClasses),
1939
+ /* @__PURE__ */ React__namespace.createElement("div", null, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(
1940
+ "button",
1941
+ {
1942
+ type: "button",
1943
+ onClick: () => openDeleteModal(row, props.onDelete),
1944
+ className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
1945
+ },
1946
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { size: 14, stroke: 1.75 })
1947
+ ))
1948
+ );
1949
+ }));
2104
1950
  }
2105
1951
 
2106
1952
  var __defProp$9 = Object.defineProperty;
2107
- var __defProps$6 = Object.defineProperties;
2108
- var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
1953
+ var __defProps$7 = Object.defineProperties;
1954
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
2109
1955
  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
2110
1956
  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
2111
1957
  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -2121,38 +1967,8 @@ var __spreadValues$9 = (a, b) => {
2121
1967
  }
2122
1968
  return a;
2123
1969
  };
2124
- var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2125
- const useStyles$9 = core.createStyles((theme) => ({
2126
- title: {
2127
- fontSize: 34,
2128
- fontWeight: 900,
2129
- [theme.fn.smallerThan("sm")]: {
2130
- fontSize: 24
2131
- }
2132
- },
2133
- description: {
2134
- maxWidth: 600
2135
- },
2136
- wrapper: {
2137
- position: "relative",
2138
- marginBottom: 30
2139
- },
2140
- dropzone: {
2141
- borderWidth: 1,
2142
- paddingBottom: 50
2143
- },
2144
- icon: {
2145
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
2146
- },
2147
- control: {
2148
- position: "absolute",
2149
- width: 250,
2150
- left: "calc(50% - 125px)",
2151
- bottom: -20
2152
- }
2153
- }));
1970
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
2154
1971
  const People = (props) => {
2155
- const { classes } = useStyles$9();
2156
1972
  const form$1 = form.useForm({
2157
1973
  initialValues: {
2158
1974
  userId: "",
@@ -2183,12 +1999,12 @@ const People = (props) => {
2183
1999
  padding: "xl",
2184
2000
  size: "xl"
2185
2001
  },
2186
- /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$6(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
2002
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$7(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
2187
2003
  const values = form$1.values;
2188
2004
  form$1.reset();
2189
2005
  setOpened(false);
2190
2006
  props.onCreateUsers && props.onCreateUsers([values]);
2191
- }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
2007
+ }) }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement(
2192
2008
  core.TextInput,
2193
2009
  __spreadValues$9({
2194
2010
  withAsterisk: true,
@@ -2207,23 +2023,22 @@ const People = (props) => {
2207
2023
  label: "Family name",
2208
2024
  placeholder: "Family name"
2209
2025
  }, form$1.getInputProps("familyName"))
2210
- )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
2211
- ), /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
2212
- core.Badge,
2213
- {
2214
- variant: "filled",
2215
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
2216
- size: "lg"
2217
- },
2218
- "Back"
2219
- )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "People"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Manage members of your organization")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
2026
+ )), /* @__PURE__ */ React__namespace.createElement(
2027
+ "button",
2028
+ {
2029
+ type: "submit",
2030
+ className: "mt-2 rounded-lg bg-dark-blue-400 px-4 py-2.5 text-xs font-bold text-white"
2031
+ },
2032
+ "Submit"
2033
+ ))))
2034
+ ), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React__namespace.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "People"), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, "Manage members of your organization")), !props.loading && /* @__PURE__ */ React__namespace.createElement(
2220
2035
  SplitButton$2,
2221
2036
  {
2222
2037
  withOrganizationLink: props.withOrganizationLink,
2223
2038
  onAddUsersClick: () => setOpened(true),
2224
2039
  onCopyOrganizationLinkClick: props.onCopyLinkClick
2225
2040
  }
2226
- ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
2041
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
2227
2042
  {
2228
2043
  title: "# OF PEOPLE",
2229
2044
  value: props.users.length
@@ -2238,14 +2053,15 @@ const People = (props) => {
2238
2053
  unit: "%",
2239
2054
  value: props.percentageRostered
2240
2055
  }
2241
- ] }), /* @__PURE__ */ React__namespace.createElement(
2242
- core.Autocomplete,
2056
+ ] }), /* @__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(
2057
+ "input",
2243
2058
  {
2059
+ type: "text",
2244
2060
  placeholder: "Search for a people in your organization",
2245
- data: props.users.map((item) => item.email),
2246
- onChange: props.onAutocompleteChange
2061
+ onChange: (e) => props.onAutocompleteChange(e.target.value),
2062
+ className: "w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-dark-blue-400 placeholder:text-slate-400 focus:border-sky-blue-400 focus:outline-none"
2247
2063
  }
2248
- ), /* @__PURE__ */ React__namespace.createElement(
2064
+ )), /* @__PURE__ */ React__namespace.createElement(
2249
2065
  Table$4,
2250
2066
  {
2251
2067
  loading: props.loading,
@@ -2253,10 +2069,9 @@ const People = (props) => {
2253
2069
  onDelete: props.onDeleteUser,
2254
2070
  onRoleChange: props.onChangeUserRole
2255
2071
  }
2256
- ))))));
2072
+ )));
2257
2073
  };
2258
2074
  const DropzoneButton = (props) => {
2259
- const { classes, theme } = useStyles$9();
2260
2075
  const openRef = React__namespace.useRef(null);
2261
2076
  const [loading, setLoading] = React__namespace.useState(false);
2262
2077
  const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -2277,32 +2092,33 @@ const DropzoneButton = (props) => {
2277
2092
  });
2278
2093
  });
2279
2094
  }, []);
2280
- return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(
2095
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative mb-8" }, /* @__PURE__ */ React__namespace.createElement(
2281
2096
  dropzone.Dropzone,
2282
2097
  {
2283
2098
  loading,
2284
2099
  openRef,
2285
2100
  onDrop,
2286
- className: classes.dropzone,
2287
2101
  radius: "md",
2102
+ className: "border pb-12",
2288
2103
  accept: [dropzone.MIME_TYPES.csv],
2289
2104
  maxSize: 5 * 1024 ** 2
2290
2105
  },
2291
- /* @__PURE__ */ React__namespace.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "center" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, /* @__PURE__ */ React__namespace.createElement(icons.IconDownload, { size: 50, color: theme.colors[theme.primaryColor][6], stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, /* @__PURE__ */ React__namespace.createElement(icons.IconX, { size: 50, color: theme.colors.red[6], stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, /* @__PURE__ */ React__namespace.createElement(
2292
- icons.IconCloudUpload,
2293
- {
2294
- size: 50,
2295
- color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
2296
- stroke: 1.5
2297
- }
2298
- ))), /* @__PURE__ */ React__namespace.createElement(core.Text, { align: "center", weight: 700, size: "lg", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, "Upload multiple")), /* @__PURE__ */ React__namespace.createElement(core.Text, { align: "center", size: "sm", mt: "xs", color: "dimmed" }, "Drag'n'drop files here to upload. We can accept only ", /* @__PURE__ */ React__namespace.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
2299
- ), /* @__PURE__ */ React__namespace.createElement(core.Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
2300
- var _a;
2301
- return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
2302
- } }, "Select file"));
2106
+ /* @__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."))
2107
+ ), /* @__PURE__ */ React__namespace.createElement(
2108
+ "button",
2109
+ {
2110
+ type: "button",
2111
+ onClick: () => {
2112
+ var _a;
2113
+ return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
2114
+ },
2115
+ 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"
2116
+ },
2117
+ "Select file"
2118
+ ));
2303
2119
  };
2304
2120
 
2305
- const useStyles$8 = core.createStyles((theme) => ({
2121
+ const useStyles$6 = core.createStyles((theme) => ({
2306
2122
  form: {
2307
2123
  backgroundColor: theme.white,
2308
2124
  padding: theme.spacing.xl,
@@ -2365,7 +2181,7 @@ const useStyles$8 = core.createStyles((theme) => ({
2365
2181
  }
2366
2182
  }));
2367
2183
  const StartAnonymousLesson = (props) => {
2368
- const { classes } = useStyles$8();
2184
+ const { classes } = useStyles$6();
2369
2185
  const [name, setName] = React__namespace.useState("");
2370
2186
  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.Container, null, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet" }, "Community"), /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, "You are now part of ", `${props.educatorName}'s`, " Class")), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(
2371
2187
  core.TextInput,
@@ -2422,7 +2238,7 @@ function TaskCard(props) {
2422
2238
  ));
2423
2239
  }
2424
2240
 
2425
- const useStyles$7 = core.createStyles((theme) => ({
2241
+ const useStyles$5 = core.createStyles((theme) => ({
2426
2242
  title: {
2427
2243
  fontSize: 34,
2428
2244
  fontWeight: 900,
@@ -2436,7 +2252,7 @@ const useStyles$7 = core.createStyles((theme) => ({
2436
2252
  }
2437
2253
  }));
2438
2254
  const UserInfo = (props) => {
2439
- const { classes } = useStyles$7();
2255
+ const { classes } = useStyles$5();
2440
2256
  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
2441
2257
  };
2442
2258
 
@@ -2468,7 +2284,7 @@ var __objRest$1 = (source, exclude) => {
2468
2284
  }
2469
2285
  return target;
2470
2286
  };
2471
- const useStyles$6 = core.createStyles((theme) => ({
2287
+ const useStyles$4 = core.createStyles((theme) => ({
2472
2288
  card: {
2473
2289
  height: 240,
2474
2290
  backgroundSize: "cover",
@@ -2513,7 +2329,7 @@ const TenantBanner = (_a) => {
2513
2329
  "className",
2514
2330
  "code"
2515
2331
  ]);
2516
- const { classes, cx, theme } = useStyles$6();
2332
+ const { classes, cx, theme } = useStyles$4();
2517
2333
  const handleCopy = async () => {
2518
2334
  if (!code)
2519
2335
  return;
@@ -2560,7 +2376,7 @@ const TenantBanner = (_a) => {
2560
2376
  );
2561
2377
  };
2562
2378
 
2563
- const useStyles$5 = core.createStyles((theme) => ({
2379
+ const useStyles$3 = core.createStyles((theme) => ({
2564
2380
  action: {
2565
2381
  backgroundColor: "inherit",
2566
2382
  ":hover": {
@@ -2579,7 +2395,7 @@ const useStyles$5 = core.createStyles((theme) => ({
2579
2395
  }
2580
2396
  }));
2581
2397
  const TrialHome = (props) => {
2582
- const { classes } = useStyles$5();
2398
+ const { classes } = useStyles$3();
2583
2399
  return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true }, /* @__PURE__ */ React__namespace.createElement(core.Badge, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React__namespace.createElement(
2584
2400
  core.Button,
2585
2401
  {
@@ -2609,8 +2425,8 @@ const TrialHome = (props) => {
2609
2425
  };
2610
2426
 
2611
2427
  var __defProp$6 = Object.defineProperty;
2612
- var __defProps$5 = Object.defineProperties;
2613
- var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2428
+ var __defProps$6 = Object.defineProperties;
2429
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
2614
2430
  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
2615
2431
  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
2616
2432
  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -2626,7 +2442,7 @@ var __spreadValues$6 = (a, b) => {
2626
2442
  }
2627
2443
  return a;
2628
2444
  };
2629
- var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2445
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2630
2446
  var __objRest = (source, exclude) => {
2631
2447
  var target = {};
2632
2448
  for (var prop in source)
@@ -2639,7 +2455,7 @@ var __objRest = (source, exclude) => {
2639
2455
  }
2640
2456
  return target;
2641
2457
  };
2642
- const useStyles$4 = core.createStyles((theme, { checked }) => ({
2458
+ const useStyles$2 = core.createStyles((theme, { checked }) => ({
2643
2459
  button: {
2644
2460
  display: "flex",
2645
2461
  alignItems: "center",
@@ -2681,10 +2497,10 @@ function ImageCheckbox(_a) {
2681
2497
  finalValue: false,
2682
2498
  onChange
2683
2499
  });
2684
- const { classes, cx } = useStyles$4({ checked: value });
2500
+ const { classes, cx } = useStyles$2({ checked: value });
2685
2501
  return /* @__PURE__ */ React__namespace.createElement(
2686
2502
  core.UnstyledButton,
2687
- __spreadProps$5(__spreadValues$6({}, others), {
2503
+ __spreadProps$6(__spreadValues$6({}, others), {
2688
2504
  onClick: () => handleChange(!value),
2689
2505
  className: cx(classes.button, className)
2690
2506
  }),
@@ -2705,7 +2521,7 @@ function ImageCheckbox(_a) {
2705
2521
  function SelectGrid(props) {
2706
2522
  const items = props.items.map((item) => /* @__PURE__ */ React__namespace.createElement(
2707
2523
  ImageCheckbox,
2708
- __spreadProps$5(__spreadValues$6({}, item), {
2524
+ __spreadProps$6(__spreadValues$6({}, item), {
2709
2525
  key: item.title,
2710
2526
  onChange: (checked) => props.onChange(item.title, checked)
2711
2527
  })
@@ -2724,8 +2540,8 @@ function SelectGrid(props) {
2724
2540
  }
2725
2541
 
2726
2542
  var __defProp$5 = Object.defineProperty;
2727
- var __defProps$4 = Object.defineProperties;
2728
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2543
+ var __defProps$5 = Object.defineProperties;
2544
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2729
2545
  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
2730
2546
  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
2731
2547
  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
@@ -2741,8 +2557,8 @@ var __spreadValues$5 = (a, b) => {
2741
2557
  }
2742
2558
  return a;
2743
2559
  };
2744
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2745
- const useStyles$3 = core.createStyles((theme) => ({
2560
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2561
+ const useStyles$1 = core.createStyles((theme) => ({
2746
2562
  wrapper: {
2747
2563
  minHeight: "100%",
2748
2564
  boxSizing: "border-box",
@@ -2805,7 +2621,7 @@ const OPTIONS = [
2805
2621
  { description: "project-based learning", title: "Project-Based Learning", icon: icons.IconTools }
2806
2622
  ];
2807
2623
  const TrialRegistration = (props) => {
2808
- const { classes } = useStyles$3();
2624
+ const { classes } = useStyles$1();
2809
2625
  const [firstName, setFirstName] = React__namespace.useState("");
2810
2626
  const [lastName, setLastName] = React__namespace.useState("");
2811
2627
  const [organization, setOrganization] = React__namespace.useState({ organizationId: "", displayName: "" });
@@ -2851,7 +2667,7 @@ const TrialRegistration = (props) => {
2851
2667
  label: "School/Organization Name",
2852
2668
  placeholder: "What's the name of your school?",
2853
2669
  data: props.organizations.map((o) => {
2854
- return __spreadProps$4(__spreadValues$5({}, o), { value: o.displayName });
2670
+ return __spreadProps$5(__spreadValues$5({}, o), { value: o.displayName });
2855
2671
  }),
2856
2672
  onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
2857
2673
  onChange: (next) => {
@@ -2863,7 +2679,7 @@ const TrialRegistration = (props) => {
2863
2679
  SelectGrid,
2864
2680
  {
2865
2681
  items: OPTIONS,
2866
- onChange: (e, checked) => setInterests(__spreadProps$4(__spreadValues$5({}, interests), { [e]: checked }))
2682
+ onChange: (e, checked) => setInterests(__spreadProps$5(__spreadValues$5({}, interests), { [e]: checked }))
2867
2683
  }
2868
2684
  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
2869
2685
  core.Button,
@@ -2902,8 +2718,8 @@ const AdminProvider = (props) => {
2902
2718
  };
2903
2719
 
2904
2720
  var __defProp$4 = Object.defineProperty;
2905
- var __defProps$3 = Object.defineProperties;
2906
- var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
2721
+ var __defProps$4 = Object.defineProperties;
2722
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2907
2723
  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
2908
2724
  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
2909
2725
  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -2919,8 +2735,8 @@ var __spreadValues$4 = (a, b) => {
2919
2735
  }
2920
2736
  return a;
2921
2737
  };
2922
- var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
2923
- const useStyles$2 = core.createStyles((theme, props) => ({
2738
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2739
+ const useStyles = core.createStyles((theme, props) => ({
2924
2740
  footer: {
2925
2741
  paddingTop: theme.spacing.md,
2926
2742
  paddingBottom: theme.spacing.md,
@@ -3007,7 +2823,7 @@ const useStyles$2 = core.createStyles((theme, props) => ({
3007
2823
  }
3008
2824
  }));
3009
2825
  const App = (props) => {
3010
- const { classes } = useStyles$2(props);
2826
+ const { classes } = useStyles(props);
3011
2827
  const account = useAccount(props.account, props.accounts, props.onAccountChange);
3012
2828
  return /* @__PURE__ */ React__namespace.createElement(
3013
2829
  core.AppShell,
@@ -3015,7 +2831,7 @@ const App = (props) => {
3015
2831
  padding: "xs",
3016
2832
  navbar: props.navbar && /* @__PURE__ */ React__namespace.createElement(
3017
2833
  Navbar,
3018
- __spreadProps$3(__spreadValues$4({}, props.navbar.props), {
2834
+ __spreadProps$4(__spreadValues$4({}, props.navbar.props), {
3019
2835
  onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
3020
2836
  })
3021
2837
  ),
@@ -3109,61 +2925,52 @@ function Table$3(props) {
3109
2925
  if (props.items.length === 0) {
3110
2926
  return /* @__PURE__ */ React__namespace.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "No pathways to display.");
3111
2927
  }
3112
- return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(
3113
- reactRouterDom.Link,
3114
- {
3115
- key: row.badgeId,
3116
- to: row.href,
3117
- className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
3118
- },
3119
- /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)),
3120
- /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
3121
- )));
2928
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => {
2929
+ var _a;
2930
+ return /* @__PURE__ */ React__namespace.createElement(
2931
+ reactRouterDom.Link,
2932
+ {
2933
+ key: row.pathwayId,
2934
+ to: row.href,
2935
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
2936
+ },
2937
+ /* @__PURE__ */ React__namespace.createElement(Emblem, { imageURL: row.imageURL, alt: row.name, size: "sm", icon: icons.IconRoute, accent: "cyan" }),
2938
+ /* @__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)))),
2939
+ !!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"),
2940
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
2941
+ );
2942
+ }));
3122
2943
  }
3123
2944
 
3124
2945
  const Pathways = (props) => {
3125
2946
  return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Pathways"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-slate-500" }, "Explore all your unique pathway requirements in one clear space")), /* @__PURE__ */ React__namespace.createElement(Table$3, { loading: props.loading, items: props.pathways }));
3126
2947
  };
3127
2948
 
3128
- const useStyles$1 = core.createStyles((theme) => ({
3129
- button: {
3130
- borderTopRightRadius: 0,
3131
- borderBottomRightRadius: 0,
3132
- marginLeft: 0,
3133
- marginRight: 0
3134
- },
3135
- menuControl: {
3136
- borderTopLeftRadius: 0,
3137
- borderBottomLeftRadius: 0,
3138
- border: 0,
3139
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
3140
- }
3141
- }));
3142
2949
  const SplitButton$1 = (props) => {
3143
- const { classes, theme } = useStyles$1();
3144
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
3145
- return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
3146
- core.Button,
2950
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__namespace.createElement(
2951
+ reactRouterDom.Link,
3147
2952
  {
3148
- component: reactRouterDom.Link,
3149
2953
  to: props.href,
3150
- className: classes.button,
3151
- variant: "gradient"
2954
+ className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 no-underline hover:bg-slate-50"
3152
2955
  },
3153
2956
  "Preview"
3154
2957
  ), /* @__PURE__ */ React__namespace.createElement(
3155
- core.Button,
2958
+ "button",
3156
2959
  {
3157
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
3158
- onClick: props.onCopyLinkClick
2960
+ type: "button",
2961
+ onClick: props.onCopyLinkClick,
2962
+ className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
3159
2963
  },
2964
+ /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 13, stroke: 2 }),
3160
2965
  "Copy link"
3161
2966
  ), /* @__PURE__ */ React__namespace.createElement(
3162
- core.Button,
2967
+ "button",
3163
2968
  {
3164
- leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 14 }),
3165
- onClick: props.onExportDataClick
2969
+ type: "button",
2970
+ onClick: props.onExportDataClick,
2971
+ className: "flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-3.5 py-2 text-xs font-bold text-dark-blue-400 shadow-[0_3px_12px_rgba(255,212,77,0.35)]"
3166
2972
  },
2973
+ /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 13, stroke: 2 }),
3167
2974
  "Export data (.csv)"
3168
2975
  ));
3169
2976
  };
@@ -3172,11 +2979,12 @@ function Stack$1(props) {
3172
2979
  if (props.items.length === 0) {
3173
2980
  return null;
3174
2981
  }
3175
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, /* @__PURE__ */ React__namespace.createElement(core.Text, { component: reactRouterDom.Link, to: row.href, color: "dark.4", weight: "bold", size: "md" }, row.badgeName)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
3176
- return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
2982
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-2" }, props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("div", { key: row.badgeName, className: "flex items-center justify-between gap-4 py-1.5" }, /* @__PURE__ */ React__namespace.createElement(reactRouterDom.Link, { to: row.href, className: "text-sm font-bold text-dark-blue-400 no-underline hover:underline" }, row.badgeName), row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-mint-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement("span", { className: "shrink-0 rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
3177
2983
  }
3178
2984
 
3179
2985
  var __defProp$3 = Object.defineProperty;
2986
+ var __defProps$3 = Object.defineProperties;
2987
+ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
3180
2988
  var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
3181
2989
  var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
3182
2990
  var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -3192,7 +3000,10 @@ var __spreadValues$3 = (a, b) => {
3192
3000
  }
3193
3001
  return a;
3194
3002
  };
3003
+ var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
3195
3004
  function Table$2(props) {
3005
+ const [expanded, setExpanded] = React__namespace.useState({});
3006
+ const categories = props.categories || [];
3196
3007
  const preparedItems = React__namespace.useMemo(() => {
3197
3008
  return (props.items || []).map((item) => __spreadValues$3(__spreadValues$3({}, item), item.categoryPoints));
3198
3009
  }, [props.items]);
@@ -3208,55 +3019,26 @@ function Table$2(props) {
3208
3019
  }
3209
3020
  );
3210
3021
  }
3211
- const sortStatus = {
3212
- columnAccessor: sortConfig.key,
3213
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3214
- };
3215
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
3216
- mantineDatatable.DataTable,
3217
- {
3218
- verticalSpacing: "sm",
3219
- sx: { minWidth: 700 },
3220
- withBorder: false,
3221
- borderRadius: "sm",
3222
- withColumnBorders: true,
3223
- striped: true,
3224
- highlightOnHover: true,
3225
- records: sortedItems,
3226
- idAccessor: "userId",
3227
- sortStatus,
3228
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3229
- columns: [
3230
- {
3231
- accessor: "name",
3232
- title: "Student Name",
3233
- sortable: true,
3234
- titleStyle: { whiteSpace: "nowrap" },
3235
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm", noWrap: true }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email)))
3236
- },
3237
- {
3238
- accessor: "isComplete",
3239
- title: "Status",
3240
- sortable: true,
3241
- titleStyle: { whiteSpace: "nowrap" },
3242
- render: (row) => /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: row.isComplete ? "blue" : "red", variant: "filled" }, row.isComplete ? "Complete" : "Incomplete")
3243
- },
3244
- ...props.categories.map((category) => ({
3245
- accessor: category.categoryId,
3246
- title: category.name,
3247
- sortable: true,
3248
- titleStyle: { whiteSpace: "nowrap" },
3249
- render: (row) => {
3250
- var _a;
3251
- return /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "blue", variant: "filled" }, (_a = row[category.categoryId]) != null ? _a : 0, " pts");
3252
- }
3253
- }))
3254
- ],
3255
- rowExpansion: {
3256
- content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$1, { items: record.badges })
3257
- }
3258
- }
3259
- ));
3022
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
3023
+ 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) => {
3024
+ var _a;
3025
+ const isOpen = !!expanded[row.userId];
3026
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
3027
+ return /* @__PURE__ */ React__namespace.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React__namespace.createElement(
3028
+ "div",
3029
+ {
3030
+ onClick: () => setExpanded(__spreadProps$3(__spreadValues$3({}, expanded), { [row.userId]: !isOpen })),
3031
+ className: "flex cursor-pointer items-center gap-4 p-4"
3032
+ },
3033
+ /* @__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))),
3034
+ /* @__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")),
3035
+ categories.map((category) => {
3036
+ var _a2;
3037
+ 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"));
3038
+ }),
3039
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
3040
+ ), 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 })));
3041
+ }));
3260
3042
  }
3261
3043
 
3262
3044
  function Table$1(props) {
@@ -3272,138 +3054,60 @@ function Table$1(props) {
3272
3054
  }
3273
3055
  );
3274
3056
  }
3275
- const sortStatus = {
3276
- columnAccessor: sortConfig.key,
3277
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3278
- };
3279
- return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(
3280
- mantineDatatable.DataTable,
3281
- {
3282
- verticalSpacing: "sm",
3283
- withBorder: false,
3284
- borderRadius: "sm",
3285
- sx: { minWidth: 700 },
3286
- highlightOnHover: true,
3287
- striped: true,
3288
- records: sortedItems,
3289
- idAccessor: "badgeId",
3290
- sortStatus,
3291
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3292
- columns: [
3293
- {
3294
- accessor: "badgeName",
3295
- title: "Badge Name",
3296
- sortable: true,
3297
- render: (row) => /* @__PURE__ */ React__namespace.createElement(
3298
- core.Text,
3299
- {
3300
- component: reactRouterDom.Link,
3301
- to: row.href,
3302
- sx: (theme) => ({
3303
- color: theme.colorScheme === "dark" ? theme.white : theme.black,
3304
- textDecoration: "none",
3305
- fontWeight: 500,
3306
- "&:hover": {
3307
- textDecoration: "underline",
3308
- color: theme.colors.blue[6]
3309
- }
3310
- })
3311
- },
3312
- row.badgeName
3313
- )
3314
- },
3315
- {
3316
- accessor: "percentageCompletion",
3317
- title: "Badge Completion",
3318
- sortable: true,
3319
- render: (row) => {
3320
- const roundedValue = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
3321
- return `${roundedValue}%`;
3322
- }
3323
- }
3324
- ]
3325
- }
3326
- ));
3057
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
3058
+ 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(
3059
+ reactRouterDom.Link,
3060
+ {
3061
+ key: row.badgeId,
3062
+ to: row.href,
3063
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
3064
+ },
3065
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-0 flex-1 text-sm font-bold text-dark-blue-400" }, row.badgeName),
3066
+ /* @__PURE__ */ React__namespace.createElement("div", { className: "w-36 shrink-0 text-right text-xs text-slate-500" }, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")
3067
+ )));
3327
3068
  }
3328
3069
 
3329
- const useStyles = core.createStyles((theme) => ({
3330
- title: {
3331
- fontSize: 34,
3332
- fontWeight: 900,
3333
- [theme.fn.smallerThan("sm")]: {
3334
- fontSize: 24
3335
- }
3336
- },
3337
- description: {
3338
- maxWidth: 600
3339
- }
3340
- }));
3070
+ const TABS$1 = [
3071
+ { label: "By Badge", value: "badges" },
3072
+ { label: "By student", value: "students" }
3073
+ ];
3341
3074
  const Pathway = (props) => {
3342
- const { classes } = useStyles();
3075
+ var _a;
3343
3076
  const [tab, setTab] = React.useState("badges");
3344
3077
  const numberOfStudents = props.students.length;
3345
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
3346
3078
  const numberOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
3347
- return /* @__PURE__ */ React__namespace.createElement(core.Container, { fluid: true, py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
3348
- core.Badge,
3349
- {
3350
- variant: "filled",
3351
- leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
3352
- size: "lg"
3353
- },
3354
- "Back"
3355
- )), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.title || "Pathway"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
3079
+ const criteria = props.criteria || {};
3080
+ const criteriaCategories = (props.categories || []).filter((c) => criteria[c.categoryId] !== void 0);
3081
+ return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-start gap-4" }, /* @__PURE__ */ React__namespace.createElement(Emblem, { imageURL: props.imageURL, alt: props.title, size: "lg", icon: icons.IconRoute, accent: "cyan" }), /* @__PURE__ */ React__namespace.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React__namespace.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React__namespace.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.title || "Pathway"), !!((_a = props.displayTags) == null ? void 0 : _a.length) && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap gap-1.5" }, props.displayTags.map((tag) => /* @__PURE__ */ React__namespace.createElement("span", { key: tag, className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, tag))), /* @__PURE__ */ React__namespace.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description"), criteriaCategories.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-wrap items-center gap-1.5 pt-0.5" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, "Criteria"), criteriaCategories.map((c) => /* @__PURE__ */ React__namespace.createElement("span", { key: c.categoryId, className: "rounded-full bg-sky-blue-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, c.name, ": ", criteria[c.categoryId], "+", c.maxPoints ? ` of ${c.maxPoints}` : "", " pts"))))), !props.trial && /* @__PURE__ */ React__namespace.createElement(
3356
3082
  SplitButton$1,
3357
3083
  {
3358
3084
  href: props.href,
3359
3085
  onCopyLinkClick: props.onCopyLinkClick,
3360
3086
  onExportDataClick: props.onExportDataClick
3361
3087
  }
3362
- ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
3088
+ )), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
3363
3089
  {
3364
3090
  title: props.trial ? "BADGES SUBMITTED" : "PATHWAY COMPLETION",
3365
- value: props.trial ? 0 : numberOfBadgesEarned,
3366
- unit: props.trial ? "" : ""
3091
+ value: props.trial ? 0 : numberOfBadgesEarned
3367
3092
  }
3368
- ] }), !props.trial && /* @__PURE__ */ React__namespace.createElement(
3369
- core.Select,
3093
+ ] }), !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(
3094
+ "select",
3370
3095
  {
3371
- clearable: true,
3372
- clearButtonLabel: "Clear class selection",
3373
- size: "sm",
3374
- placeholder: "Select a class",
3375
- nothingFound: "No options",
3376
3096
  value: props.classId,
3377
- onChange: props.onClassChange,
3378
- icon: /* @__PURE__ */ React__namespace.createElement(icons.IconCategory2, null),
3379
- data: props.classes.map((g) => {
3380
- return { value: g.classId, label: g.name };
3381
- })
3382
- }
3383
- ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, !props.trial && /* @__PURE__ */ React__namespace.createElement(
3384
- Tabs,
3385
- {
3386
- value: tab,
3387
- data: [
3388
- { label: "By Badge", value: "badges" },
3389
- { label: "By student", value: "students" }
3390
- ],
3391
- onChange: setTab
3392
- }
3393
- ), (!!props.trial || tab === "badges") && /* @__PURE__ */ React__namespace.createElement(
3394
- Table$1,
3395
- {
3396
- loading: props.loading,
3397
- items: props.badges
3398
- }
3399
- ), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(
3400
- Table$2,
3097
+ onChange: (e) => props.onClassChange(e.target.value),
3098
+ 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"
3099
+ },
3100
+ /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
3101
+ props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, c.name))
3102
+ )), /* @__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(
3103
+ "button",
3401
3104
  {
3402
- loading: props.loading,
3403
- items: props.students,
3404
- categories: props.categories
3405
- }
3406
- )))))));
3105
+ key: t.value,
3106
+ onClick: () => setTab(t.value),
3107
+ 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"}`
3108
+ },
3109
+ t.label
3110
+ ))), (!!props.trial || tab === "badges") && /* @__PURE__ */ React__namespace.createElement(Table$1, { loading: props.loading, items: props.badges }), !props.trial && tab === "students" && /* @__PURE__ */ React__namespace.createElement(Table$2, { loading: props.loading, items: props.students, categories: props.categories })));
3407
3111
  };
3408
3112
 
3409
3113
  const SplitButton = (props) => {