@local-civics/mgmt-ui 0.1.214 → 0.1.216

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +28 -2
  2. package/dist/index.js +594 -944
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +596 -946
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1,16 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { useState, useMemo } from 'react';
3
- import { IconChevronRight, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconSearch, IconCheck, IconTrash, IconPlus, IconLink, IconDownload, IconCloudUpload, IconInfoCircle, IconPlaylistAdd, IconPointer, IconChevronDown, IconX, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook, IconExternalLink, IconChevronLeft } from '@tabler/icons';
4
- import { Avatar, createStyles, Modal, Center, Loader, Container, Group, Button, Title, Text, UnstyledButton, Card, ScrollArea, SimpleGrid, Tabs as Tabs$1, Stack as Stack$5, Image, Grid, Badge as Badge$1, ActionIcon, LoadingOverlay, Select, Table as Table$l, Drawer, Divider, TextInput, Tooltip, Autocomplete, Paper, Anchor, Box, Menu, Overlay, ThemeIcon, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
3
+ import { IconChevronRight, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconChevronDown, IconArrowLeft, IconSearch, IconCheck, IconTrash, IconPlus, IconLink, IconDownload, IconCloudUpload, IconInfoCircle, IconPlaylistAdd, IconPointer, IconX, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook, IconExternalLink, IconChevronLeft } from '@tabler/icons';
4
+ import { Avatar, createStyles, Modal, Center, Loader, Container, Group, Button, Title, Text, UnstyledButton, Card, ScrollArea, SimpleGrid, Image, Tabs as Tabs$1, Table as Table$l, Stack as Stack$5, LoadingOverlay, Select, Drawer, Divider, TextInput, ActionIcon, Tooltip, Grid, Badge as Badge$1, Autocomplete, Overlay, ThemeIcon, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
5
5
  import { Link } from 'react-router-dom';
6
6
  import { showNotification, NotificationsProvider } from '@mantine/notifications';
7
7
  export { showNotification, updateNotification } from '@mantine/notifications';
8
- import { DataTable } from 'mantine-datatable';
9
8
  import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
10
9
  import { useForm } from '@mantine/form';
11
10
  import * as papa from 'papaparse';
12
11
  import { openConfirmModal, ModalsProvider } from '@mantine/modals';
13
- import AvatarInit from 'avatar-initials';
12
+ import { DataTable } from 'mantine-datatable';
14
13
  import { Chart } from 'react-charts';
15
14
  import { useUncontrolled } from '@mantine/hooks';
16
15
 
@@ -41,7 +40,7 @@ function styleInject(css, ref) {
41
40
  }
42
41
  }
43
42
 
44
- var css_248z = "@font-face{font-family:ProximaNova;src:url(https://cdn.localcivics.io/fonts/ProximaNova.otf) format(\"opentype\")}@font-face{font-family:ProximaNova;font-weight:700;src:url(https://cdn.localcivics.io/fonts/ProximaNovaBold.otf) format(\"opentype\")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\\!relative{position:relative!important}.left-3\\.5{left:.875rem}.top-1\\/2{top:50%}.left-3{left:.75rem}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-1\\.5{margin-top:.375rem}.ml-\\[29px\\]{margin-left:29px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-full{height:100%}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-9{height:2.25rem}.h-screen{height:100vh}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-7{width:1.75rem}.w-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-36{width:9rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-\\[440px\\]{width:440px}.w-40{width:10rem}.w-screen{width:100vw}.w-\\[230px\\]{width:230px}.w-24{width:6rem}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-\\[1100px\\]{max-width:1100px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[18px\\]{gap:18px}.gap-5{gap:1.25rem}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-3{gap:.75rem}.gap-3\\.5{gap:.875rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-y-4{row-gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-sky-blue-400\\/30{border-color:rgba(59,208,242,.3)}.border-mint-400\\/30{border-color:rgba(30,226,175,.3)}.border-gold-400\\/30{border-color:rgba(255,212,77,.3)}.border-transparent{border-color:transparent}.border-l-sky-blue-400{--tw-border-opacity:1;border-left-color:rgb(59 208 242/var(--tw-border-opacity))}.border-l-mint-400{--tw-border-opacity:1;border-left-color:rgb(30 226 175/var(--tw-border-opacity))}.border-l-gold-400{--tw-border-opacity:1;border-left-color:rgb(255 212 77/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-blue-400{--tw-gradient-from:#3bd0f2;--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mint-400{--tw-gradient-from:#1ee2af;--tw-gradient-to:rgba(30,226,175,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gold-400{--tw-gradient-from:#ffd44d;--tw-gradient-to:rgba(255,212,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-dark-blue-600{--tw-gradient-from:#0a0f2e;--tw-gradient-to:rgba(10,15,46,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-blue-400\\/15{--tw-gradient-from:rgba(59,208,242,.15);--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-dark-blue-400{--tw-gradient-to:rgba(35,42,58,0);--tw-gradient-stops:var(--tw-gradient-from),#232a3a,var(--tw-gradient-to)}.to-dark-blue-400{--tw-gradient-to:#232a3a}.to-\\[\\#f5c300\\]{--tw-gradient-to:#f5c300}.to-sky-blue-400{--tw-gradient-to:#3bd0f2}.to-mint-400\\/15{--tw-gradient-to:rgba(30,226,175,.15)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-8{padding:2rem}.p-4{padding:1rem}.p-1{padding:.25rem}.p-5{padding:1.25rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.py-\\[18px\\]{padding-bottom:18px;padding-top:18px}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-proxima{font-family:ProximaNova}.text-\\[15\\.5px\\]{font-size:15.5px}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-\\[11px\\]{font-size:11px}.text-\\[28px\\]{font-size:28px}.text-\\[12\\.5px\\]{font-size:12.5px}.text-base{font-size:1rem;line-height:1.5rem}.text-\\[11\\.5px\\]{font-size:11.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-dark-blue-400{--tw-text-opacity:1;color:rgb(35 42 58/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-gold-400{--tw-text-opacity:1;color:rgb(255 212 77/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\]{--tw-shadow:0 3px 12px rgba(255,212,77,.35);--tw-shadow-colored:0 3px 12px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{--tw-shadow:0 2px 10px rgba(30,226,175,.15);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{border-style:solid;border-width:0}button{background-color:transparent;background-image:none;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-transform:none}.placeholder\\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:scale-\\[1\\.02\\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-sky-blue-400:focus{--tw-border-opacity:1;border-color:rgb(59 208 242/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\\:opacity-50:disabled{opacity:.5}";
43
+ var css_248z = "@font-face{font-family:ProximaNova;src:url(https://cdn.localcivics.io/fonts/ProximaNova.otf) format(\"opentype\")}@font-face{font-family:ProximaNova;font-weight:700;src:url(https://cdn.localcivics.io/fonts/ProximaNovaBold.otf) format(\"opentype\")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\\!relative{position:relative!important}.left-3{left:.75rem}.top-1\\/2{top:50%}.left-3\\.5{left:.875rem}.bottom-\\[-20px\\]{bottom:-20px}.left-1\\/2{left:50%}.m-3{margin:.75rem}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-1\\.5{margin-top:.375rem}.-ml-2{margin-left:-.5rem}.mt-4{margin-top:1rem}.mb-8{margin-bottom:2rem}.ml-\\[29px\\]{margin-left:29px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-full{height:100%}.h-9{height:2.25rem}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-\\[300px\\]{height:300px}.h-screen{height:100vh}.h-11{height:2.75rem}.h-16{height:4rem}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-fit{width:-moz-fit-content;width:fit-content}.w-36{width:9rem}.w-28{width:7rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-40{width:10rem}.w-8{width:2rem}.w-7{width:1.75rem}.w-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-\\[440px\\]{width:440px}.w-20{width:5rem}.w-24{width:6rem}.w-\\[250px\\]{width:250px}.w-screen{width:100vw}.w-11{width:2.75rem}.w-\\[230px\\]{width:230px}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.max-w-\\[460px\\]{max-width:460px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1fr .6fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[18px\\]{gap:18px}.gap-5{gap:1.25rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-3{gap:.75rem}.gap-2{gap:.5rem}.gap-1\\.5{gap:.375rem}.gap-2\\.5{gap:.625rem}.gap-3\\.5{gap:.875rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-y-4{row-gap:1rem}.space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded{border-radius:.25rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-2{border-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-sky-blue-400\\/30{border-color:rgba(59,208,242,.3)}.border-mint-400\\/30{border-color:rgba(30,226,175,.3)}.border-gold-400\\/30{border-color:rgba(255,212,77,.3)}.border-transparent{border-color:transparent}.border-sky-blue-400\\/40{border-color:rgba(59,208,242,.4)}.border-l-sky-blue-400{--tw-border-opacity:1;border-left-color:rgb(59 208 242/var(--tw-border-opacity))}.border-l-mint-400{--tw-border-opacity:1;border-left-color:rgb(30 226 175/var(--tw-border-opacity))}.border-l-gold-400{--tw-border-opacity:1;border-left-color:rgb(255 212 77/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-gold-100{--tw-bg-opacity:1;background-color:rgb(255 248 214/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-blue-400{--tw-gradient-from:#3bd0f2;--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mint-400{--tw-gradient-from:#1ee2af;--tw-gradient-to:rgba(30,226,175,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gold-400{--tw-gradient-from:#ffd44d;--tw-gradient-to:rgba(255,212,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-dark-blue-600{--tw-gradient-from:#0a0f2e;--tw-gradient-to:rgba(10,15,46,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-blue-400\\/15{--tw-gradient-from:rgba(59,208,242,.15);--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-dark-blue-400{--tw-gradient-to:rgba(35,42,58,0);--tw-gradient-stops:var(--tw-gradient-from),#232a3a,var(--tw-gradient-to)}.to-dark-blue-400{--tw-gradient-to:#232a3a}.to-\\[\\#f5c300\\]{--tw-gradient-to:#f5c300}.to-sky-blue-400{--tw-gradient-to:#3bd0f2}.to-mint-400\\/15{--tw-gradient-to:rgba(30,226,175,.15)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-4{padding:1rem}.p-8{padding:2rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-3{padding:.75rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.py-\\[18px\\]{padding-bottom:18px;padding-top:18px}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.py-4{padding-bottom:1rem;padding-top:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.pl-9{padding-left:2.25rem}.pr-4{padding-right:1rem}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pt-0\\.5{padding-top:.125rem}.pt-0{padding-top:0}.pb-12{padding-bottom:3rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-proxima{font-family:ProximaNova}.text-\\[15\\.5px\\]{font-size:15.5px}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[11px\\]{font-size:11px}.text-\\[28px\\]{font-size:28px}.text-\\[12\\.5px\\]{font-size:12.5px}.text-base{font-size:1rem;line-height:1.5rem}.text-\\[11\\.5px\\]{font-size:11.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-dark-blue-400{--tw-text-opacity:1;color:rgb(35 42 58/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-gold-400{--tw-text-opacity:1;color:rgb(255 212 77/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\]{--tw-shadow:0 3px 12px rgba(255,212,77,.35);--tw-shadow-colored:0 3px 12px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{--tw-shadow:0 2px 10px rgba(30,226,175,.15);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{border-style:solid;border-width:0}button{background-color:transparent;background-image:none;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-transform:none}.placeholder\\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.first\\:ml-0:first-child{margin-left:0}.hover\\:scale-\\[1\\.02\\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-sky-blue-400:focus{--tw-border-opacity:1;border-color:rgb(59 208 242/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\\:opacity-50:disabled{opacity:.5}";
45
44
  styleInject(css_248z);
46
45
 
47
46
  function UserButton({ image, name, email }) {
@@ -125,25 +124,25 @@ function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened,
125
124
  ), hasLinks && opened && /* @__PURE__ */ React.createElement("div", { className: "ml-[29px] mt-0.5 flex flex-col gap-0.5 border-l border-slate-100 pl-2.5" }, items));
126
125
  }
127
126
 
128
- var __defProp$e = Object.defineProperty;
129
- var __defProps$a = Object.defineProperties;
130
- var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
131
- var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
132
- var __hasOwnProp$e = Object.prototype.hasOwnProperty;
133
- var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
134
- var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
135
- var __spreadValues$e = (a, b) => {
127
+ var __defProp$f = Object.defineProperty;
128
+ var __defProps$c = Object.defineProperties;
129
+ var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
130
+ var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
131
+ var __hasOwnProp$f = Object.prototype.hasOwnProperty;
132
+ var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
133
+ var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
134
+ var __spreadValues$f = (a, b) => {
136
135
  for (var prop in b || (b = {}))
137
- if (__hasOwnProp$e.call(b, prop))
138
- __defNormalProp$e(a, prop, b[prop]);
139
- if (__getOwnPropSymbols$e)
140
- for (var prop of __getOwnPropSymbols$e(b)) {
141
- if (__propIsEnum$e.call(b, prop))
142
- __defNormalProp$e(a, prop, b[prop]);
136
+ if (__hasOwnProp$f.call(b, prop))
137
+ __defNormalProp$f(a, prop, b[prop]);
138
+ if (__getOwnPropSymbols$f)
139
+ for (var prop of __getOwnPropSymbols$f(b)) {
140
+ if (__propIsEnum$f.call(b, prop))
141
+ __defNormalProp$f(a, prop, b[prop]);
143
142
  }
144
143
  return a;
145
144
  };
146
- var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
145
+ var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
147
146
  const data = [
148
147
  { label: "Home", icon: IconHome2, accent: "cyan" },
149
148
  { label: "Dashboard", icon: IconGauge, accent: "mint" },
@@ -170,12 +169,12 @@ function Navbar(props) {
170
169
  }
171
170
  return /* @__PURE__ */ React.createElement(
172
171
  LinksGroup,
173
- __spreadProps$a(__spreadValues$e(__spreadValues$e({
172
+ __spreadProps$c(__spreadValues$f(__spreadValues$f({
174
173
  key: item.label,
175
174
  active: props.active
176
175
  }, item), context), {
177
176
  links: (item.links || []).map((link) => {
178
- return __spreadValues$e(__spreadValues$e({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
177
+ return __spreadValues$f(__spreadValues$f({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
179
178
  })
180
179
  })
181
180
  );
@@ -195,7 +194,7 @@ const UtilLink = (props) => {
195
194
  );
196
195
  };
197
196
 
198
- const useStyles$k = createStyles((theme) => ({
197
+ const useStyles$a = createStyles((theme) => ({
199
198
  inner: {
200
199
  paddingTop: theme.spacing.xl,
201
200
  paddingBottom: theme.spacing.xl * 4
@@ -231,7 +230,7 @@ const useStyles$k = createStyles((theme) => ({
231
230
  }
232
231
  }));
233
232
  const GettingStarted = (props) => {
234
- const { classes } = useStyles$k();
233
+ const { classes } = useStyles$a();
235
234
  return /* @__PURE__ */ React.createElement(
236
235
  Modal,
237
236
  {
@@ -245,7 +244,7 @@ const GettingStarted = (props) => {
245
244
  );
246
245
  };
247
246
 
248
- const useStyles$j = createStyles((theme) => ({
247
+ const useStyles$9 = createStyles((theme) => ({
249
248
  title: {
250
249
  fontSize: 34,
251
250
  fontWeight: 900,
@@ -286,7 +285,7 @@ const useStyles$j = createStyles((theme) => ({
286
285
  }
287
286
  }));
288
287
  const SwitchAccount = (props) => {
289
- const { classes, theme } = useStyles$j();
288
+ const { classes, theme } = useStyles$9();
290
289
  const options = props.accounts.map((a) => {
291
290
  return /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React.createElement(Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
292
291
  });
@@ -317,56 +316,55 @@ const StatsGroup = ({ data, footer }) => {
317
316
  return /* @__PURE__ */ React.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);
318
317
  };
319
318
 
320
- const Tabs = (props) => {
321
- var _a;
322
- const tabs = (_a = props.data) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(Tabs$1.Tab, { key: item.value, value: item.value }, item.label || item.value));
323
- return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
319
+ const SIZE = {
320
+ sm: { box: "h-11 w-11", rounded: "rounded-xl", icon: 20 },
321
+ lg: { box: "h-16 w-16", rounded: "rounded-2xl", icon: 28 }
324
322
  };
325
-
326
- const useStyles$i = createStyles((theme) => ({
327
- button: {
328
- borderTopRightRadius: 0,
329
- borderBottomRightRadius: 0,
330
- marginLeft: 0,
331
- marginRight: 0
332
- },
333
- menuControl: {
334
- borderTopLeftRadius: 0,
335
- borderBottomLeftRadius: 0,
336
- border: 0,
337
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
323
+ const ACCENT = {
324
+ cyan: { bg: "bg-sky-blue-400/15", text: "text-sky-blue-400" },
325
+ mint: { bg: "bg-mint-400/15", text: "text-mint-400" },
326
+ gold: { bg: "bg-gold-400/15", text: "text-gold-400" }
327
+ };
328
+ function Emblem(props) {
329
+ const s = SIZE[props.size || "sm"];
330
+ const a = ACCENT[props.accent];
331
+ const Icon = props.icon;
332
+ if (props.imageURL) {
333
+ return /* @__PURE__ */ React.createElement("img", { src: props.imageURL, alt: props.alt || "", className: `${s.box} shrink-0 ${s.rounded} object-cover` });
338
334
  }
339
- }));
335
+ return /* @__PURE__ */ React.createElement("div", { className: `flex ${s.box} shrink-0 items-center justify-center ${s.rounded} ${a.bg}` }, /* @__PURE__ */ React.createElement(Icon, { size: s.icon, stroke: 1.75, className: a.text }));
336
+ }
337
+
340
338
  const SplitButton$4 = (props) => {
341
- const { classes, theme } = useStyles$i();
342
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
343
- return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
344
- Button,
339
+ return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
340
+ Link,
345
341
  {
346
- component: Link,
347
342
  to: props.href,
348
- className: classes.button,
349
- variant: "gradient"
343
+ 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"
350
344
  },
351
345
  "Preview"
352
346
  ), /* @__PURE__ */ React.createElement(
353
- Button,
347
+ "button",
354
348
  {
355
- leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
356
- onClick: props.onCopyLinkClick
349
+ type: "button",
350
+ onClick: props.onCopyLinkClick,
351
+ 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"
357
352
  },
353
+ /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 13, stroke: 2 }),
358
354
  "Copy link"
359
355
  ), /* @__PURE__ */ React.createElement(
360
- Button,
356
+ "button",
361
357
  {
362
- leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
363
- onClick: props.onExportDataClick
358
+ type: "button",
359
+ onClick: props.onExportDataClick,
360
+ 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)]"
364
361
  },
362
+ /* @__PURE__ */ React.createElement(IconTableExport, { size: 13, stroke: 2 }),
365
363
  "Export data (.csv)"
366
364
  ));
367
365
  };
368
366
 
369
- const useStyles$h = createStyles((theme) => ({
367
+ const useStyles$8 = createStyles((theme) => ({
370
368
  wrapper: {
371
369
  display: "flex",
372
370
  alignItems: "center",
@@ -417,7 +415,7 @@ const useStyles$h = createStyles((theme) => ({
417
415
  }
418
416
  }));
419
417
  const PlaceholderBanner = (props) => {
420
- const { classes } = useStyles$h();
418
+ const { classes } = useStyles$8();
421
419
  const title = props.title || "Nothing to display";
422
420
  const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
423
421
  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.body }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React.createElement(Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -427,8 +425,7 @@ function Stack$4(props) {
427
425
  if (props.items.length === 0) {
428
426
  return null;
429
427
  }
430
- const rows = props.items.map((row) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href, color: "dark.4", weight: "bold", size: "md" }, row.lessonName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
431
- return /* @__PURE__ */ React.createElement(Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
428
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, props.items.map((row) => /* @__PURE__ */ React.createElement("div", { key: row.lessonName, className: "flex items-center justify-between gap-4 py-1.5" }, /* @__PURE__ */ React.createElement(Link, { to: row.href, className: "text-sm font-bold text-dark-blue-400 no-underline hover:underline" }, row.lessonName), row.completion >= 1 && /* @__PURE__ */ React.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.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.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"))));
432
429
  }
433
430
 
434
431
  function useSortableData(items, config = { key: "", direction: null }) {
@@ -469,28 +466,29 @@ function useSortableData(items, config = { key: "", direction: null }) {
469
466
  return { items: sortedItems, requestSort, sortConfig };
470
467
  }
471
468
 
472
- var __defProp$d = Object.defineProperty;
473
- var __defProps$9 = Object.defineProperties;
474
- var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
475
- var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
476
- var __hasOwnProp$d = Object.prototype.hasOwnProperty;
477
- var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
478
- var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
479
- var __spreadValues$d = (a, b) => {
469
+ var __defProp$e = Object.defineProperty;
470
+ var __defProps$b = Object.defineProperties;
471
+ var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
472
+ var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
473
+ var __hasOwnProp$e = Object.prototype.hasOwnProperty;
474
+ var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
475
+ var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
476
+ var __spreadValues$e = (a, b) => {
480
477
  for (var prop in b || (b = {}))
481
- if (__hasOwnProp$d.call(b, prop))
482
- __defNormalProp$d(a, prop, b[prop]);
483
- if (__getOwnPropSymbols$d)
484
- for (var prop of __getOwnPropSymbols$d(b)) {
485
- if (__propIsEnum$d.call(b, prop))
486
- __defNormalProp$d(a, prop, b[prop]);
478
+ if (__hasOwnProp$e.call(b, prop))
479
+ __defNormalProp$e(a, prop, b[prop]);
480
+ if (__getOwnPropSymbols$e)
481
+ for (var prop of __getOwnPropSymbols$e(b)) {
482
+ if (__propIsEnum$e.call(b, prop))
483
+ __defNormalProp$e(a, prop, b[prop]);
487
484
  }
488
485
  return a;
489
486
  };
490
- var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
487
+ var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
491
488
  function Table$k(props) {
489
+ const [expanded, setExpanded] = React.useState({});
492
490
  const preparedItems = React.useMemo(() => {
493
- return props.items.map((item) => __spreadProps$9(__spreadValues$d({}, item), {
491
+ return props.items.map((item) => __spreadProps$b(__spreadValues$e({}, item), {
494
492
  status: item.isComplete ? 1 : 0
495
493
  }));
496
494
  }, [props.items]);
@@ -506,40 +504,22 @@ function Table$k(props) {
506
504
  }
507
505
  );
508
506
  }
509
- const sortStatus = {
510
- columnAccessor: sortConfig.key,
511
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
512
- };
513
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
514
- DataTable,
515
- {
516
- verticalSpacing: "sm",
517
- sx: { minWidth: 700 },
518
- withBorder: false,
519
- borderRadius: "sm",
520
- withColumnBorders: true,
521
- striped: true,
522
- highlightOnHover: true,
523
- records: sortedItems,
524
- sortStatus,
525
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
526
- idAccessor: "userId",
527
- columns: [{
528
- accessor: "name",
529
- title: "Student Name",
530
- sortable: true,
531
- render: (row) => /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email)))
532
- }, {
533
- accessor: "status",
534
- title: "Status",
535
- sortable: true,
536
- render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Incomplete"))
537
- }],
538
- rowExpansion: {
539
- content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$4, { items: record.lessons })
540
- }
541
- }
542
- ));
507
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
508
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("name"), className: "flex-1 text-left hover:text-slate-600" }, "Student Name", indicator("name")), /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("status"), className: "w-28 shrink-0 text-center hover:text-slate-600" }, "Status", indicator("status")), /* @__PURE__ */ React.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
509
+ var _a;
510
+ const isOpen = !!expanded[row.userId];
511
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
512
+ return /* @__PURE__ */ React.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement(
513
+ "div",
514
+ {
515
+ onClick: () => setExpanded(__spreadProps$b(__spreadValues$e({}, expanded), { [row.userId]: !isOpen })),
516
+ className: "flex cursor-pointer items-center gap-4 p-4"
517
+ },
518
+ /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-3" }, row.avatar ? /* @__PURE__ */ React.createElement("img", { src: row.avatar, className: "h-9 w-9 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React.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.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-sm font-bold text-dark-blue-400" }, row.name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs text-slate-400" }, row.email))),
519
+ /* @__PURE__ */ React.createElement("div", { className: "w-28 shrink-0 text-center" }, row.isComplete ? /* @__PURE__ */ React.createElement("span", { className: "rounded-full bg-mint-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Complete") : /* @__PURE__ */ React.createElement("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, "Incomplete")),
520
+ /* @__PURE__ */ React.createElement(IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
521
+ ), isOpen && /* @__PURE__ */ React.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React.createElement(Stack$4, { items: row.lessons })));
522
+ }));
543
523
  }
544
524
 
545
525
  function Table$j(props) {
@@ -549,121 +529,63 @@ function Table$j(props) {
549
529
  PlaceholderBanner,
550
530
  {
551
531
  title: "No lessons to display",
552
- description: "There are not lessons in badge.",
532
+ description: "There are no lessons in this badge.",
553
533
  loading: props.loading,
554
534
  icon: "badges"
555
535
  }
556
536
  );
557
537
  }
558
- const sortStatus = {
559
- columnAccessor: sortConfig.key,
560
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
561
- };
562
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
563
- DataTable,
538
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
539
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("lessonName"), className: "flex-1 text-left hover:text-slate-600" }, "Lesson Name", indicator("lessonName")), /* @__PURE__ */ React.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.createElement(
540
+ Link,
564
541
  {
565
- verticalSpacing: "sm",
566
- sx: { minWidth: 700 },
567
- highlightOnHover: true,
568
- striped: true,
569
- records: sortedItems,
570
- sortStatus,
571
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
572
- columns: [
573
- {
574
- accessor: "lessonName",
575
- title: "Lesson Name",
576
- sortable: true,
577
- render: (row) => /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.lessonName)
578
- },
579
- {
580
- accessor: "percentageCompletion",
581
- title: "Lesson Completion",
582
- sortable: true,
583
- render: (row) => `${Math.round((row.percentageCompletion + Number.EPSILON) * 100)}%`
584
- }
585
- ]
586
- }
587
- ));
542
+ key: row.lessonId,
543
+ to: row.href,
544
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
545
+ },
546
+ /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1 text-sm font-bold text-dark-blue-400" }, row.lessonName),
547
+ /* @__PURE__ */ React.createElement("div", { className: "w-36 shrink-0 text-right text-xs text-slate-500" }, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")
548
+ )));
588
549
  }
589
550
 
590
- const useStyles$g = createStyles((theme) => ({
591
- title: {
592
- fontSize: 34,
593
- fontWeight: 900,
594
- [theme.fn.smallerThan("sm")]: {
595
- fontSize: 24
596
- }
597
- },
598
- description: {
599
- maxWidth: 600
600
- }
601
- }));
551
+ const TABS$3 = [
552
+ { label: "By lesson", value: "lessons" },
553
+ { label: "By student", value: "students" }
554
+ ];
602
555
  const Badge = (props) => {
603
- const { classes } = useStyles$g();
604
556
  const [tab, setTab] = useState("lessons");
605
557
  const numberOfStudents = props.students.length;
606
558
  const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
607
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
608
- return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
609
- Badge$1,
610
- {
611
- variant: "filled",
612
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
613
- size: "lg"
614
- },
615
- "Back"
616
- )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
559
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-4" }, /* @__PURE__ */ React.createElement(Emblem, { imageURL: props.imageURL, alt: props.displayName, size: "lg", icon: IconAlbum, accent: "mint" }), /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.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.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Badge"), /* @__PURE__ */ React.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description"))), !props.trial && /* @__PURE__ */ React.createElement(
617
560
  SplitButton$4,
618
561
  {
619
562
  href: props.href,
620
563
  onCopyLinkClick: props.onCopyLinkClick,
621
564
  onExportDataClick: props.onExportDataClick
622
565
  }
623
- ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
566
+ )), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
624
567
  {
625
568
  title: props.trial ? "LESSONS SUBMITTED" : "BADGE COMPLETION",
626
- value: props.trial ? props.lessonsCompleted || 0 : numberOfBadges,
627
- unit: props.trial ? "" : ""
569
+ value: props.trial ? props.lessonsCompleted || 0 : numberOfBadges
628
570
  }
629
- ] }), !props.trial && /* @__PURE__ */ React.createElement(
630
- Select,
571
+ ] }), !props.trial && /* @__PURE__ */ React.createElement("div", { className: "relative w-full max-w-xs" }, /* @__PURE__ */ React.createElement(IconCategory2, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React.createElement(
572
+ "select",
631
573
  {
632
- clearable: true,
633
- clearButtonLabel: "Clear class selection",
634
- size: "sm",
635
- placeholder: "Select a class",
636
- nothingFound: "No options",
637
574
  value: props.classId,
638
- onChange: props.onClassChange,
639
- icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
640
- data: props.classes.map((g) => {
641
- return { value: g.classId, label: g.name };
642
- })
643
- }
644
- ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
645
- Tabs,
646
- {
647
- value: tab,
648
- data: [
649
- { label: "By lesson", value: "lessons" },
650
- { label: "By student", value: "students" }
651
- ],
652
- onChange: setTab
653
- }
654
- ), (!!props.trial || tab === "lessons") && /* @__PURE__ */ React.createElement(
655
- Table$j,
656
- {
657
- loading: props.loading,
658
- items: props.lessons
659
- }
660
- ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
661
- Table$k,
575
+ onChange: (e) => props.onClassChange(e.target.value),
576
+ 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"
577
+ },
578
+ /* @__PURE__ */ React.createElement("option", { value: "" }, "All classes"),
579
+ props.classes.map((c) => /* @__PURE__ */ React.createElement("option", { key: c.classId, value: c.classId }, c.name))
580
+ )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, !props.trial && /* @__PURE__ */ React.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$3.map((t) => /* @__PURE__ */ React.createElement(
581
+ "button",
662
582
  {
663
- loading: props.loading,
664
- items: props.students
665
- }
666
- )))))));
583
+ key: t.value,
584
+ onClick: () => setTab(t.value),
585
+ 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"}`
586
+ },
587
+ t.label
588
+ ))), (!!props.trial || tab === "lessons") && /* @__PURE__ */ React.createElement(Table$j, { loading: props.loading, items: props.lessons }), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(Table$k, { loading: props.loading, items: props.students })));
667
589
  };
668
590
 
669
591
  function Table$i(props) {
@@ -673,20 +595,40 @@ function Table$i(props) {
673
595
  if (props.items.length === 0) {
674
596
  return /* @__PURE__ */ React.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.");
675
597
  }
676
- return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, props.items.map((row, i) => /* @__PURE__ */ React.createElement(
598
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, "Badge"), /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React.createElement("div", { className: "w-28 shrink-0" }, "Lessons"), /* @__PURE__ */ React.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React.createElement(
677
599
  Link,
678
600
  {
679
601
  key: row.badgeId,
680
602
  to: row.href,
681
- className: `block px-5 py-4 no-underline hover:bg-slate-50 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
603
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
604
+ },
605
+ /* @__PURE__ */ React.createElement(Emblem, { imageURL: row.imageURL, alt: row.name, size: "sm", icon: IconAlbum, accent: "mint" }),
606
+ /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)),
607
+ /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
608
+ /* @__PURE__ */ React.createElement("div", { className: "w-28 shrink-0 text-xs text-slate-500" }, row.numberOfLessons ? `${row.numberOfLessons} lesson${row.numberOfLessons === 1 ? "" : "s"}` : "\u2014"),
609
+ /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
610
+ )));
611
+ }
612
+
613
+ function PathwayFilterPills(props) {
614
+ if (props.pathways.length === 0) {
615
+ return null;
616
+ }
617
+ 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"}`;
618
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2" }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => props.onChange(""), className: pillClass(!props.selected) }, "All"), props.pathways.map((p) => /* @__PURE__ */ React.createElement(
619
+ "button",
620
+ {
621
+ key: p.pathwayId,
622
+ type: "button",
623
+ onClick: () => props.onChange(p.pathwayId),
624
+ className: pillClass(props.selected === p.pathwayId)
682
625
  },
683
- /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name),
684
- row.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)
626
+ p.title
685
627
  )));
686
628
  }
687
629
 
688
630
  const Badges = (props) => {
689
- return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Project-sized skills acquisition and standards alignment.")), /* @__PURE__ */ React.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.createElement(IconSearch, { size: 15, stroke: 1.75, className: "text-slate-400" }), /* @__PURE__ */ React.createElement(
631
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Project-sized skills acquisition and standards alignment.")), /* @__PURE__ */ React.createElement(PathwayFilterPills, { pathways: props.pathways, selected: props.selectedPathway, onChange: props.onPathwayChange }), /* @__PURE__ */ React.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.createElement(IconSearch, { size: 15, stroke: 1.75, className: "text-slate-400" }), /* @__PURE__ */ React.createElement(
690
632
  "input",
691
633
  {
692
634
  type: "text",
@@ -697,6 +639,12 @@ const Badges = (props) => {
697
639
  )), /* @__PURE__ */ React.createElement(Table$i, { loading: props.loading, items: props.badges }));
698
640
  };
699
641
 
642
+ const Tabs = (props) => {
643
+ var _a;
644
+ const tabs = (_a = props.data) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(Tabs$1.Tab, { key: item.value, value: item.value }, item.label || item.value));
645
+ return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
646
+ };
647
+
700
648
  function Table$h(props) {
701
649
  if (props.items.length === 0) {
702
650
  return /* @__PURE__ */ React.createElement(
@@ -803,7 +751,7 @@ function Table$d(props) {
803
751
 
804
752
  const Dashboard = (props) => {
805
753
  const [tab, setTab] = useState("students");
806
- return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { size: "h3" }, "Dashboard"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm", mt: "md" }, "Track your students\u2019 pathway progress")), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
754
+ return /* @__PURE__ */ React.createElement(Container, { fluid: true, py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { size: "h3" }, "Dashboard"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm", mt: "md" }, "Track your students\u2019 pathway progress")), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
807
755
  {
808
756
  title: "# OF STUDENTS",
809
757
  value: props.students.length
@@ -885,7 +833,26 @@ const Dashboard = (props) => {
885
833
  )))))));
886
834
  };
887
835
 
888
- const openDeleteModal = (student, onDelete) => openConfirmModal({
836
+ var __defProp$d = Object.defineProperty;
837
+ var __defProps$a = Object.defineProperties;
838
+ var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
839
+ var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
840
+ var __hasOwnProp$d = Object.prototype.hasOwnProperty;
841
+ var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
842
+ var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
843
+ var __spreadValues$d = (a, b) => {
844
+ for (var prop in b || (b = {}))
845
+ if (__hasOwnProp$d.call(b, prop))
846
+ __defNormalProp$d(a, prop, b[prop]);
847
+ if (__getOwnPropSymbols$d)
848
+ for (var prop of __getOwnPropSymbols$d(b)) {
849
+ if (__propIsEnum$d.call(b, prop))
850
+ __defNormalProp$d(a, prop, b[prop]);
851
+ }
852
+ return a;
853
+ };
854
+ var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
855
+ const openDeleteModal$1 = (student, onDelete) => openConfirmModal({
889
856
  title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
890
857
  centered: true,
891
858
  children: /* @__PURE__ */ React.createElement(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."),
@@ -894,24 +861,32 @@ const openDeleteModal = (student, onDelete) => openConfirmModal({
894
861
  onConfirm: () => onDelete(student)
895
862
  });
896
863
  function Table$c(props) {
864
+ const preparedItems = React.useMemo(() => {
865
+ return props.items.map((item) => __spreadProps$a(__spreadValues$d({}, item), {
866
+ fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
867
+ }));
868
+ }, [props.items]);
869
+ const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
897
870
  if (props.loading) {
898
871
  return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
899
872
  }
900
873
  if (props.items.length === 0) {
901
874
  return /* @__PURE__ */ React.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "You have not rostered any students yet.");
902
875
  }
903
- return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] gap-3 border-b border-slate-100 px-5 py-3 text-[10px] font-bold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("div", null, "Name"), /* @__PURE__ */ React.createElement("div", null, "Role"), /* @__PURE__ */ React.createElement("div", null, "Badges Earned"), /* @__PURE__ */ React.createElement("div", null, "Lessons Completed"), /* @__PURE__ */ React.createElement("div", null, "Account Created?"), /* @__PURE__ */ React.createElement("div", null)), props.items.map((row, i) => {
876
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
877
+ return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] gap-3 border-b border-slate-100 px-5 py-3 text-[10px] font-bold uppercase tracking-wide text-slate-500" }, /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("fullName"), className: "flex items-center text-left hover:text-slate-700" }, "Name", indicator("fullName")), /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("isAdmin"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Role", indicator("isAdmin")), /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("badgesEarned"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Badges Earned", indicator("badgesEarned")), /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("lessonsCompleted"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Lessons Completed", indicator("lessonsCompleted")), /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("hasAccount"), className: "flex items-center justify-center text-center hover:text-slate-700" }, "Account Created?", indicator("hasAccount")), /* @__PURE__ */ React.createElement("div", null)), sortedItems.map((row, i) => {
904
878
  var _a, _b;
905
879
  const name = row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email;
906
880
  const initials = (((_a = row.givenName) == null ? void 0 : _a[0]) || row.email[0] || "?") + (((_b = row.familyName) == null ? void 0 : _b[0]) || "");
881
+ const identity = /* @__PURE__ */ React.createElement(React.Fragment, null, row.avatar ? /* @__PURE__ */ React.createElement("img", { className: "h-8 w-8 shrink-0 rounded-full object-cover", src: row.avatar, alt: name }) : /* @__PURE__ */ React.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.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-[10.5px] text-slate-500" }, row.email)));
907
882
  return /* @__PURE__ */ React.createElement(
908
883
  "div",
909
884
  {
910
885
  key: row.email,
911
- className: `grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
886
+ className: `grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < sortedItems.length - 1 ? "border-b border-slate-100" : ""}`
912
887
  },
913
- /* @__PURE__ */ React.createElement(Link, { to: row.href, className: "flex min-w-0 items-center gap-2.5 no-underline" }, row.avatar ? /* @__PURE__ */ React.createElement("img", { className: "h-8 w-8 shrink-0 rounded-full object-cover", src: row.avatar, alt: name }) : /* @__PURE__ */ React.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.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-[10.5px] text-slate-400" }, row.email))),
914
- /* @__PURE__ */ React.createElement(
888
+ row.href ? /* @__PURE__ */ React.createElement(Link, { to: row.href, className: "flex min-w-0 items-center gap-2.5 no-underline" }, identity) : /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center gap-2.5" }, identity),
889
+ /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
915
890
  "select",
916
891
  {
917
892
  disabled: row.readonly,
@@ -921,16 +896,16 @@ function Table$c(props) {
921
896
  },
922
897
  /* @__PURE__ */ React.createElement("option", { value: "student" }, "Student"),
923
898
  /* @__PURE__ */ React.createElement("option", { value: "educator" }, "Educator")
924
- ),
925
- /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.badgesEarned),
926
- /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.lessonsCompleted),
927
- /* @__PURE__ */ React.createElement("div", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { size: 16, stroke: 3, className: "text-mint-400" })),
899
+ )),
900
+ /* @__PURE__ */ React.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, row.badgesEarned),
901
+ /* @__PURE__ */ React.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, row.lessonsCompleted),
902
+ /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { size: 16, stroke: 3, className: "text-mint-400" })),
928
903
  /* @__PURE__ */ React.createElement("div", null, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(
929
904
  "button",
930
905
  {
931
906
  type: "button",
932
- onClick: () => openDeleteModal(row, props.onDelete),
933
- className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-300 hover:bg-red-50 hover:text-red-500"
907
+ onClick: () => openDeleteModal$1(row, props.onDelete),
908
+ className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
934
909
  },
935
910
  /* @__PURE__ */ React.createElement(IconTrash, { size: 14, stroke: 1.75 })
936
911
  ))
@@ -939,8 +914,8 @@ function Table$c(props) {
939
914
  }
940
915
 
941
916
  var __defProp$c = Object.defineProperty;
942
- var __defProps$8 = Object.defineProperties;
943
- var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
917
+ var __defProps$9 = Object.defineProperties;
918
+ var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
944
919
  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
945
920
  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
946
921
  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -956,7 +931,7 @@ var __spreadValues$c = (a, b) => {
956
931
  }
957
932
  return a;
958
933
  };
959
- var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
934
+ var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
960
935
  const Class = (props) => {
961
936
  const [opened, setOpened] = useState(false);
962
937
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -968,8 +943,8 @@ const Class = (props) => {
968
943
  padding: "xl",
969
944
  size: "xl"
970
945
  },
971
- /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$8(__spreadValues$c({}, props), { close: () => setOpened(false) }))
972
- ), /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-5xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.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.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, props.description || "No description")), !props.loading && /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
946
+ /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$9(__spreadValues$c({}, props), { close: () => setOpened(false) }))
947
+ ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.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.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, props.description || "No description")), !props.loading && /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
973
948
  "button",
974
949
  {
975
950
  type: "button",
@@ -1203,7 +1178,7 @@ var __spreadValues$b = (a, b) => {
1203
1178
  }
1204
1179
  return a;
1205
1180
  };
1206
- const useStyles$f = createStyles((theme) => ({
1181
+ const useStyles$7 = createStyles((theme) => ({
1207
1182
  title: {
1208
1183
  fontSize: 34,
1209
1184
  fontWeight: 900,
@@ -1216,7 +1191,7 @@ const useStyles$f = createStyles((theme) => ({
1216
1191
  }
1217
1192
  }));
1218
1193
  const Classes = (props) => {
1219
- const { classes } = useStyles$f();
1194
+ const { classes } = useStyles$7();
1220
1195
  const form = useForm({
1221
1196
  initialValues: {
1222
1197
  classId: "",
@@ -1258,7 +1233,7 @@ const Classes = (props) => {
1258
1233
  placeholder: "A class for my first period English students"
1259
1234
  }, form.getInputProps("description"))
1260
1235
  )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))
1261
- ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Organize people into classes"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Create classes, cohorts, or custom subgroups")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
1236
+ ), /* @__PURE__ */ React.createElement(Container, { fluid: true, py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Organize people into classes"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Create classes, cohorts, or custom subgroups")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
1262
1237
  Button,
1263
1238
  {
1264
1239
  onClick: () => setOpened(true),
@@ -1287,24 +1262,6 @@ const Classes = (props) => {
1287
1262
  ))))));
1288
1263
  };
1289
1264
 
1290
- const useStyles$e = createStyles((theme) => ({
1291
- title: {
1292
- fontSize: 34,
1293
- fontWeight: 900,
1294
- marginTop: 16,
1295
- [theme.fn.smallerThan("sm")]: {
1296
- fontSize: 24
1297
- }
1298
- },
1299
- description: {
1300
- maxWidth: 600
1301
- }
1302
- }));
1303
- const UserInfo = (props) => {
1304
- const { classes } = useStyles$e();
1305
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
1306
- };
1307
-
1308
1265
  function Table$a(props) {
1309
1266
  if (props.items.length === 0) {
1310
1267
  return /* @__PURE__ */ React.createElement(
@@ -1317,28 +1274,15 @@ function Table$a(props) {
1317
1274
  }
1318
1275
  );
1319
1276
  }
1320
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
1321
- DataTable,
1277
+ return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, props.items.map((row, i) => /* @__PURE__ */ React.createElement(
1278
+ "div",
1322
1279
  {
1323
- verticalSpacing: "sm",
1324
- sx: { minWidth: 700 },
1325
- withBorder: false,
1326
- borderRadius: "sm",
1327
- withColumnBorders: true,
1328
- striped: true,
1329
- highlightOnHover: true,
1330
- records: props.items,
1331
- idAccessor: "badgeId",
1332
- columns: [{
1333
- accessor: "name",
1334
- title: "Badge Name",
1335
- render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, null, row.badgeName))
1336
- }, {
1337
- accessor: "status",
1338
- render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Incomplete"))
1339
- }]
1340
- }
1341
- ));
1280
+ key: row.badgeId || row.badgeName,
1281
+ className: `flex items-center justify-between gap-4 px-5 py-4 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
1282
+ },
1283
+ /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.badgeName),
1284
+ /* @__PURE__ */ React.createElement("span", { className: `shrink-0 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide ${row.isComplete ? "bg-mint-100 text-dark-blue-400" : "bg-slate-100 text-slate-500"}` }, row.isComplete ? "Complete" : "Incomplete")
1285
+ )));
1342
1286
  }
1343
1287
 
1344
1288
  function Table$9(props) {
@@ -1353,8 +1297,26 @@ function Table$9(props) {
1353
1297
  }
1354
1298
  );
1355
1299
  }
1356
- const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.questionName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, row.questionName), /* @__PURE__ */ React.createElement("td", null, row.answer.join(","))));
1357
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Question"), /* @__PURE__ */ React.createElement("th", null, "Answer"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
1300
+ const groups = [];
1301
+ const groupByLessonId = {};
1302
+ props.items.forEach((row) => {
1303
+ let group = groupByLessonId[row.lessonId];
1304
+ if (!group) {
1305
+ group = { lessonId: row.lessonId, lessonName: row.lessonName, badgeName: row.badgeName, href: row.href, items: [] };
1306
+ groupByLessonId[row.lessonId] = group;
1307
+ groups.push(group);
1308
+ }
1309
+ group.items.push(row);
1310
+ });
1311
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, groups.map((group) => /* @__PURE__ */ React.createElement("div", { key: group.lessonId, className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "border-b border-slate-100 px-5 py-4" }, /* @__PURE__ */ React.createElement(Link, { to: group.href, className: "text-sm font-bold text-dark-blue-400 no-underline hover:underline" }, group.lessonName), group.badgeName && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs text-slate-500" }, group.badgeName)), group.items.map((row, i) => /* @__PURE__ */ React.createElement(
1312
+ "div",
1313
+ {
1314
+ key: row.questionName,
1315
+ className: `px-5 py-4 ${i < group.items.length - 1 ? "border-b border-slate-100" : ""}`
1316
+ },
1317
+ /* @__PURE__ */ React.createElement("div", { className: "text-xs font-semibold text-slate-500" }, row.questionName),
1318
+ /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs text-slate-600" }, row.answer.join(", "))
1319
+ )))));
1358
1320
  }
1359
1321
 
1360
1322
  function Table$8(props) {
@@ -1369,74 +1331,48 @@ function Table$8(props) {
1369
1331
  }
1370
1332
  );
1371
1333
  }
1372
- const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, row.rating.toLocaleString())));
1373
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
1334
+ return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, props.items.map((row, i) => /* @__PURE__ */ React.createElement(
1335
+ "div",
1336
+ {
1337
+ key: row.lessonId || row.lessonName,
1338
+ className: `flex items-start justify-between gap-4 px-5 py-4 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
1339
+ },
1340
+ /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement(Link, { to: row.href, className: "text-sm font-bold text-dark-blue-400 no-underline hover:underline" }, row.lessonName), row.badgeName && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs text-slate-500" }, row.badgeName), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-xs text-slate-600" }, row.reflection)),
1341
+ /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, row.rating.toLocaleString())
1342
+ )));
1374
1343
  }
1375
1344
 
1345
+ const TABS$2 = [
1346
+ { label: "My badges", value: "badges" },
1347
+ { label: "My answers", value: "answers" },
1348
+ { label: "My reflections", value: "reflections" }
1349
+ ];
1376
1350
  const Student = (props) => {
1377
1351
  const [tab, setTab] = useState("badges");
1378
1352
  const numberOfBadgesCompleted = props.badges.length > 0 ? props.badges.filter((b) => b.isComplete).length : 0;
1379
- const TEMPORARY_numberOfLessonsCompleted = props.lessons.filter((l) => l.isComplete).length;
1380
- return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
1381
- Badge$1,
1382
- {
1383
- variant: "filled",
1384
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
1385
- size: "lg"
1386
- },
1387
- "Back"
1388
- )), /* @__PURE__ */ React.createElement(
1389
- UserInfo,
1390
- {
1391
- variant: "compact",
1392
- name: props.name,
1393
- impactStatement: props.impactStatement
1394
- }
1395
- ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "lg" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
1353
+ const numberOfLessonsCompleted = props.lessons.filter((l) => l.isComplete).length;
1354
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.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.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.name || "Student"), props.impactStatement && /* @__PURE__ */ React.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.impactStatement)), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
1396
1355
  {
1397
1356
  title: "PROBLEMS SOLVED",
1398
1357
  value: props.numberOfProblemsSolved
1399
1358
  },
1400
1359
  {
1401
1360
  title: "LESSON COMPLETION",
1402
- value: TEMPORARY_numberOfLessonsCompleted,
1403
- unit: ""
1361
+ value: numberOfLessonsCompleted
1404
1362
  },
1405
1363
  {
1406
1364
  title: "BADGE COMPLETION",
1407
- value: numberOfBadgesCompleted,
1408
- unit: ""
1409
- }
1410
- ] }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
1411
- Tabs,
1412
- {
1413
- value: tab,
1414
- data: [
1415
- { label: "My badges", value: "badges" },
1416
- { label: "My answers", value: "answers" },
1417
- { label: "My reflections", value: "reflections" }
1418
- ],
1419
- onChange: setTab
1420
- }
1421
- ), tab === "badges" && /* @__PURE__ */ React.createElement(
1422
- Table$a,
1423
- {
1424
- loading: props.loading,
1425
- items: props.badges
1426
- }
1427
- ), tab === "answers" && /* @__PURE__ */ React.createElement(
1428
- Table$9,
1429
- {
1430
- loading: props.loading,
1431
- items: props.answers
1365
+ value: numberOfBadgesCompleted
1432
1366
  }
1433
- ), tab === "reflections" && /* @__PURE__ */ React.createElement(
1434
- Table$8,
1367
+ ] }), /* @__PURE__ */ React.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$2.map((t) => /* @__PURE__ */ React.createElement(
1368
+ "button",
1435
1369
  {
1436
- loading: props.loading,
1437
- items: props.reflections
1438
- }
1439
- ))))));
1370
+ key: t.value,
1371
+ onClick: () => setTab(t.value),
1372
+ 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"}`
1373
+ },
1374
+ t.label
1375
+ ))), tab === "badges" && /* @__PURE__ */ React.createElement(Table$a, { loading: props.loading, items: props.badges }), tab === "answers" && /* @__PURE__ */ React.createElement(Table$9, { loading: props.loading, items: props.answers }), tab === "reflections" && /* @__PURE__ */ React.createElement(Table$8, { loading: props.loading, items: props.reflections }));
1440
1376
  };
1441
1377
 
1442
1378
  const ACCENT_BORDER = {
@@ -1478,7 +1414,7 @@ const Home = (props) => {
1478
1414
  console.error("Failed to copy code", err);
1479
1415
  }
1480
1416
  };
1481
- return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-[1100px] flex-col gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-[28px] font-extrabold text-dark-blue-400" }, props.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[12.5px] text-slate-400" }, props.impactStatement)), /* @__PURE__ */ React.createElement("div", { className: "flex w-[440px] shrink-0 flex-col justify-between gap-3 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 p-5" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-base font-extrabold text-white" }, props.organization.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-white/70" }, props.organization.description)), accessCode && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-white/70" }, "Community code: ", accessCode), /* @__PURE__ */ React.createElement(
1417
+ return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-[28px] font-extrabold text-dark-blue-400" }, props.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[12.5px] text-slate-400" }, props.impactStatement)), /* @__PURE__ */ React.createElement("div", { className: "flex w-[440px] shrink-0 flex-col justify-between gap-3 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 p-5" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-base font-extrabold text-white" }, props.organization.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-white/70" }, props.organization.description)), accessCode && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-white/70" }, "Community code: ", accessCode), /* @__PURE__ */ React.createElement(
1482
1418
  "button",
1483
1419
  {
1484
1420
  onClick: onCopyAccessCode,
@@ -1546,65 +1482,35 @@ function Table$7(props) {
1546
1482
  }
1547
1483
  );
1548
1484
  }
1549
- const sortStatus = {
1550
- columnAccessor: sortConfig.key,
1551
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1552
- };
1553
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
1554
- DataTable,
1555
- {
1556
- records: sortedItems,
1557
- sortStatus,
1558
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1559
- columns: [
1560
- { accessor: "studentName", title: "Student Name", sortable: true },
1561
- { accessor: "reflection", title: "Reflection" },
1562
- { accessor: "rating", title: "Rating", sortable: true }
1563
- ]
1564
- }
1565
- ));
1485
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
1486
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("studentName"), className: "w-40 shrink-0 text-left hover:text-slate-600" }, "Student Name", indicator("studentName")), /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, "Reflection"), /* @__PURE__ */ React.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.createElement("div", { key: `${row.studentName}-${i}`, className: "rounded-xl border border-slate-200 bg-white p-4 shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0 text-sm font-bold text-dark-blue-400" }, row.studentName), /* @__PURE__ */ React.createElement("div", { className: "flex-1 text-sm text-slate-600" }, row.reflection), /* @__PURE__ */ React.createElement("div", { className: "w-20 shrink-0 text-right text-sm text-slate-500" }, row.rating)))));
1566
1487
  }
1567
1488
 
1568
- const useStyles$d = createStyles((theme) => ({
1569
- button: {
1570
- borderTopRightRadius: 0,
1571
- borderBottomRightRadius: 0,
1572
- marginLeft: 0,
1573
- marginRight: 0
1574
- },
1575
- menuControl: {
1576
- borderTopLeftRadius: 0,
1577
- borderBottomLeftRadius: 0,
1578
- border: 0,
1579
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
1580
- }
1581
- }));
1582
1489
  const SplitButton$3 = (props) => {
1583
- const { classes, theme } = useStyles$d();
1584
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
1585
- return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
1586
- Button,
1490
+ return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
1491
+ Link,
1587
1492
  {
1588
- component: Link,
1589
1493
  to: props.href,
1590
- className: classes.button,
1591
- variant: "gradient"
1494
+ 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"
1592
1495
  },
1593
1496
  "Preview"
1594
1497
  ), /* @__PURE__ */ React.createElement(
1595
- Button,
1498
+ "button",
1596
1499
  {
1597
- variant: "gradient",
1598
- leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
1599
- onClick: props.onCopyLinkClick
1500
+ type: "button",
1501
+ onClick: props.onCopyLinkClick,
1502
+ 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"
1600
1503
  },
1504
+ /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 13, stroke: 2 }),
1601
1505
  "Copy link"
1602
1506
  ), /* @__PURE__ */ React.createElement(
1603
- Button,
1507
+ "button",
1604
1508
  {
1605
- leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
1606
- onClick: props.onExportDataClick
1509
+ type: "button",
1510
+ onClick: props.onExportDataClick,
1511
+ 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)]"
1607
1512
  },
1513
+ /* @__PURE__ */ React.createElement(IconTableExport, { size: 13, stroke: 2 }),
1608
1514
  "Export data (.csv)"
1609
1515
  ));
1610
1516
  };
@@ -1613,13 +1519,12 @@ function Stack$3(props) {
1613
1519
  if (props.items.length === 0) {
1614
1520
  return null;
1615
1521
  }
1616
- const rows = props.items.map((row) => /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0, key: row.questionName }, /* @__PURE__ */ React.createElement(Title, { color: "dark.4", size: "lg" }, row.questionName), /* @__PURE__ */ React.createElement(Text, null, row.answer.join(",") || "No answer.")));
1617
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
1522
+ return /* @__PURE__ */ React.createElement(Link, { to: props.href, className: "flex flex-col gap-4 no-underline" }, props.items.map((row) => /* @__PURE__ */ React.createElement("div", { key: row.questionName }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.questionName), /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-sm text-slate-600" }, row.answer.join(", ") || "No answer."))));
1618
1523
  }
1619
1524
 
1620
1525
  var __defProp$a = Object.defineProperty;
1621
- var __defProps$7 = Object.defineProperties;
1622
- var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
1526
+ var __defProps$8 = Object.defineProperties;
1527
+ var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
1623
1528
  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
1624
1529
  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
1625
1530
  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -1635,18 +1540,15 @@ var __spreadValues$a = (a, b) => {
1635
1540
  }
1636
1541
  return a;
1637
1542
  };
1638
- var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
1543
+ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
1639
1544
  function Table$6(props) {
1545
+ const [expanded, setExpanded] = React.useState({});
1640
1546
  const preparedItems = React.useMemo(() => {
1641
- return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
1547
+ return props.items.map((item) => __spreadProps$8(__spreadValues$a({}, item), {
1642
1548
  status: item.isComplete ? 2 : item.isStarted ? 1 : 0
1643
1549
  }));
1644
1550
  }, [props.items]);
1645
1551
  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
1646
- const sortStatus = {
1647
- columnAccessor: sortConfig.key,
1648
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1649
- };
1650
1552
  if (props.items.length === 0) {
1651
1553
  return /* @__PURE__ */ React.createElement(
1652
1554
  PlaceholderBanner,
@@ -1658,36 +1560,22 @@ function Table$6(props) {
1658
1560
  }
1659
1561
  );
1660
1562
  }
1661
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
1662
- DataTable,
1663
- {
1664
- verticalSpacing: "sm",
1665
- sx: { minWidth: 700 },
1666
- withBorder: false,
1667
- borderRadius: "sm",
1668
- withColumnBorders: true,
1669
- striped: true,
1670
- highlightOnHover: true,
1671
- idAccessor: "userId",
1672
- records: sortedItems,
1673
- sortStatus,
1674
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1675
- columns: [{
1676
- accessor: "name",
1677
- title: "Student Name",
1678
- sortable: true,
1679
- render: (row) => /* @__PURE__ */ React.createElement(UnstyledButton, null, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))
1680
- }, {
1681
- accessor: "status",
1682
- title: "Status",
1683
- sortable: true,
1684
- render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", variant: "filled" }, "In progress"))
1685
- }],
1686
- rowExpansion: {
1687
- content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$3, { href: record.href, items: record.answers })
1688
- }
1689
- }
1690
- ));
1563
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
1564
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("name"), className: "flex-1 text-left hover:text-slate-600" }, "Student Name", indicator("name")), /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("status"), className: "w-28 shrink-0 text-center hover:text-slate-600" }, "Status", indicator("status")), /* @__PURE__ */ React.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
1565
+ var _a;
1566
+ const isOpen = !!expanded[row.userId];
1567
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
1568
+ return /* @__PURE__ */ React.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement(
1569
+ "div",
1570
+ {
1571
+ onClick: () => setExpanded(__spreadProps$8(__spreadValues$a({}, expanded), { [row.userId]: !isOpen })),
1572
+ className: "flex cursor-pointer items-center gap-4 p-4"
1573
+ },
1574
+ /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-3" }, row.avatar ? /* @__PURE__ */ React.createElement("img", { src: row.avatar, className: "h-9 w-9 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React.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.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-sm font-bold text-dark-blue-400" }, row.name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs text-slate-400" }, row.email))),
1575
+ /* @__PURE__ */ React.createElement("div", { className: "w-28 shrink-0 text-center" }, row.isComplete && /* @__PURE__ */ React.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.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.createElement("span", { className: "rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "In progress")),
1576
+ /* @__PURE__ */ React.createElement(IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
1577
+ ), isOpen && /* @__PURE__ */ React.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React.createElement(Stack$3, { href: row.href, items: row.answers })));
1578
+ }));
1691
1579
  }
1692
1580
 
1693
1581
  function Stack$2(props) {
@@ -1718,7 +1606,7 @@ function Stack$2(props) {
1718
1606
  }
1719
1607
  );
1720
1608
  }
1721
- const rows = props.items.map((row) => {
1609
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => {
1722
1610
  if (row.chart) {
1723
1611
  const labelMap = {};
1724
1612
  const choices = row.choices || [];
@@ -1730,7 +1618,7 @@ function Stack$2(props) {
1730
1618
  labelMap[r] = labelMap[r] ? labelMap[r] + 1 : 1;
1731
1619
  }
1732
1620
  }));
1733
- return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement("div", { style: { background: "white", height: "300px", width: "100%", position: "relative" } }, /* @__PURE__ */ React.createElement(
1621
+ return /* @__PURE__ */ React.createElement("div", { key: row.question, className: "rounded-xl border border-slate-200 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "text-base font-extrabold text-dark-blue-400" }, row.question), /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs text-slate-500" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement("div", { className: "relative mt-4 h-[300px] w-full bg-white" }, /* @__PURE__ */ React.createElement(
1734
1622
  Chart,
1735
1623
  {
1736
1624
  options: {
@@ -1747,64 +1635,24 @@ function Stack$2(props) {
1747
1635
  secondaryAxes
1748
1636
  }
1749
1637
  }
1750
- ))));
1638
+ )));
1751
1639
  }
1752
- return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 4 }, row.answers.map((a) => {
1640
+ return /* @__PURE__ */ React.createElement("div", { key: row.question, className: "rounded-xl border border-slate-200 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "text-base font-extrabold text-dark-blue-400" }, row.question), /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs text-slate-500" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex flex-col gap-2" }, row.answers.map((a) => {
1753
1641
  const answerText = a.join("\n");
1754
- return /* @__PURE__ */ React.createElement(Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React.createElement(Text, null, answerText));
1755
- })))));
1756
- });
1757
- return /* @__PURE__ */ React.createElement(Stack$5, { py: 4, spacing: 10, sx: { minWidth: 700 } }, rows);
1642
+ return /* @__PURE__ */ React.createElement("div", { key: answerText, className: "rounded-lg bg-slate-50 p-3 text-sm text-slate-700" }, answerText);
1643
+ })));
1644
+ }));
1758
1645
  }
1759
1646
  const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
1760
1647
 
1761
- const useStyles$c = createStyles((theme) => ({
1762
- title: {
1763
- fontSize: 34,
1764
- fontWeight: 900,
1765
- [theme.fn.smallerThan("sm")]: {
1766
- fontSize: 24
1767
- }
1768
- },
1769
- description: {
1770
- maxWidth: 600
1771
- }
1772
- }));
1648
+ const initialsFor = (name) => name.split(/[ -]/).map((n) => n.charAt(0)).join("").toUpperCase();
1773
1649
  const Lesson = (props) => {
1774
- const { classes } = useStyles$c();
1775
1650
  const [tab, setTab] = useState("question");
1776
1651
  const numberOfStudents = props.students.length;
1777
1652
  const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
1778
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
1779
1653
  const contributors = props.contributors || [];
1780
- const avatars = contributors.slice(0, 5).map((u, i) => {
1781
- const fullName = u.name;
1782
- let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
1783
- const src = AvatarInit.initialAvatar({
1784
- background: "#1c7ed6",
1785
- color: "#fff",
1786
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1787
- fontSize: 10,
1788
- fontWeight: 250,
1789
- size: 30,
1790
- initials
1791
- });
1792
- return /* @__PURE__ */ React.createElement(Avatar, { key: i, src, radius: "xl" });
1793
- });
1794
- const remainingUsers = contributors.slice(5).length;
1795
- if (remainingUsers) {
1796
- const initials = "+" + compact(remainingUsers);
1797
- const src = AvatarInit.initialAvatar({
1798
- background: "#1c7ed6",
1799
- color: "#fff",
1800
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1801
- fontSize: 10,
1802
- fontWeight: 250,
1803
- size: 30,
1804
- initials
1805
- });
1806
- avatars.push(/* @__PURE__ */ React.createElement(Avatar, { src, radius: "xl" }));
1807
- }
1654
+ const visibleContributors = contributors.slice(0, 5);
1655
+ const remainingContributors = contributors.slice(5).length;
1808
1656
  const tabs = props.trial ? [
1809
1657
  { label: "By question", value: "question" },
1810
1658
  { label: "By student", value: "students" }
@@ -1813,15 +1661,7 @@ const Lesson = (props) => {
1813
1661
  { label: "By student", value: "students" },
1814
1662
  { label: "By reflection", value: "reflections" }
1815
1663
  ];
1816
- return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
1817
- Badge$1,
1818
- {
1819
- variant: "filled",
1820
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
1821
- size: "lg"
1822
- },
1823
- "Back"
1824
- )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
1664
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.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.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Lesson"), /* @__PURE__ */ React.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description")), /* @__PURE__ */ React.createElement(
1825
1665
  SplitButton$3,
1826
1666
  {
1827
1667
  href: props.href,
@@ -1829,58 +1669,36 @@ const Lesson = (props) => {
1829
1669
  onCopyLinkClick: props.onCopyLinkClick,
1830
1670
  onExportDataClick: props.onExportDataClick
1831
1671
  }
1832
- ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
1833
- StatsGroup,
1834
- {
1835
- data: [
1836
- {
1837
- title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1838
- value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons,
1839
- unit: props.trial ? "" : ""
1840
- }
1841
- ]
1842
- }
1843
- ), /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Avatar.Group, { spacing: "sm" }, avatars)), !props.trial && /* @__PURE__ */ React.createElement(
1844
- Select,
1845
- {
1846
- clearable: true,
1847
- clearButtonLabel: "Clear class selection",
1848
- size: "sm",
1849
- placeholder: "Select a class",
1850
- nothingFound: "No options",
1851
- value: props.classId,
1852
- onChange: props.onClassChange,
1853
- icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
1854
- data: props.classes.map((g) => {
1855
- return { value: g.classId, label: g.name };
1856
- })
1857
- }
1858
- ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
1859
- Tabs,
1672
+ )), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
1860
1673
  {
1861
- value: tab,
1862
- data: tabs,
1863
- onChange: setTab
1674
+ title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1675
+ value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons
1864
1676
  }
1865
- ), tab === "question" && /* @__PURE__ */ React.createElement(
1866
- Stack$2,
1677
+ ] }), contributors.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex" }, visibleContributors.map((u, i) => /* @__PURE__ */ React.createElement(
1678
+ "div",
1867
1679
  {
1868
- loading: props.loading,
1869
- items: props.questions
1870
- }
1871
- ), tab === "reflections" && /* @__PURE__ */ React.createElement(
1872
- Table$7,
1680
+ key: i,
1681
+ 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"
1682
+ },
1683
+ initialsFor(u.name)
1684
+ )), remainingContributors > 0 && /* @__PURE__ */ React.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.createElement("div", { className: "relative w-full max-w-xs" }, /* @__PURE__ */ React.createElement(IconCategory2, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React.createElement(
1685
+ "select",
1873
1686
  {
1874
- loading: props.loading,
1875
- items: props.reflections
1876
- }
1877
- ), tab === "students" && /* @__PURE__ */ React.createElement(
1878
- Table$6,
1687
+ value: props.classId,
1688
+ onChange: (e) => props.onClassChange(e.target.value),
1689
+ 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"
1690
+ },
1691
+ /* @__PURE__ */ React.createElement("option", { value: "" }, "All classes"),
1692
+ props.classes.map((c) => /* @__PURE__ */ React.createElement("option", { key: c.classId, value: c.classId }, c.name))
1693
+ )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, tabs.map((t) => /* @__PURE__ */ React.createElement(
1694
+ "button",
1879
1695
  {
1880
- loading: props.loading,
1881
- items: props.students
1882
- }
1883
- )))))));
1696
+ key: t.value,
1697
+ onClick: () => setTab(t.value),
1698
+ 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"}`
1699
+ },
1700
+ t.label
1701
+ ))), tab === "question" && /* @__PURE__ */ React.createElement(Stack$2, { loading: props.loading, items: props.questions }), tab === "reflections" && /* @__PURE__ */ React.createElement(Table$7, { loading: props.loading, items: props.reflections }), tab === "students" && /* @__PURE__ */ React.createElement(Table$6, { loading: props.loading, items: props.students })));
1884
1702
  };
1885
1703
 
1886
1704
  function Table$5(props) {
@@ -1890,7 +1708,7 @@ function Table$5(props) {
1890
1708
  if (props.items.length === 0) {
1891
1709
  return /* @__PURE__ */ React.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.");
1892
1710
  }
1893
- return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, "Lesson"), /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React.createElement(
1711
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, "Lesson"), /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0" }, "Badge"), /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React.createElement(
1894
1712
  Link,
1895
1713
  {
1896
1714
  key: row.lessonId,
@@ -1898,13 +1716,14 @@ function Table$5(props) {
1898
1716
  className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
1899
1717
  },
1900
1718
  /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)),
1719
+ /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.badge || "\u2014"),
1901
1720
  /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
1902
1721
  /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
1903
1722
  )));
1904
1723
  }
1905
1724
 
1906
1725
  const Lessons = (props) => {
1907
- return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Lessons"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Bite-sized activities and learning experiences accelerating students achievement")), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(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.createElement(
1726
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Lessons"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Bite-sized activities and learning experiences accelerating students achievement")), /* @__PURE__ */ React.createElement(PathwayFilterPills, { pathways: props.pathways, selected: props.selectedPathway, onChange: props.onPathwayChange }), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(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.createElement(
1908
1727
  "input",
1909
1728
  {
1910
1729
  type: "text",
@@ -1915,37 +1734,23 @@ const Lessons = (props) => {
1915
1734
  )), /* @__PURE__ */ React.createElement(Table$5, { loading: props.loading, items: props.lessons }));
1916
1735
  };
1917
1736
 
1918
- const useStyles$b = createStyles((theme) => ({
1919
- title: {
1920
- fontSize: 22,
1921
- fontWeight: 900,
1922
- fontFamily: `Greycliff CF, ${theme.fontFamily}`
1923
- },
1924
- controls: {
1925
- [theme.fn.smallerThan("xs")]: {
1926
- flexDirection: "column-reverse"
1927
- }
1928
- },
1929
- control: {
1930
- [theme.fn.smallerThan("xs")]: {
1931
- width: "100%",
1932
- textAlign: "center"
1933
- }
1934
- }
1935
- }));
1936
1737
  function AccessCode(props) {
1937
- const { classes } = useStyles$b();
1938
- return /* @__PURE__ */ React.createElement(Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React.createElement(Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React.createElement(TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React.createElement(Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React.createElement(
1939
- Anchor,
1738
+ return /* @__PURE__ */ React.createElement("div", { className: "max-w-[460px]" }, /* @__PURE__ */ React.createElement("h2", { className: "text-lg font-extrabold text-dark-blue-400" }, "Access code"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Grant access to join your organization"), /* @__PURE__ */ React.createElement("div", { className: "mt-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React.createElement(
1739
+ "input",
1940
1740
  {
1941
- component: Link,
1942
- to: props.peopleLink,
1943
- color: "dimmed",
1944
- size: "sm",
1945
- className: classes.control
1741
+ value: props.value,
1742
+ readOnly: true,
1743
+ className: "w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-dark-blue-400"
1744
+ }
1745
+ ), /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex flex-wrap items-center justify-between gap-3" }, /* @__PURE__ */ React.createElement(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.createElement(IconPointer, { size: 12, stroke: 1.5 }), "See people in my organization"), /* @__PURE__ */ React.createElement(
1746
+ "button",
1747
+ {
1748
+ type: "button",
1749
+ onClick: props.onCopyCode,
1750
+ 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)]"
1946
1751
  },
1947
- /* @__PURE__ */ React.createElement(Center, { inline: true }, /* @__PURE__ */ React.createElement(IconPointer, { size: 12, stroke: 1.5 }), /* @__PURE__ */ React.createElement(Box, { ml: 5 }, "See people in my organization"))
1948
- ), /* @__PURE__ */ React.createElement(Button, { onClick: props.onCopyCode, className: classes.control }, "Copy code"))));
1752
+ "Copy code"
1753
+ ))));
1949
1754
  }
1950
1755
 
1951
1756
  const monthNames = [
@@ -1962,46 +1767,8 @@ const monthNames = [
1962
1767
  "November",
1963
1768
  "December"
1964
1769
  ];
1965
- const useStyles$a = createStyles((theme) => ({
1966
- title: {
1967
- fontSize: 34,
1968
- fontWeight: 900,
1969
- [theme.fn.smallerThan("sm")]: {
1970
- fontSize: 24
1971
- }
1972
- },
1973
- description: {
1974
- maxWidth: 600
1975
- },
1976
- wrapper: {
1977
- position: "relative",
1978
- marginBottom: 30
1979
- },
1980
- dropzone: {
1981
- borderWidth: 1,
1982
- paddingBottom: 50
1983
- },
1984
- icon: {
1985
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
1986
- },
1987
- control: {
1988
- position: "absolute",
1989
- width: 250,
1990
- left: "calc(50% - 125px)",
1991
- bottom: -20
1992
- }
1993
- }));
1994
1770
  const Organization = (props) => {
1995
- const { classes } = useStyles$a();
1996
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
1997
- Badge$1,
1998
- {
1999
- variant: "filled",
2000
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
2001
- size: "lg"
2002
- },
2003
- "Back"
2004
- )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Overview"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description"))), /* @__PURE__ */ React.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
1771
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.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.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Overview"), /* @__PURE__ */ React.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description")), /* @__PURE__ */ React.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
2005
1772
  {
2006
1773
  title: "# OF STUDENTS",
2007
1774
  value: props.numberOfStudents || 0
@@ -2015,55 +1782,43 @@ const Organization = (props) => {
2015
1782
  value: props.percentageOfAccountsActive,
2016
1783
  unit: "%"
2017
1784
  }
2018
- ] }))))));
1785
+ ] }));
2019
1786
  };
2020
1787
 
2021
- const useStyles$9 = createStyles((theme) => ({
2022
- button: {
2023
- borderTopRightRadius: 0,
2024
- borderBottomRightRadius: 0,
2025
- marginLeft: 0,
2026
- marginRight: 0
2027
- },
2028
- menuControl: {
2029
- borderTopLeftRadius: 0,
2030
- borderBottomLeftRadius: 0,
2031
- border: 0,
2032
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
2033
- }
2034
- }));
2035
1788
  const SplitButton$2 = (props) => {
2036
- const { classes, theme } = useStyles$9();
2037
- const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
2038
- const hasMenu = !!props.withOrganizationLink;
2039
- return /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
2040
- Button,
1789
+ return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
1790
+ "button",
2041
1791
  {
2042
- className: hasMenu ? classes.button : "",
2043
- leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 }),
2044
- onClick: props.onAddUsersClick
1792
+ type: "button",
1793
+ onClick: props.onAddUsersClick,
1794
+ 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)]"
2045
1795
  },
1796
+ /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 13, stroke: 2 }),
2046
1797
  "Add members"
2047
- ), hasMenu && /* @__PURE__ */ React.createElement(Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React.createElement(Menu.Target, null, /* @__PURE__ */ React.createElement(
2048
- ActionIcon,
2049
- {
2050
- variant: "filled",
2051
- color: theme.primaryColor,
2052
- size: 36,
2053
- className: classes.menuControl
2054
- },
2055
- /* @__PURE__ */ React.createElement(IconChevronDown, { size: 16, stroke: 1.5 })
2056
- )), /* @__PURE__ */ React.createElement(Menu.Dropdown, null, !!props.withOrganizationLink && /* @__PURE__ */ React.createElement(
2057
- Menu.Item,
1798
+ ), props.withOrganizationLink && /* @__PURE__ */ React.createElement(
1799
+ "button",
2058
1800
  {
2059
- icon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
2060
- onClick: props.onCopyOrganizationLinkClick
1801
+ type: "button",
1802
+ onClick: props.onCopyOrganizationLinkClick,
1803
+ 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"
2061
1804
  },
1805
+ /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 13, stroke: 2 }),
2062
1806
  "Copy organization link"
2063
- ))));
1807
+ ));
2064
1808
  };
2065
1809
 
1810
+ const openDeleteModal = (person, onDelete) => openConfirmModal({
1811
+ title: `Remove "${person.givenName && person.familyName ? `${person.givenName} ${person.familyName}` : person.email}" from your organization?`,
1812
+ centered: true,
1813
+ children: /* @__PURE__ */ React.createElement(Text, { size: "sm" }, "Click confirm if you want to remove this person from your organization. This will NOT remove them from the Tech Platform."),
1814
+ labels: { confirm: "Remove", cancel: "Cancel" },
1815
+ confirmProps: { color: "red" },
1816
+ onConfirm: () => onDelete(person)
1817
+ });
2066
1818
  function Table$4(props) {
1819
+ if (props.loading) {
1820
+ return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
1821
+ }
2067
1822
  if (props.items.length === 0) {
2068
1823
  return /* @__PURE__ */ React.createElement(
2069
1824
  PlaceholderBanner,
@@ -2075,76 +1830,65 @@ function Table$4(props) {
2075
1830
  }
2076
1831
  );
2077
1832
  }
2078
- const openDeleteModal = (student) => openConfirmModal({
2079
- title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
2080
- centered: true,
2081
- children: /* @__PURE__ */ React.createElement(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."),
2082
- labels: { confirm: "Remove Student", cancel: "Cancel" },
2083
- confirmProps: { color: "red" },
2084
- onConfirm: () => props.onDelete && props.onDelete(student)
2085
- });
2086
- const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.email }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Box, { maw: 150 }, /* @__PURE__ */ React.createElement(
2087
- Select,
2088
- {
2089
- size: "sm",
2090
- value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
2091
- onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
2092
- data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }, { value: "admin", label: "Admin" }]
2093
- }
2094
- ))), /* @__PURE__ */ React.createElement("td", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { color: "green" })), /* @__PURE__ */ React.createElement("td", null, row.numberOfClasses), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
2095
- return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Name"), /* @__PURE__ */ React.createElement("th", null, "Role"), /* @__PURE__ */ React.createElement("th", null, "Account Created?"), /* @__PURE__ */ React.createElement("th", null, "# of Classes"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
1833
+ return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.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.createElement("div", null, "Name"), /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "Role"), /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "Account Created?"), /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "# of Classes"), /* @__PURE__ */ React.createElement("div", null)), props.items.map((row, i) => {
1834
+ var _a, _b;
1835
+ const name = row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email;
1836
+ const initials = (((_a = row.givenName) == null ? void 0 : _a[0]) || row.email[0] || "?") + (((_b = row.familyName) == null ? void 0 : _b[0]) || "");
1837
+ const identity = /* @__PURE__ */ React.createElement(React.Fragment, null, row.avatar ? /* @__PURE__ */ React.createElement("img", { className: "h-8 w-8 shrink-0 rounded-full object-cover", src: row.avatar, alt: name }) : /* @__PURE__ */ React.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.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-[10.5px] text-slate-500" }, row.email)));
1838
+ return /* @__PURE__ */ React.createElement(
1839
+ "div",
1840
+ {
1841
+ key: row.email,
1842
+ 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" : ""}`
1843
+ },
1844
+ row.href ? /* @__PURE__ */ React.createElement(Link, { to: row.href, className: "flex min-w-0 items-center gap-2.5 no-underline" }, identity) : /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center gap-2.5" }, identity),
1845
+ /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
1846
+ "select",
1847
+ {
1848
+ disabled: row.readonly,
1849
+ value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
1850
+ onChange: (e) => props.onRoleChange && props.onRoleChange(row, e.target.value),
1851
+ 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"
1852
+ },
1853
+ /* @__PURE__ */ React.createElement("option", { value: "student" }, "Student"),
1854
+ /* @__PURE__ */ React.createElement("option", { value: "educator" }, "Educator"),
1855
+ /* @__PURE__ */ React.createElement("option", { value: "admin" }, "Admin")
1856
+ )),
1857
+ /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { size: 16, stroke: 3, className: "text-mint-400" })),
1858
+ /* @__PURE__ */ React.createElement("div", { className: "text-center text-xs font-bold text-dark-blue-400" }, row.numberOfClasses),
1859
+ /* @__PURE__ */ React.createElement("div", null, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(
1860
+ "button",
1861
+ {
1862
+ type: "button",
1863
+ onClick: () => openDeleteModal(row, props.onDelete),
1864
+ className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
1865
+ },
1866
+ /* @__PURE__ */ React.createElement(IconTrash, { size: 14, stroke: 1.75 })
1867
+ ))
1868
+ );
1869
+ }));
2096
1870
  }
2097
1871
 
2098
1872
  var __defProp$9 = Object.defineProperty;
2099
- var __defProps$6 = Object.defineProperties;
2100
- var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
1873
+ var __defProps$7 = Object.defineProperties;
1874
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
2101
1875
  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
2102
1876
  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
2103
1877
  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
2104
- var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2105
- var __spreadValues$9 = (a, b) => {
2106
- for (var prop in b || (b = {}))
2107
- if (__hasOwnProp$9.call(b, prop))
2108
- __defNormalProp$9(a, prop, b[prop]);
2109
- if (__getOwnPropSymbols$9)
2110
- for (var prop of __getOwnPropSymbols$9(b)) {
2111
- if (__propIsEnum$9.call(b, prop))
2112
- __defNormalProp$9(a, prop, b[prop]);
2113
- }
2114
- return a;
2115
- };
2116
- var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2117
- const useStyles$8 = createStyles((theme) => ({
2118
- title: {
2119
- fontSize: 34,
2120
- fontWeight: 900,
2121
- [theme.fn.smallerThan("sm")]: {
2122
- fontSize: 24
2123
- }
2124
- },
2125
- description: {
2126
- maxWidth: 600
2127
- },
2128
- wrapper: {
2129
- position: "relative",
2130
- marginBottom: 30
2131
- },
2132
- dropzone: {
2133
- borderWidth: 1,
2134
- paddingBottom: 50
2135
- },
2136
- icon: {
2137
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
2138
- },
2139
- control: {
2140
- position: "absolute",
2141
- width: 250,
2142
- left: "calc(50% - 125px)",
2143
- bottom: -20
2144
- }
2145
- }));
1878
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1879
+ var __spreadValues$9 = (a, b) => {
1880
+ for (var prop in b || (b = {}))
1881
+ if (__hasOwnProp$9.call(b, prop))
1882
+ __defNormalProp$9(a, prop, b[prop]);
1883
+ if (__getOwnPropSymbols$9)
1884
+ for (var prop of __getOwnPropSymbols$9(b)) {
1885
+ if (__propIsEnum$9.call(b, prop))
1886
+ __defNormalProp$9(a, prop, b[prop]);
1887
+ }
1888
+ return a;
1889
+ };
1890
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
2146
1891
  const People = (props) => {
2147
- const { classes } = useStyles$8();
2148
1892
  const form = useForm({
2149
1893
  initialValues: {
2150
1894
  userId: "",
@@ -2175,12 +1919,12 @@ const People = (props) => {
2175
1919
  padding: "xl",
2176
1920
  size: "xl"
2177
1921
  },
2178
- /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$6(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
1922
+ /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$7(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
2179
1923
  const values = form.values;
2180
1924
  form.reset();
2181
1925
  setOpened(false);
2182
1926
  props.onCreateUsers && props.onCreateUsers([values]);
2183
- }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
1927
+ }) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(
2184
1928
  TextInput,
2185
1929
  __spreadValues$9({
2186
1930
  withAsterisk: true,
@@ -2199,23 +1943,22 @@ const People = (props) => {
2199
1943
  label: "Family name",
2200
1944
  placeholder: "Family name"
2201
1945
  }, form.getInputProps("familyName"))
2202
- )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
2203
- ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
2204
- Badge$1,
2205
- {
2206
- variant: "filled",
2207
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
2208
- size: "lg"
2209
- },
2210
- "Back"
2211
- )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "People"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Manage members of your organization")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
1946
+ )), /* @__PURE__ */ React.createElement(
1947
+ "button",
1948
+ {
1949
+ type: "submit",
1950
+ className: "mt-2 rounded-lg bg-dark-blue-400 px-4 py-2.5 text-xs font-bold text-white"
1951
+ },
1952
+ "Submit"
1953
+ ))))
1954
+ ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.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.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "People"), /* @__PURE__ */ React.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, "Manage members of your organization")), !props.loading && /* @__PURE__ */ React.createElement(
2212
1955
  SplitButton$2,
2213
1956
  {
2214
1957
  withOrganizationLink: props.withOrganizationLink,
2215
1958
  onAddUsersClick: () => setOpened(true),
2216
1959
  onCopyOrganizationLinkClick: props.onCopyLinkClick
2217
1960
  }
2218
- ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
1961
+ )), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
2219
1962
  {
2220
1963
  title: "# OF PEOPLE",
2221
1964
  value: props.users.length
@@ -2230,14 +1973,15 @@ const People = (props) => {
2230
1973
  unit: "%",
2231
1974
  value: props.percentageRostered
2232
1975
  }
2233
- ] }), /* @__PURE__ */ React.createElement(
2234
- Autocomplete,
1976
+ ] }), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(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.createElement(
1977
+ "input",
2235
1978
  {
1979
+ type: "text",
2236
1980
  placeholder: "Search for a people in your organization",
2237
- data: props.users.map((item) => item.email),
2238
- onChange: props.onAutocompleteChange
1981
+ onChange: (e) => props.onAutocompleteChange(e.target.value),
1982
+ 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"
2239
1983
  }
2240
- ), /* @__PURE__ */ React.createElement(
1984
+ )), /* @__PURE__ */ React.createElement(
2241
1985
  Table$4,
2242
1986
  {
2243
1987
  loading: props.loading,
@@ -2245,10 +1989,9 @@ const People = (props) => {
2245
1989
  onDelete: props.onDeleteUser,
2246
1990
  onRoleChange: props.onChangeUserRole
2247
1991
  }
2248
- ))))));
1992
+ )));
2249
1993
  };
2250
1994
  const DropzoneButton = (props) => {
2251
- const { classes, theme } = useStyles$8();
2252
1995
  const openRef = React.useRef(null);
2253
1996
  const [loading, setLoading] = React.useState(false);
2254
1997
  const onDrop = React.useCallback((acceptedFiles) => {
@@ -2269,32 +2012,33 @@ const DropzoneButton = (props) => {
2269
2012
  });
2270
2013
  });
2271
2014
  }, []);
2272
- return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(
2015
+ return /* @__PURE__ */ React.createElement("div", { className: "relative mb-8" }, /* @__PURE__ */ React.createElement(
2273
2016
  Dropzone,
2274
2017
  {
2275
2018
  loading,
2276
2019
  openRef,
2277
2020
  onDrop,
2278
- className: classes.dropzone,
2279
2021
  radius: "md",
2022
+ className: "border pb-12",
2280
2023
  accept: [MIME_TYPES.csv],
2281
2024
  maxSize: 5 * 1024 ** 2
2282
2025
  },
2283
- /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React.createElement(Group, { position: "center" }, /* @__PURE__ */ React.createElement(Dropzone.Accept, null, /* @__PURE__ */ React.createElement(IconDownload, { size: 50, color: theme.colors[theme.primaryColor][6], stroke: 1.5 })), /* @__PURE__ */ React.createElement(Dropzone.Reject, null, /* @__PURE__ */ React.createElement(IconX, { size: 50, color: theme.colors.red[6], stroke: 1.5 })), /* @__PURE__ */ React.createElement(Dropzone.Idle, null, /* @__PURE__ */ React.createElement(
2284
- IconCloudUpload,
2285
- {
2286
- size: 50,
2287
- color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
2288
- stroke: 1.5
2289
- }
2290
- ))), /* @__PURE__ */ React.createElement(Text, { align: "center", weight: 700, size: "lg", mt: "xl" }, /* @__PURE__ */ React.createElement(Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React.createElement(Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React.createElement(Dropzone.Idle, null, "Upload multiple")), /* @__PURE__ */ React.createElement(Text, { align: "center", size: "sm", mt: "xs", color: "dimmed" }, "Drag'n'drop files here to upload. We can accept only ", /* @__PURE__ */ React.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
2291
- ), /* @__PURE__ */ React.createElement(Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
2292
- var _a;
2293
- return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
2294
- } }, "Select file"));
2026
+ /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React.createElement(Group, { position: "center" }, /* @__PURE__ */ React.createElement(Dropzone.Accept, null, /* @__PURE__ */ React.createElement(IconDownload, { size: 50, color: "#1EE2AF", stroke: 1.5 })), /* @__PURE__ */ React.createElement(Dropzone.Reject, null, /* @__PURE__ */ React.createElement(IconX, { size: 50, color: "#ef4444", stroke: 1.5 })), /* @__PURE__ */ React.createElement(Dropzone.Idle, null, /* @__PURE__ */ React.createElement(IconCloudUpload, { size: 50, color: "#232A3A", stroke: 1.5 }))), /* @__PURE__ */ React.createElement("p", { className: "mt-6 text-center text-lg font-bold text-dark-blue-400" }, /* @__PURE__ */ React.createElement(Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React.createElement(Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React.createElement(Dropzone.Idle, null, "Upload multiple")), /* @__PURE__ */ React.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.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
2027
+ ), /* @__PURE__ */ React.createElement(
2028
+ "button",
2029
+ {
2030
+ type: "button",
2031
+ onClick: () => {
2032
+ var _a;
2033
+ return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
2034
+ },
2035
+ 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"
2036
+ },
2037
+ "Select file"
2038
+ ));
2295
2039
  };
2296
2040
 
2297
- const useStyles$7 = createStyles((theme) => ({
2041
+ const useStyles$6 = createStyles((theme) => ({
2298
2042
  form: {
2299
2043
  backgroundColor: theme.white,
2300
2044
  padding: theme.spacing.xl,
@@ -2357,7 +2101,7 @@ const useStyles$7 = createStyles((theme) => ({
2357
2101
  }
2358
2102
  }));
2359
2103
  const StartAnonymousLesson = (props) => {
2360
- const { classes } = useStyles$7();
2104
+ const { classes } = useStyles$6();
2361
2105
  const [name, setName] = React.useState("");
2362
2106
  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Badge$1, { color: "violet" }, "Community"), /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.title), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, "You are now part of ", `${props.educatorName}'s`, " Class")), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(
2363
2107
  TextInput,
@@ -2414,6 +2158,24 @@ function TaskCard(props) {
2414
2158
  ));
2415
2159
  }
2416
2160
 
2161
+ const useStyles$5 = createStyles((theme) => ({
2162
+ title: {
2163
+ fontSize: 34,
2164
+ fontWeight: 900,
2165
+ marginTop: 16,
2166
+ [theme.fn.smallerThan("sm")]: {
2167
+ fontSize: 24
2168
+ }
2169
+ },
2170
+ description: {
2171
+ maxWidth: 600
2172
+ }
2173
+ }));
2174
+ const UserInfo = (props) => {
2175
+ const { classes } = useStyles$5();
2176
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
2177
+ };
2178
+
2417
2179
  var __defProp$7 = Object.defineProperty;
2418
2180
  var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
2419
2181
  var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
@@ -2442,7 +2204,7 @@ var __objRest$1 = (source, exclude) => {
2442
2204
  }
2443
2205
  return target;
2444
2206
  };
2445
- const useStyles$6 = createStyles((theme) => ({
2207
+ const useStyles$4 = createStyles((theme) => ({
2446
2208
  card: {
2447
2209
  height: 240,
2448
2210
  backgroundSize: "cover",
@@ -2487,7 +2249,7 @@ const TenantBanner = (_a) => {
2487
2249
  "className",
2488
2250
  "code"
2489
2251
  ]);
2490
- const { classes, cx, theme } = useStyles$6();
2252
+ const { classes, cx, theme } = useStyles$4();
2491
2253
  const handleCopy = async () => {
2492
2254
  if (!code)
2493
2255
  return;
@@ -2534,7 +2296,7 @@ const TenantBanner = (_a) => {
2534
2296
  );
2535
2297
  };
2536
2298
 
2537
- const useStyles$5 = createStyles((theme) => ({
2299
+ const useStyles$3 = createStyles((theme) => ({
2538
2300
  action: {
2539
2301
  backgroundColor: "inherit",
2540
2302
  ":hover": {
@@ -2553,8 +2315,8 @@ const useStyles$5 = createStyles((theme) => ({
2553
2315
  }
2554
2316
  }));
2555
2317
  const TrialHome = (props) => {
2556
- const { classes } = useStyles$5();
2557
- return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Badge$1, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React.createElement(
2318
+ const { classes } = useStyles$3();
2319
+ return /* @__PURE__ */ React.createElement(Container, { fluid: true }, /* @__PURE__ */ React.createElement(Badge$1, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React.createElement(
2558
2320
  Button,
2559
2321
  {
2560
2322
  className: classes.action,
@@ -2583,8 +2345,8 @@ const TrialHome = (props) => {
2583
2345
  };
2584
2346
 
2585
2347
  var __defProp$6 = Object.defineProperty;
2586
- var __defProps$5 = Object.defineProperties;
2587
- var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2348
+ var __defProps$6 = Object.defineProperties;
2349
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
2588
2350
  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
2589
2351
  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
2590
2352
  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -2600,7 +2362,7 @@ var __spreadValues$6 = (a, b) => {
2600
2362
  }
2601
2363
  return a;
2602
2364
  };
2603
- var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2365
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2604
2366
  var __objRest = (source, exclude) => {
2605
2367
  var target = {};
2606
2368
  for (var prop in source)
@@ -2613,7 +2375,7 @@ var __objRest = (source, exclude) => {
2613
2375
  }
2614
2376
  return target;
2615
2377
  };
2616
- const useStyles$4 = createStyles((theme, { checked }) => ({
2378
+ const useStyles$2 = createStyles((theme, { checked }) => ({
2617
2379
  button: {
2618
2380
  display: "flex",
2619
2381
  alignItems: "center",
@@ -2655,10 +2417,10 @@ function ImageCheckbox(_a) {
2655
2417
  finalValue: false,
2656
2418
  onChange
2657
2419
  });
2658
- const { classes, cx } = useStyles$4({ checked: value });
2420
+ const { classes, cx } = useStyles$2({ checked: value });
2659
2421
  return /* @__PURE__ */ React.createElement(
2660
2422
  UnstyledButton,
2661
- __spreadProps$5(__spreadValues$6({}, others), {
2423
+ __spreadProps$6(__spreadValues$6({}, others), {
2662
2424
  onClick: () => handleChange(!value),
2663
2425
  className: cx(classes.button, className)
2664
2426
  }),
@@ -2679,7 +2441,7 @@ function ImageCheckbox(_a) {
2679
2441
  function SelectGrid(props) {
2680
2442
  const items = props.items.map((item) => /* @__PURE__ */ React.createElement(
2681
2443
  ImageCheckbox,
2682
- __spreadProps$5(__spreadValues$6({}, item), {
2444
+ __spreadProps$6(__spreadValues$6({}, item), {
2683
2445
  key: item.title,
2684
2446
  onChange: (checked) => props.onChange(item.title, checked)
2685
2447
  })
@@ -2698,8 +2460,8 @@ function SelectGrid(props) {
2698
2460
  }
2699
2461
 
2700
2462
  var __defProp$5 = Object.defineProperty;
2701
- var __defProps$4 = Object.defineProperties;
2702
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2463
+ var __defProps$5 = Object.defineProperties;
2464
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2703
2465
  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
2704
2466
  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
2705
2467
  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
@@ -2715,8 +2477,8 @@ var __spreadValues$5 = (a, b) => {
2715
2477
  }
2716
2478
  return a;
2717
2479
  };
2718
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2719
- const useStyles$3 = createStyles((theme) => ({
2480
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2481
+ const useStyles$1 = createStyles((theme) => ({
2720
2482
  wrapper: {
2721
2483
  minHeight: "100%",
2722
2484
  boxSizing: "border-box",
@@ -2779,7 +2541,7 @@ const OPTIONS = [
2779
2541
  { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
2780
2542
  ];
2781
2543
  const TrialRegistration = (props) => {
2782
- const { classes } = useStyles$3();
2544
+ const { classes } = useStyles$1();
2783
2545
  const [firstName, setFirstName] = React.useState("");
2784
2546
  const [lastName, setLastName] = React.useState("");
2785
2547
  const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
@@ -2825,7 +2587,7 @@ const TrialRegistration = (props) => {
2825
2587
  label: "School/Organization Name",
2826
2588
  placeholder: "What's the name of your school?",
2827
2589
  data: props.organizations.map((o) => {
2828
- return __spreadProps$4(__spreadValues$5({}, o), { value: o.displayName });
2590
+ return __spreadProps$5(__spreadValues$5({}, o), { value: o.displayName });
2829
2591
  }),
2830
2592
  onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
2831
2593
  onChange: (next) => {
@@ -2837,7 +2599,7 @@ const TrialRegistration = (props) => {
2837
2599
  SelectGrid,
2838
2600
  {
2839
2601
  items: OPTIONS,
2840
- onChange: (e, checked) => setInterests(__spreadProps$4(__spreadValues$5({}, interests), { [e]: checked }))
2602
+ onChange: (e, checked) => setInterests(__spreadProps$5(__spreadValues$5({}, interests), { [e]: checked }))
2841
2603
  }
2842
2604
  ), /* @__PURE__ */ React.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(
2843
2605
  Button,
@@ -2876,8 +2638,8 @@ const AdminProvider = (props) => {
2876
2638
  };
2877
2639
 
2878
2640
  var __defProp$4 = Object.defineProperty;
2879
- var __defProps$3 = Object.defineProperties;
2880
- var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
2641
+ var __defProps$4 = Object.defineProperties;
2642
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2881
2643
  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
2882
2644
  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
2883
2645
  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -2893,8 +2655,8 @@ var __spreadValues$4 = (a, b) => {
2893
2655
  }
2894
2656
  return a;
2895
2657
  };
2896
- var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
2897
- const useStyles$2 = createStyles((theme, props) => ({
2658
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2659
+ const useStyles = createStyles((theme, props) => ({
2898
2660
  footer: {
2899
2661
  paddingTop: theme.spacing.md,
2900
2662
  paddingBottom: theme.spacing.md,
@@ -2981,7 +2743,7 @@ const useStyles$2 = createStyles((theme, props) => ({
2981
2743
  }
2982
2744
  }));
2983
2745
  const App = (props) => {
2984
- const { classes } = useStyles$2(props);
2746
+ const { classes } = useStyles(props);
2985
2747
  const account = useAccount(props.account, props.accounts, props.onAccountChange);
2986
2748
  return /* @__PURE__ */ React.createElement(
2987
2749
  AppShell,
@@ -2989,7 +2751,7 @@ const App = (props) => {
2989
2751
  padding: "xs",
2990
2752
  navbar: props.navbar && /* @__PURE__ */ React.createElement(
2991
2753
  Navbar,
2992
- __spreadProps$3(__spreadValues$4({}, props.navbar.props), {
2754
+ __spreadProps$4(__spreadValues$4({}, props.navbar.props), {
2993
2755
  onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
2994
2756
  })
2995
2757
  ),
@@ -3083,61 +2845,52 @@ function Table$3(props) {
3083
2845
  if (props.items.length === 0) {
3084
2846
  return /* @__PURE__ */ React.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.");
3085
2847
  }
3086
- return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => /* @__PURE__ */ React.createElement(
3087
- Link,
3088
- {
3089
- key: row.badgeId,
3090
- to: row.href,
3091
- className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
3092
- },
3093
- /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)),
3094
- /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
3095
- )));
2848
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => {
2849
+ var _a;
2850
+ return /* @__PURE__ */ React.createElement(
2851
+ Link,
2852
+ {
2853
+ key: row.pathwayId,
2854
+ to: row.href,
2855
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
2856
+ },
2857
+ /* @__PURE__ */ React.createElement(Emblem, { imageURL: row.imageURL, alt: row.name, size: "sm", icon: IconRoute, accent: "cyan" }),
2858
+ /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description), !!((_a = row.displayTags) == null ? void 0 : _a.length) && /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 flex flex-wrap gap-1.5" }, row.displayTags.map((tag) => /* @__PURE__ */ React.createElement("span", { key: tag, className: "rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold text-slate-500" }, tag)))),
2859
+ !!row.numberOfBadges && /* @__PURE__ */ React.createElement("div", { className: "w-24 shrink-0 text-right text-xs text-slate-500" }, row.numberOfBadges, " badge", row.numberOfBadges === 1 ? "" : "s"),
2860
+ /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
2861
+ );
2862
+ }));
3096
2863
  }
3097
2864
 
3098
2865
  const Pathways = (props) => {
3099
- return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Pathways"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Explore all your unique pathway requirements in one clear space")), /* @__PURE__ */ React.createElement(Table$3, { loading: props.loading, items: props.pathways }));
2866
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Pathways"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Explore all your unique pathway requirements in one clear space")), /* @__PURE__ */ React.createElement(Table$3, { loading: props.loading, items: props.pathways }));
3100
2867
  };
3101
2868
 
3102
- const useStyles$1 = createStyles((theme) => ({
3103
- button: {
3104
- borderTopRightRadius: 0,
3105
- borderBottomRightRadius: 0,
3106
- marginLeft: 0,
3107
- marginRight: 0
3108
- },
3109
- menuControl: {
3110
- borderTopLeftRadius: 0,
3111
- borderBottomLeftRadius: 0,
3112
- border: 0,
3113
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
3114
- }
3115
- }));
3116
2869
  const SplitButton$1 = (props) => {
3117
- const { classes, theme } = useStyles$1();
3118
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
3119
- return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
3120
- Button,
2870
+ return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
2871
+ Link,
3121
2872
  {
3122
- component: Link,
3123
2873
  to: props.href,
3124
- className: classes.button,
3125
- variant: "gradient"
2874
+ 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"
3126
2875
  },
3127
2876
  "Preview"
3128
2877
  ), /* @__PURE__ */ React.createElement(
3129
- Button,
2878
+ "button",
3130
2879
  {
3131
- leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
3132
- onClick: props.onCopyLinkClick
2880
+ type: "button",
2881
+ onClick: props.onCopyLinkClick,
2882
+ 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"
3133
2883
  },
2884
+ /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 13, stroke: 2 }),
3134
2885
  "Copy link"
3135
2886
  ), /* @__PURE__ */ React.createElement(
3136
- Button,
2887
+ "button",
3137
2888
  {
3138
- leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
3139
- onClick: props.onExportDataClick
2889
+ type: "button",
2890
+ onClick: props.onExportDataClick,
2891
+ 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)]"
3140
2892
  },
2893
+ /* @__PURE__ */ React.createElement(IconTableExport, { size: 13, stroke: 2 }),
3141
2894
  "Export data (.csv)"
3142
2895
  ));
3143
2896
  };
@@ -3146,11 +2899,12 @@ function Stack$1(props) {
3146
2899
  if (props.items.length === 0) {
3147
2900
  return null;
3148
2901
  }
3149
- const rows = props.items.map((row) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href, color: "dark.4", weight: "bold", size: "md" }, row.badgeName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
3150
- return /* @__PURE__ */ React.createElement(Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
2902
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, props.items.map((row) => /* @__PURE__ */ React.createElement("div", { key: row.badgeName, className: "flex items-center justify-between gap-4 py-1.5" }, /* @__PURE__ */ React.createElement(Link, { to: row.href, className: "text-sm font-bold text-dark-blue-400 no-underline hover:underline" }, row.badgeName), row.completion >= 1 && /* @__PURE__ */ React.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.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.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"))));
3151
2903
  }
3152
2904
 
3153
2905
  var __defProp$3 = Object.defineProperty;
2906
+ var __defProps$3 = Object.defineProperties;
2907
+ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
3154
2908
  var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
3155
2909
  var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
3156
2910
  var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -3166,7 +2920,10 @@ var __spreadValues$3 = (a, b) => {
3166
2920
  }
3167
2921
  return a;
3168
2922
  };
2923
+ var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
3169
2924
  function Table$2(props) {
2925
+ const [expanded, setExpanded] = React.useState({});
2926
+ const categories = props.categories || [];
3170
2927
  const preparedItems = React.useMemo(() => {
3171
2928
  return (props.items || []).map((item) => __spreadValues$3(__spreadValues$3({}, item), item.categoryPoints));
3172
2929
  }, [props.items]);
@@ -3182,55 +2939,26 @@ function Table$2(props) {
3182
2939
  }
3183
2940
  );
3184
2941
  }
3185
- const sortStatus = {
3186
- columnAccessor: sortConfig.key,
3187
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3188
- };
3189
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
3190
- DataTable,
3191
- {
3192
- verticalSpacing: "sm",
3193
- sx: { minWidth: 700 },
3194
- withBorder: false,
3195
- borderRadius: "sm",
3196
- withColumnBorders: true,
3197
- striped: true,
3198
- highlightOnHover: true,
3199
- records: sortedItems,
3200
- idAccessor: "userId",
3201
- sortStatus,
3202
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3203
- columns: [
3204
- {
3205
- accessor: "name",
3206
- title: "Student Name",
3207
- sortable: true,
3208
- titleStyle: { whiteSpace: "nowrap" },
3209
- render: (row) => /* @__PURE__ */ React.createElement(Group, { spacing: "sm", noWrap: true }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email)))
3210
- },
3211
- {
3212
- accessor: "isComplete",
3213
- title: "Status",
3214
- sortable: true,
3215
- titleStyle: { whiteSpace: "nowrap" },
3216
- render: (row) => /* @__PURE__ */ React.createElement(Badge$1, { color: row.isComplete ? "blue" : "red", variant: "filled" }, row.isComplete ? "Complete" : "Incomplete")
3217
- },
3218
- ...props.categories.map((category) => ({
3219
- accessor: category.categoryId,
3220
- title: category.name,
3221
- sortable: true,
3222
- titleStyle: { whiteSpace: "nowrap" },
3223
- render: (row) => {
3224
- var _a;
3225
- return /* @__PURE__ */ React.createElement(Badge$1, { color: "blue", variant: "filled" }, (_a = row[category.categoryId]) != null ? _a : 0, " pts");
3226
- }
3227
- }))
3228
- ],
3229
- rowExpansion: {
3230
- content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$1, { items: record.badges })
3231
- }
3232
- }
3233
- ));
2942
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
2943
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("name"), className: "flex-1 text-left hover:text-slate-600" }, "Student Name", indicator("name")), /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("isComplete"), className: "w-28 shrink-0 text-center hover:text-slate-600" }, "Status", indicator("isComplete")), categories.map((category) => /* @__PURE__ */ React.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.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
2944
+ var _a;
2945
+ const isOpen = !!expanded[row.userId];
2946
+ const initials = (((_a = row.name) == null ? void 0 : _a[0]) || row.email[0] || "?").toUpperCase();
2947
+ return /* @__PURE__ */ React.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement(
2948
+ "div",
2949
+ {
2950
+ onClick: () => setExpanded(__spreadProps$3(__spreadValues$3({}, expanded), { [row.userId]: !isOpen })),
2951
+ className: "flex cursor-pointer items-center gap-4 p-4"
2952
+ },
2953
+ /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-3" }, row.avatar ? /* @__PURE__ */ React.createElement("img", { src: row.avatar, className: "h-9 w-9 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React.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.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-sm font-bold text-dark-blue-400" }, row.name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs text-slate-400" }, row.email))),
2954
+ /* @__PURE__ */ React.createElement("div", { className: "w-28 shrink-0 text-center" }, row.isComplete ? /* @__PURE__ */ React.createElement("span", { className: "rounded-full bg-mint-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Complete") : /* @__PURE__ */ React.createElement("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-500" }, "Incomplete")),
2955
+ categories.map((category) => {
2956
+ var _a2;
2957
+ return /* @__PURE__ */ React.createElement("div", { key: category.categoryId, className: "w-24 shrink-0 text-center" }, /* @__PURE__ */ React.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"));
2958
+ }),
2959
+ /* @__PURE__ */ React.createElement(IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
2960
+ ), isOpen && /* @__PURE__ */ React.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React.createElement(Stack$1, { items: row.badges })));
2961
+ }));
3234
2962
  }
3235
2963
 
3236
2964
  function Table$1(props) {
@@ -3246,138 +2974,60 @@ function Table$1(props) {
3246
2974
  }
3247
2975
  );
3248
2976
  }
3249
- const sortStatus = {
3250
- columnAccessor: sortConfig.key,
3251
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3252
- };
3253
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
3254
- DataTable,
2977
+ const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
2978
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("badgeName"), className: "flex-1 text-left hover:text-slate-600" }, "Badge Name", indicator("badgeName")), /* @__PURE__ */ React.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.createElement(
2979
+ Link,
3255
2980
  {
3256
- verticalSpacing: "sm",
3257
- withBorder: false,
3258
- borderRadius: "sm",
3259
- sx: { minWidth: 700 },
3260
- highlightOnHover: true,
3261
- striped: true,
3262
- records: sortedItems,
3263
- idAccessor: "badgeId",
3264
- sortStatus,
3265
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3266
- columns: [
3267
- {
3268
- accessor: "badgeName",
3269
- title: "Badge Name",
3270
- sortable: true,
3271
- render: (row) => /* @__PURE__ */ React.createElement(
3272
- Text,
3273
- {
3274
- component: Link,
3275
- to: row.href,
3276
- sx: (theme) => ({
3277
- color: theme.colorScheme === "dark" ? theme.white : theme.black,
3278
- textDecoration: "none",
3279
- fontWeight: 500,
3280
- "&:hover": {
3281
- textDecoration: "underline",
3282
- color: theme.colors.blue[6]
3283
- }
3284
- })
3285
- },
3286
- row.badgeName
3287
- )
3288
- },
3289
- {
3290
- accessor: "percentageCompletion",
3291
- title: "Badge Completion",
3292
- sortable: true,
3293
- render: (row) => {
3294
- const roundedValue = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
3295
- return `${roundedValue}%`;
3296
- }
3297
- }
3298
- ]
3299
- }
3300
- ));
2981
+ key: row.badgeId,
2982
+ to: row.href,
2983
+ className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
2984
+ },
2985
+ /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1 text-sm font-bold text-dark-blue-400" }, row.badgeName),
2986
+ /* @__PURE__ */ React.createElement("div", { className: "w-36 shrink-0 text-right text-xs text-slate-500" }, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")
2987
+ )));
3301
2988
  }
3302
2989
 
3303
- const useStyles = createStyles((theme) => ({
3304
- title: {
3305
- fontSize: 34,
3306
- fontWeight: 900,
3307
- [theme.fn.smallerThan("sm")]: {
3308
- fontSize: 24
3309
- }
3310
- },
3311
- description: {
3312
- maxWidth: 600
3313
- }
3314
- }));
2990
+ const TABS$1 = [
2991
+ { label: "By Badge", value: "badges" },
2992
+ { label: "By student", value: "students" }
2993
+ ];
3315
2994
  const Pathway = (props) => {
3316
- const { classes } = useStyles();
2995
+ var _a;
3317
2996
  const [tab, setTab] = useState("badges");
3318
2997
  const numberOfStudents = props.students.length;
3319
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
3320
2998
  const numberOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
3321
- return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
3322
- Badge$1,
3323
- {
3324
- variant: "filled",
3325
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
3326
- size: "lg"
3327
- },
3328
- "Back"
3329
- )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.title || "Pathway"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
2999
+ const criteria = props.criteria || {};
3000
+ const criteriaCategories = (props.categories || []).filter((c) => criteria[c.categoryId] !== void 0);
3001
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-4" }, /* @__PURE__ */ React.createElement(Emblem, { imageURL: props.imageURL, alt: props.title, size: "lg", icon: IconRoute, accent: "cyan" }), /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.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.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.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.createElement("div", { className: "flex flex-wrap gap-1.5" }, props.displayTags.map((tag) => /* @__PURE__ */ React.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.createElement("p", { className: "max-w-xl text-sm text-slate-500" }, props.description || "No description"), criteriaCategories.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1.5 pt-0.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, "Criteria"), criteriaCategories.map((c) => /* @__PURE__ */ React.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.createElement(
3330
3002
  SplitButton$1,
3331
3003
  {
3332
3004
  href: props.href,
3333
3005
  onCopyLinkClick: props.onCopyLinkClick,
3334
3006
  onExportDataClick: props.onExportDataClick
3335
3007
  }
3336
- ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
3008
+ )), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
3337
3009
  {
3338
3010
  title: props.trial ? "BADGES SUBMITTED" : "PATHWAY COMPLETION",
3339
- value: props.trial ? 0 : numberOfBadgesEarned,
3340
- unit: props.trial ? "" : ""
3011
+ value: props.trial ? 0 : numberOfBadgesEarned
3341
3012
  }
3342
- ] }), !props.trial && /* @__PURE__ */ React.createElement(
3343
- Select,
3013
+ ] }), !props.trial && /* @__PURE__ */ React.createElement("div", { className: "relative w-full max-w-xs" }, /* @__PURE__ */ React.createElement(IconCategory2, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React.createElement(
3014
+ "select",
3344
3015
  {
3345
- clearable: true,
3346
- clearButtonLabel: "Clear class selection",
3347
- size: "sm",
3348
- placeholder: "Select a class",
3349
- nothingFound: "No options",
3350
3016
  value: props.classId,
3351
- onChange: props.onClassChange,
3352
- icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
3353
- data: props.classes.map((g) => {
3354
- return { value: g.classId, label: g.name };
3355
- })
3356
- }
3357
- ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
3358
- Tabs,
3359
- {
3360
- value: tab,
3361
- data: [
3362
- { label: "By Badge", value: "badges" },
3363
- { label: "By student", value: "students" }
3364
- ],
3365
- onChange: setTab
3366
- }
3367
- ), (!!props.trial || tab === "badges") && /* @__PURE__ */ React.createElement(
3368
- Table$1,
3369
- {
3370
- loading: props.loading,
3371
- items: props.badges
3372
- }
3373
- ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
3374
- Table$2,
3017
+ onChange: (e) => props.onClassChange(e.target.value),
3018
+ 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"
3019
+ },
3020
+ /* @__PURE__ */ React.createElement("option", { value: "" }, "All classes"),
3021
+ props.classes.map((c) => /* @__PURE__ */ React.createElement("option", { key: c.classId, value: c.classId }, c.name))
3022
+ )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, !props.trial && /* @__PURE__ */ React.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$1.map((t) => /* @__PURE__ */ React.createElement(
3023
+ "button",
3375
3024
  {
3376
- loading: props.loading,
3377
- items: props.students,
3378
- categories: props.categories
3379
- }
3380
- )))))));
3025
+ key: t.value,
3026
+ onClick: () => setTab(t.value),
3027
+ 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"}`
3028
+ },
3029
+ t.label
3030
+ ))), (!!props.trial || tab === "badges") && /* @__PURE__ */ React.createElement(Table$1, { loading: props.loading, items: props.badges }), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(Table$2, { loading: props.loading, items: props.students, categories: props.categories })));
3381
3031
  };
3382
3032
 
3383
3033
  const SplitButton = (props) => {
@@ -3504,7 +3154,7 @@ function Table(props) {
3504
3154
  const initials = (name) => name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
3505
3155
  function SubmissionDetail(props) {
3506
3156
  const { student } = props;
3507
- return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-4 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: props.onBack, className: "font-bold text-sky-blue-400 hover:underline" }, "File Locker"), /* @__PURE__ */ React.createElement("span", null, "/"), /* @__PURE__ */ React.createElement("span", { className: "font-bold text-dark-blue-400" }, student.name)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, student.avatar ? /* @__PURE__ */ React.createElement("img", { src: student.avatar, className: "h-12 w-12 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React.createElement("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-sm font-bold text-white" }, initials(student.name)), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold text-dark-blue-400" }, student.name), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-xs text-slate-400" }, student.email, props.context ? ` \xB7 ${props.context}` : "")), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500" }, student.submissions.length, " file", student.submissions.length === 1 ? "" : "s")), /* @__PURE__ */ React.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, "Files"), /* @__PURE__ */ React.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React.createElement(Stack, { items: student.submissions }))), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(
3157
+ return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-4 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: props.onBack, className: "font-bold text-sky-blue-400 hover:underline" }, "File Locker"), /* @__PURE__ */ React.createElement("span", null, "/"), /* @__PURE__ */ React.createElement("span", { className: "font-bold text-dark-blue-400" }, student.name)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, student.avatar ? /* @__PURE__ */ React.createElement("img", { src: student.avatar, className: "h-12 w-12 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React.createElement("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-sm font-bold text-white" }, initials(student.name)), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold text-dark-blue-400" }, student.name), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-xs text-slate-400" }, student.email, props.context ? ` \xB7 ${props.context}` : "")), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500" }, student.submissions.length, " file", student.submissions.length === 1 ? "" : "s")), /* @__PURE__ */ React.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, "Files"), /* @__PURE__ */ React.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React.createElement(Stack, { items: student.submissions }))), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(
3508
3158
  "button",
3509
3159
  {
3510
3160
  onClick: () => props.onNav(-1),
@@ -3706,7 +3356,7 @@ const FileLocker = (props) => {
3706
3356
  }
3707
3357
  );
3708
3358
  }
3709
- return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { onClick: props.onBackClick, className: "flex items-center gap-1 text-xs font-bold text-sky-blue-400 hover:underline" }, /* @__PURE__ */ React.createElement(IconChevronLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "mt-1.5 text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "File Locker"), /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-sm text-slate-500" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(SplitButton, { href: props.href, onCopyLinkClick: props.onCopyLinkClick, onExportDataClick: props.onExportDataClick })), /* @__PURE__ */ React.createElement(StatsGroup, { data: props.trial ? [
3359
+ return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { onClick: props.onBackClick, className: "flex items-center gap-1 text-xs font-bold text-sky-blue-400 hover:underline" }, /* @__PURE__ */ React.createElement(IconChevronLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "mt-1.5 text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "File Locker"), /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-sm text-slate-500" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(SplitButton, { href: props.href, onCopyLinkClick: props.onCopyLinkClick, onExportDataClick: props.onExportDataClick })), /* @__PURE__ */ React.createElement(StatsGroup, { data: props.trial ? [
3710
3360
  { title: "LESSONS SUBMITTED", value: props.lessonsCompleted || 0 }
3711
3361
  ] : [
3712
3362
  { title: "FILES", value: numberOfFiles },