@local-civics/mgmt-ui 0.1.215 → 0.1.216

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +26 -2
  2. package/dist/index.js +456 -812
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +458 -814
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/dist/index.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}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-1\\.5{margin-top:.375rem}.ml-\\[29px\\]{margin-left:29px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-full{height:100%}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-9{height:2.25rem}.h-screen{height:100vh}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-7{width:1.75rem}.w-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-36{width:9rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-\\[440px\\]{width:440px}.w-40{width:10rem}.w-screen{width:100vw}.w-\\[230px\\]{width:230px}.w-24{width:6rem}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[18px\\]{gap:18px}.gap-5{gap:1.25rem}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-3{gap:.75rem}.gap-3\\.5{gap:.875rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-y-4{row-gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-sky-blue-400\\/30{border-color:rgba(59,208,242,.3)}.border-mint-400\\/30{border-color:rgba(30,226,175,.3)}.border-gold-400\\/30{border-color:rgba(255,212,77,.3)}.border-transparent{border-color:transparent}.border-l-sky-blue-400{--tw-border-opacity:1;border-left-color:rgb(59 208 242/var(--tw-border-opacity))}.border-l-mint-400{--tw-border-opacity:1;border-left-color:rgb(30 226 175/var(--tw-border-opacity))}.border-l-gold-400{--tw-border-opacity:1;border-left-color:rgb(255 212 77/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.bg-gold-100{--tw-bg-opacity:1;background-color:rgb(255 248 214/var(--tw-bg-opacity))}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-blue-400{--tw-gradient-from:#3bd0f2;--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mint-400{--tw-gradient-from:#1ee2af;--tw-gradient-to:rgba(30,226,175,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gold-400{--tw-gradient-from:#ffd44d;--tw-gradient-to:rgba(255,212,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-dark-blue-600{--tw-gradient-from:#0a0f2e;--tw-gradient-to:rgba(10,15,46,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-blue-400\\/15{--tw-gradient-from:rgba(59,208,242,.15);--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-dark-blue-400{--tw-gradient-to:rgba(35,42,58,0);--tw-gradient-stops:var(--tw-gradient-from),#232a3a,var(--tw-gradient-to)}.to-dark-blue-400{--tw-gradient-to:#232a3a}.to-\\[\\#f5c300\\]{--tw-gradient-to:#f5c300}.to-sky-blue-400{--tw-gradient-to:#3bd0f2}.to-mint-400\\/15{--tw-gradient-to:rgba(30,226,175,.15)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-8{padding:2rem}.p-4{padding:1rem}.p-1{padding:.25rem}.p-5{padding:1.25rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.py-\\[18px\\]{padding-bottom:18px;padding-top:18px}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-proxima{font-family:ProximaNova}.text-\\[15\\.5px\\]{font-size:15.5px}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-\\[11px\\]{font-size:11px}.text-\\[28px\\]{font-size:28px}.text-\\[12\\.5px\\]{font-size:12.5px}.text-base{font-size:1rem;line-height:1.5rem}.text-\\[11\\.5px\\]{font-size:11.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-dark-blue-400{--tw-text-opacity:1;color:rgb(35 42 58/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-gold-400{--tw-text-opacity:1;color:rgb(255 212 77/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\]{--tw-shadow:0 3px 12px rgba(255,212,77,.35);--tw-shadow-colored:0 3px 12px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{--tw-shadow:0 2px 10px rgba(30,226,175,.15);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{border-style:solid;border-width:0}button{background-color:transparent;background-image:none;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-transform:none}.placeholder\\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:scale-\\[1\\.02\\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-sky-blue-400:focus{--tw-border-opacity:1;border-color:rgb(59 208 242/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\\:opacity-50:disabled{opacity:.5}";
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 }) {
@@ -126,8 +125,8 @@ function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened,
126
125
  }
127
126
 
128
127
  var __defProp$f = Object.defineProperty;
129
- var __defProps$b = Object.defineProperties;
130
- var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
128
+ var __defProps$c = Object.defineProperties;
129
+ var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
131
130
  var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
132
131
  var __hasOwnProp$f = Object.prototype.hasOwnProperty;
133
132
  var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
@@ -143,7 +142,7 @@ var __spreadValues$f = (a, b) => {
143
142
  }
144
143
  return a;
145
144
  };
146
- var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(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,7 +169,7 @@ function Navbar(props) {
170
169
  }
171
170
  return /* @__PURE__ */ React.createElement(
172
171
  LinksGroup,
173
- __spreadProps$b(__spreadValues$f(__spreadValues$f({
172
+ __spreadProps$c(__spreadValues$f(__spreadValues$f({
174
173
  key: item.label,
175
174
  active: props.active
176
175
  }, item), context), {
@@ -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 }) {
@@ -470,8 +467,8 @@ function useSortableData(items, config = { key: "", direction: null }) {
470
467
  }
471
468
 
472
469
  var __defProp$e = Object.defineProperty;
473
- var __defProps$a = Object.defineProperties;
474
- var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
470
+ var __defProps$b = Object.defineProperties;
471
+ var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
475
472
  var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
476
473
  var __hasOwnProp$e = Object.prototype.hasOwnProperty;
477
474
  var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
@@ -487,10 +484,11 @@ var __spreadValues$e = (a, b) => {
487
484
  }
488
485
  return a;
489
486
  };
490
- var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(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$a(__spreadValues$e({}, 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, { 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(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: "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("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(
@@ -886,8 +834,8 @@ const Dashboard = (props) => {
886
834
  };
887
835
 
888
836
  var __defProp$d = Object.defineProperty;
889
- var __defProps$9 = Object.defineProperties;
890
- var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
837
+ var __defProps$a = Object.defineProperties;
838
+ var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
891
839
  var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
892
840
  var __hasOwnProp$d = Object.prototype.hasOwnProperty;
893
841
  var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
@@ -903,8 +851,8 @@ var __spreadValues$d = (a, b) => {
903
851
  }
904
852
  return a;
905
853
  };
906
- var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
907
- const openDeleteModal = (student, onDelete) => openConfirmModal({
854
+ var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
855
+ const openDeleteModal$1 = (student, onDelete) => openConfirmModal({
908
856
  title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
909
857
  centered: true,
910
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."),
@@ -914,7 +862,7 @@ const openDeleteModal = (student, onDelete) => openConfirmModal({
914
862
  });
915
863
  function Table$c(props) {
916
864
  const preparedItems = React.useMemo(() => {
917
- return props.items.map((item) => __spreadProps$9(__spreadValues$d({}, item), {
865
+ return props.items.map((item) => __spreadProps$a(__spreadValues$d({}, item), {
918
866
  fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
919
867
  }));
920
868
  }, [props.items]);
@@ -956,7 +904,7 @@ function Table$c(props) {
956
904
  "button",
957
905
  {
958
906
  type: "button",
959
- onClick: () => openDeleteModal(row, props.onDelete),
907
+ onClick: () => openDeleteModal$1(row, props.onDelete),
960
908
  className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-red-50 hover:text-red-500"
961
909
  },
962
910
  /* @__PURE__ */ React.createElement(IconTrash, { size: 14, stroke: 1.75 })
@@ -966,8 +914,8 @@ function Table$c(props) {
966
914
  }
967
915
 
968
916
  var __defProp$c = Object.defineProperty;
969
- var __defProps$8 = Object.defineProperties;
970
- var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
917
+ var __defProps$9 = Object.defineProperties;
918
+ var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
971
919
  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
972
920
  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
973
921
  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -983,7 +931,7 @@ var __spreadValues$c = (a, b) => {
983
931
  }
984
932
  return a;
985
933
  };
986
- var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
934
+ var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
987
935
  const Class = (props) => {
988
936
  const [opened, setOpened] = useState(false);
989
937
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -995,7 +943,7 @@ const Class = (props) => {
995
943
  padding: "xl",
996
944
  size: "xl"
997
945
  },
998
- /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$8(__spreadValues$c({}, props), { close: () => setOpened(false) }))
946
+ /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$9(__spreadValues$c({}, props), { close: () => setOpened(false) }))
999
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(
1000
948
  "button",
1001
949
  {
@@ -1230,7 +1178,7 @@ var __spreadValues$b = (a, b) => {
1230
1178
  }
1231
1179
  return a;
1232
1180
  };
1233
- const useStyles$f = createStyles((theme) => ({
1181
+ const useStyles$7 = createStyles((theme) => ({
1234
1182
  title: {
1235
1183
  fontSize: 34,
1236
1184
  fontWeight: 900,
@@ -1243,7 +1191,7 @@ const useStyles$f = createStyles((theme) => ({
1243
1191
  }
1244
1192
  }));
1245
1193
  const Classes = (props) => {
1246
- const { classes } = useStyles$f();
1194
+ const { classes } = useStyles$7();
1247
1195
  const form = useForm({
1248
1196
  initialValues: {
1249
1197
  classId: "",
@@ -1394,7 +1342,7 @@ function Table$8(props) {
1394
1342
  )));
1395
1343
  }
1396
1344
 
1397
- const TABS$1 = [
1345
+ const TABS$2 = [
1398
1346
  { label: "My badges", value: "badges" },
1399
1347
  { label: "My answers", value: "answers" },
1400
1348
  { label: "My reflections", value: "reflections" }
@@ -1416,7 +1364,7 @@ const Student = (props) => {
1416
1364
  title: "BADGE COMPLETION",
1417
1365
  value: numberOfBadgesCompleted
1418
1366
  }
1419
- ] }), /* @__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(
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(
1420
1368
  "button",
1421
1369
  {
1422
1370
  key: t.value,
@@ -1534,65 +1482,35 @@ function Table$7(props) {
1534
1482
  }
1535
1483
  );
1536
1484
  }
1537
- const sortStatus = {
1538
- columnAccessor: sortConfig.key,
1539
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1540
- };
1541
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
1542
- DataTable,
1543
- {
1544
- records: sortedItems,
1545
- sortStatus,
1546
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1547
- columns: [
1548
- { accessor: "studentName", title: "Student Name", sortable: true },
1549
- { accessor: "reflection", title: "Reflection" },
1550
- { accessor: "rating", title: "Rating", sortable: true }
1551
- ]
1552
- }
1553
- ));
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)))));
1554
1487
  }
1555
1488
 
1556
- const useStyles$e = createStyles((theme) => ({
1557
- button: {
1558
- borderTopRightRadius: 0,
1559
- borderBottomRightRadius: 0,
1560
- marginLeft: 0,
1561
- marginRight: 0
1562
- },
1563
- menuControl: {
1564
- borderTopLeftRadius: 0,
1565
- borderBottomLeftRadius: 0,
1566
- border: 0,
1567
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
1568
- }
1569
- }));
1570
1489
  const SplitButton$3 = (props) => {
1571
- const { classes, theme } = useStyles$e();
1572
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
1573
- return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
1574
- Button,
1490
+ return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
1491
+ Link,
1575
1492
  {
1576
- component: Link,
1577
1493
  to: props.href,
1578
- className: classes.button,
1579
- 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"
1580
1495
  },
1581
1496
  "Preview"
1582
1497
  ), /* @__PURE__ */ React.createElement(
1583
- Button,
1498
+ "button",
1584
1499
  {
1585
- variant: "gradient",
1586
- leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
1587
- 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"
1588
1503
  },
1504
+ /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 13, stroke: 2 }),
1589
1505
  "Copy link"
1590
1506
  ), /* @__PURE__ */ React.createElement(
1591
- Button,
1507
+ "button",
1592
1508
  {
1593
- leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
1594
- 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)]"
1595
1512
  },
1513
+ /* @__PURE__ */ React.createElement(IconTableExport, { size: 13, stroke: 2 }),
1596
1514
  "Export data (.csv)"
1597
1515
  ));
1598
1516
  };
@@ -1601,13 +1519,12 @@ function Stack$3(props) {
1601
1519
  if (props.items.length === 0) {
1602
1520
  return null;
1603
1521
  }
1604
- 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.")));
1605
- 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."))));
1606
1523
  }
1607
1524
 
1608
1525
  var __defProp$a = Object.defineProperty;
1609
- var __defProps$7 = Object.defineProperties;
1610
- var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
1526
+ var __defProps$8 = Object.defineProperties;
1527
+ var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
1611
1528
  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
1612
1529
  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
1613
1530
  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -1623,18 +1540,15 @@ var __spreadValues$a = (a, b) => {
1623
1540
  }
1624
1541
  return a;
1625
1542
  };
1626
- var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
1543
+ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
1627
1544
  function Table$6(props) {
1545
+ const [expanded, setExpanded] = React.useState({});
1628
1546
  const preparedItems = React.useMemo(() => {
1629
- return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
1547
+ return props.items.map((item) => __spreadProps$8(__spreadValues$a({}, item), {
1630
1548
  status: item.isComplete ? 2 : item.isStarted ? 1 : 0
1631
1549
  }));
1632
1550
  }, [props.items]);
1633
1551
  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
1634
- const sortStatus = {
1635
- columnAccessor: sortConfig.key,
1636
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
1637
- };
1638
1552
  if (props.items.length === 0) {
1639
1553
  return /* @__PURE__ */ React.createElement(
1640
1554
  PlaceholderBanner,
@@ -1646,43 +1560,29 @@ function Table$6(props) {
1646
1560
  }
1647
1561
  );
1648
1562
  }
1649
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
1650
- DataTable,
1651
- {
1652
- verticalSpacing: "sm",
1653
- sx: { minWidth: 700 },
1654
- withBorder: false,
1655
- borderRadius: "sm",
1656
- withColumnBorders: true,
1657
- striped: true,
1658
- highlightOnHover: true,
1659
- idAccessor: "userId",
1660
- records: sortedItems,
1661
- sortStatus,
1662
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
1663
- columns: [{
1664
- accessor: "name",
1665
- title: "Student Name",
1666
- sortable: true,
1667
- 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))))
1668
- }, {
1669
- accessor: "status",
1670
- title: "Status",
1671
- sortable: true,
1672
- 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"))
1673
- }],
1674
- rowExpansion: {
1675
- content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$3, { href: record.href, items: record.answers })
1676
- }
1677
- }
1678
- ));
1679
- }
1680
-
1681
- function Stack$2(props) {
1682
- const primaryAxis = React.useMemo(
1683
- () => ({
1684
- position: "left",
1685
- getValue: (datum) => datum.primary
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
+ }));
1579
+ }
1580
+
1581
+ function Stack$2(props) {
1582
+ const primaryAxis = React.useMemo(
1583
+ () => ({
1584
+ position: "left",
1585
+ getValue: (datum) => datum.primary
1686
1586
  }),
1687
1587
  []
1688
1588
  );
@@ -1706,7 +1606,7 @@ function Stack$2(props) {
1706
1606
  }
1707
1607
  );
1708
1608
  }
1709
- const rows = props.items.map((row) => {
1609
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => {
1710
1610
  if (row.chart) {
1711
1611
  const labelMap = {};
1712
1612
  const choices = row.choices || [];
@@ -1718,7 +1618,7 @@ function Stack$2(props) {
1718
1618
  labelMap[r] = labelMap[r] ? labelMap[r] + 1 : 1;
1719
1619
  }
1720
1620
  }));
1721
- 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(
1722
1622
  Chart,
1723
1623
  {
1724
1624
  options: {
@@ -1735,64 +1635,24 @@ function Stack$2(props) {
1735
1635
  secondaryAxes
1736
1636
  }
1737
1637
  }
1738
- ))));
1638
+ )));
1739
1639
  }
1740
- 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) => {
1741
1641
  const answerText = a.join("\n");
1742
- return /* @__PURE__ */ React.createElement(Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React.createElement(Text, null, answerText));
1743
- })))));
1744
- });
1745
- 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
+ }));
1746
1645
  }
1747
1646
  const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
1748
1647
 
1749
- const useStyles$d = createStyles((theme) => ({
1750
- title: {
1751
- fontSize: 34,
1752
- fontWeight: 900,
1753
- [theme.fn.smallerThan("sm")]: {
1754
- fontSize: 24
1755
- }
1756
- },
1757
- description: {
1758
- maxWidth: 600
1759
- }
1760
- }));
1648
+ const initialsFor = (name) => name.split(/[ -]/).map((n) => n.charAt(0)).join("").toUpperCase();
1761
1649
  const Lesson = (props) => {
1762
- const { classes } = useStyles$d();
1763
1650
  const [tab, setTab] = useState("question");
1764
1651
  const numberOfStudents = props.students.length;
1765
1652
  const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
1766
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
1767
1653
  const contributors = props.contributors || [];
1768
- const avatars = contributors.slice(0, 5).map((u, i) => {
1769
- const fullName = u.name;
1770
- let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
1771
- const src = AvatarInit.initialAvatar({
1772
- background: "#1c7ed6",
1773
- color: "#fff",
1774
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1775
- fontSize: 10,
1776
- fontWeight: 250,
1777
- size: 30,
1778
- initials
1779
- });
1780
- return /* @__PURE__ */ React.createElement(Avatar, { key: i, src, radius: "xl" });
1781
- });
1782
- const remainingUsers = contributors.slice(5).length;
1783
- if (remainingUsers) {
1784
- const initials = "+" + compact(remainingUsers);
1785
- const src = AvatarInit.initialAvatar({
1786
- background: "#1c7ed6",
1787
- color: "#fff",
1788
- fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
1789
- fontSize: 10,
1790
- fontWeight: 250,
1791
- size: 30,
1792
- initials
1793
- });
1794
- avatars.push(/* @__PURE__ */ React.createElement(Avatar, { src, radius: "xl" }));
1795
- }
1654
+ const visibleContributors = contributors.slice(0, 5);
1655
+ const remainingContributors = contributors.slice(5).length;
1796
1656
  const tabs = props.trial ? [
1797
1657
  { label: "By question", value: "question" },
1798
1658
  { label: "By student", value: "students" }
@@ -1801,15 +1661,7 @@ const Lesson = (props) => {
1801
1661
  { label: "By student", value: "students" },
1802
1662
  { label: "By reflection", value: "reflections" }
1803
1663
  ];
1804
- return /* @__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(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
1805
- Badge$1,
1806
- {
1807
- variant: "filled",
1808
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
1809
- size: "lg"
1810
- },
1811
- "Back"
1812
- )), /* @__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(
1813
1665
  SplitButton$3,
1814
1666
  {
1815
1667
  href: props.href,
@@ -1817,58 +1669,36 @@ const Lesson = (props) => {
1817
1669
  onCopyLinkClick: props.onCopyLinkClick,
1818
1670
  onExportDataClick: props.onExportDataClick
1819
1671
  }
1820
- ))))), /* @__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(
1821
- StatsGroup,
1822
- {
1823
- data: [
1824
- {
1825
- title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1826
- value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons,
1827
- unit: props.trial ? "" : ""
1828
- }
1829
- ]
1830
- }
1831
- ), /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Avatar.Group, { spacing: "sm" }, avatars)), !props.trial && /* @__PURE__ */ React.createElement(
1832
- Select,
1672
+ )), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
1833
1673
  {
1834
- clearable: true,
1835
- clearButtonLabel: "Clear class selection",
1836
- size: "sm",
1837
- placeholder: "Select a class",
1838
- nothingFound: "No options",
1839
- value: props.classId,
1840
- onChange: props.onClassChange,
1841
- icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
1842
- data: props.classes.map((g) => {
1843
- return { value: g.classId, label: g.name };
1844
- })
1674
+ title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
1675
+ value: props.trial ? props.lessonsCompleted || 0 : numberOfLessons
1845
1676
  }
1846
- ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
1847
- Tabs,
1848
- {
1849
- value: tab,
1850
- data: tabs,
1851
- onChange: setTab
1852
- }
1853
- ), tab === "question" && /* @__PURE__ */ React.createElement(
1854
- Stack$2,
1677
+ ] }), contributors.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex" }, visibleContributors.map((u, i) => /* @__PURE__ */ React.createElement(
1678
+ "div",
1855
1679
  {
1856
- loading: props.loading,
1857
- items: props.questions
1858
- }
1859
- ), tab === "reflections" && /* @__PURE__ */ React.createElement(
1860
- 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",
1861
1686
  {
1862
- loading: props.loading,
1863
- items: props.reflections
1864
- }
1865
- ), tab === "students" && /* @__PURE__ */ React.createElement(
1866
- 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",
1867
1695
  {
1868
- loading: props.loading,
1869
- items: props.students
1870
- }
1871
- )))))));
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 })));
1872
1702
  };
1873
1703
 
1874
1704
  function Table$5(props) {
@@ -1878,7 +1708,7 @@ function Table$5(props) {
1878
1708
  if (props.items.length === 0) {
1879
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.");
1880
1710
  }
1881
- 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(
1882
1712
  Link,
1883
1713
  {
1884
1714
  key: row.lessonId,
@@ -1886,13 +1716,14 @@ function Table$5(props) {
1886
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"
1887
1717
  },
1888
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"),
1889
1720
  /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
1890
1721
  /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
1891
1722
  )));
1892
1723
  }
1893
1724
 
1894
1725
  const Lessons = (props) => {
1895
- 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("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(
1896
1727
  "input",
1897
1728
  {
1898
1729
  type: "text",
@@ -1903,37 +1734,23 @@ const Lessons = (props) => {
1903
1734
  )), /* @__PURE__ */ React.createElement(Table$5, { loading: props.loading, items: props.lessons }));
1904
1735
  };
1905
1736
 
1906
- const useStyles$c = createStyles((theme) => ({
1907
- title: {
1908
- fontSize: 22,
1909
- fontWeight: 900,
1910
- fontFamily: `Greycliff CF, ${theme.fontFamily}`
1911
- },
1912
- controls: {
1913
- [theme.fn.smallerThan("xs")]: {
1914
- flexDirection: "column-reverse"
1915
- }
1916
- },
1917
- control: {
1918
- [theme.fn.smallerThan("xs")]: {
1919
- width: "100%",
1920
- textAlign: "center"
1921
- }
1922
- }
1923
- }));
1924
1737
  function AccessCode(props) {
1925
- const { classes } = useStyles$c();
1926
- 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(
1927
- 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",
1928
1740
  {
1929
- component: Link,
1930
- to: props.peopleLink,
1931
- color: "dimmed",
1932
- size: "sm",
1933
- 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)]"
1934
1751
  },
1935
- /* @__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"))
1936
- ), /* @__PURE__ */ React.createElement(Button, { onClick: props.onCopyCode, className: classes.control }, "Copy code"))));
1752
+ "Copy code"
1753
+ ))));
1937
1754
  }
1938
1755
 
1939
1756
  const monthNames = [
@@ -1950,46 +1767,8 @@ const monthNames = [
1950
1767
  "November",
1951
1768
  "December"
1952
1769
  ];
1953
- const useStyles$b = createStyles((theme) => ({
1954
- title: {
1955
- fontSize: 34,
1956
- fontWeight: 900,
1957
- [theme.fn.smallerThan("sm")]: {
1958
- fontSize: 24
1959
- }
1960
- },
1961
- description: {
1962
- maxWidth: 600
1963
- },
1964
- wrapper: {
1965
- position: "relative",
1966
- marginBottom: 30
1967
- },
1968
- dropzone: {
1969
- borderWidth: 1,
1970
- paddingBottom: 50
1971
- },
1972
- icon: {
1973
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
1974
- },
1975
- control: {
1976
- position: "absolute",
1977
- width: 250,
1978
- left: "calc(50% - 125px)",
1979
- bottom: -20
1980
- }
1981
- }));
1982
1770
  const Organization = (props) => {
1983
- const { classes } = useStyles$b();
1984
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__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(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
1985
- Badge$1,
1986
- {
1987
- variant: "filled",
1988
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
1989
- size: "lg"
1990
- },
1991
- "Back"
1992
- )), /* @__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: [
1993
1772
  {
1994
1773
  title: "# OF STUDENTS",
1995
1774
  value: props.numberOfStudents || 0
@@ -2003,55 +1782,43 @@ const Organization = (props) => {
2003
1782
  value: props.percentageOfAccountsActive,
2004
1783
  unit: "%"
2005
1784
  }
2006
- ] }))))));
1785
+ ] }));
2007
1786
  };
2008
1787
 
2009
- const useStyles$a = createStyles((theme) => ({
2010
- button: {
2011
- borderTopRightRadius: 0,
2012
- borderBottomRightRadius: 0,
2013
- marginLeft: 0,
2014
- marginRight: 0
2015
- },
2016
- menuControl: {
2017
- borderTopLeftRadius: 0,
2018
- borderBottomLeftRadius: 0,
2019
- border: 0,
2020
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
2021
- }
2022
- }));
2023
1788
  const SplitButton$2 = (props) => {
2024
- const { classes, theme } = useStyles$a();
2025
- const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
2026
- const hasMenu = !!props.withOrganizationLink;
2027
- return /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
2028
- Button,
1789
+ return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
1790
+ "button",
2029
1791
  {
2030
- className: hasMenu ? classes.button : "",
2031
- leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 }),
2032
- 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)]"
2033
1795
  },
1796
+ /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 13, stroke: 2 }),
2034
1797
  "Add members"
2035
- ), hasMenu && /* @__PURE__ */ React.createElement(Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React.createElement(Menu.Target, null, /* @__PURE__ */ React.createElement(
2036
- ActionIcon,
2037
- {
2038
- variant: "filled",
2039
- color: theme.primaryColor,
2040
- size: 36,
2041
- className: classes.menuControl
2042
- },
2043
- /* @__PURE__ */ React.createElement(IconChevronDown, { size: 16, stroke: 1.5 })
2044
- )), /* @__PURE__ */ React.createElement(Menu.Dropdown, null, !!props.withOrganizationLink && /* @__PURE__ */ React.createElement(
2045
- Menu.Item,
1798
+ ), props.withOrganizationLink && /* @__PURE__ */ React.createElement(
1799
+ "button",
2046
1800
  {
2047
- icon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
2048
- 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"
2049
1804
  },
1805
+ /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 13, stroke: 2 }),
2050
1806
  "Copy organization link"
2051
- ))));
1807
+ ));
2052
1808
  };
2053
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
+ });
2054
1818
  function Table$4(props) {
1819
+ if (props.loading) {
1820
+ return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
1821
+ }
2055
1822
  if (props.items.length === 0) {
2056
1823
  return /* @__PURE__ */ React.createElement(
2057
1824
  PlaceholderBanner,
@@ -2063,29 +1830,48 @@ function Table$4(props) {
2063
1830
  }
2064
1831
  );
2065
1832
  }
2066
- const openDeleteModal = (student) => openConfirmModal({
2067
- title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
2068
- centered: true,
2069
- 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."),
2070
- labels: { confirm: "Remove Student", cancel: "Cancel" },
2071
- confirmProps: { color: "red" },
2072
- onConfirm: () => props.onDelete && props.onDelete(student)
2073
- });
2074
- 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(
2075
- Select,
2076
- {
2077
- size: "sm",
2078
- value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
2079
- onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
2080
- data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }, { value: "admin", label: "Admin" }]
2081
- }
2082
- ))), /* @__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 }))))));
2083
- 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
+ }));
2084
1870
  }
2085
1871
 
2086
1872
  var __defProp$9 = Object.defineProperty;
2087
- var __defProps$6 = Object.defineProperties;
2088
- var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
1873
+ var __defProps$7 = Object.defineProperties;
1874
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
2089
1875
  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
2090
1876
  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
2091
1877
  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -2101,38 +1887,8 @@ var __spreadValues$9 = (a, b) => {
2101
1887
  }
2102
1888
  return a;
2103
1889
  };
2104
- var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2105
- const useStyles$9 = createStyles((theme) => ({
2106
- title: {
2107
- fontSize: 34,
2108
- fontWeight: 900,
2109
- [theme.fn.smallerThan("sm")]: {
2110
- fontSize: 24
2111
- }
2112
- },
2113
- description: {
2114
- maxWidth: 600
2115
- },
2116
- wrapper: {
2117
- position: "relative",
2118
- marginBottom: 30
2119
- },
2120
- dropzone: {
2121
- borderWidth: 1,
2122
- paddingBottom: 50
2123
- },
2124
- icon: {
2125
- color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
2126
- },
2127
- control: {
2128
- position: "absolute",
2129
- width: 250,
2130
- left: "calc(50% - 125px)",
2131
- bottom: -20
2132
- }
2133
- }));
1890
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
2134
1891
  const People = (props) => {
2135
- const { classes } = useStyles$9();
2136
1892
  const form = useForm({
2137
1893
  initialValues: {
2138
1894
  userId: "",
@@ -2163,12 +1919,12 @@ const People = (props) => {
2163
1919
  padding: "xl",
2164
1920
  size: "xl"
2165
1921
  },
2166
- /* @__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(() => {
2167
1923
  const values = form.values;
2168
1924
  form.reset();
2169
1925
  setOpened(false);
2170
1926
  props.onCreateUsers && props.onCreateUsers([values]);
2171
- }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
1927
+ }) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(
2172
1928
  TextInput,
2173
1929
  __spreadValues$9({
2174
1930
  withAsterisk: true,
@@ -2187,23 +1943,22 @@ const People = (props) => {
2187
1943
  label: "Family name",
2188
1944
  placeholder: "Family name"
2189
1945
  }, form.getInputProps("familyName"))
2190
- )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
2191
- ), /* @__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(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
2192
- Badge$1,
2193
- {
2194
- variant: "filled",
2195
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
2196
- size: "lg"
2197
- },
2198
- "Back"
2199
- )), /* @__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(
2200
1955
  SplitButton$2,
2201
1956
  {
2202
1957
  withOrganizationLink: props.withOrganizationLink,
2203
1958
  onAddUsersClick: () => setOpened(true),
2204
1959
  onCopyOrganizationLinkClick: props.onCopyLinkClick
2205
1960
  }
2206
- ))), /* @__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: [
2207
1962
  {
2208
1963
  title: "# OF PEOPLE",
2209
1964
  value: props.users.length
@@ -2218,14 +1973,15 @@ const People = (props) => {
2218
1973
  unit: "%",
2219
1974
  value: props.percentageRostered
2220
1975
  }
2221
- ] }), /* @__PURE__ */ React.createElement(
2222
- 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",
2223
1978
  {
1979
+ type: "text",
2224
1980
  placeholder: "Search for a people in your organization",
2225
- data: props.users.map((item) => item.email),
2226
- 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"
2227
1983
  }
2228
- ), /* @__PURE__ */ React.createElement(
1984
+ )), /* @__PURE__ */ React.createElement(
2229
1985
  Table$4,
2230
1986
  {
2231
1987
  loading: props.loading,
@@ -2233,10 +1989,9 @@ const People = (props) => {
2233
1989
  onDelete: props.onDeleteUser,
2234
1990
  onRoleChange: props.onChangeUserRole
2235
1991
  }
2236
- ))))));
1992
+ )));
2237
1993
  };
2238
1994
  const DropzoneButton = (props) => {
2239
- const { classes, theme } = useStyles$9();
2240
1995
  const openRef = React.useRef(null);
2241
1996
  const [loading, setLoading] = React.useState(false);
2242
1997
  const onDrop = React.useCallback((acceptedFiles) => {
@@ -2257,32 +2012,33 @@ const DropzoneButton = (props) => {
2257
2012
  });
2258
2013
  });
2259
2014
  }, []);
2260
- return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(
2015
+ return /* @__PURE__ */ React.createElement("div", { className: "relative mb-8" }, /* @__PURE__ */ React.createElement(
2261
2016
  Dropzone,
2262
2017
  {
2263
2018
  loading,
2264
2019
  openRef,
2265
2020
  onDrop,
2266
- className: classes.dropzone,
2267
2021
  radius: "md",
2022
+ className: "border pb-12",
2268
2023
  accept: [MIME_TYPES.csv],
2269
2024
  maxSize: 5 * 1024 ** 2
2270
2025
  },
2271
- /* @__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(
2272
- IconCloudUpload,
2273
- {
2274
- size: 50,
2275
- color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
2276
- stroke: 1.5
2277
- }
2278
- ))), /* @__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."))
2279
- ), /* @__PURE__ */ React.createElement(Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
2280
- var _a;
2281
- return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
2282
- } }, "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
+ ));
2283
2039
  };
2284
2040
 
2285
- const useStyles$8 = createStyles((theme) => ({
2041
+ const useStyles$6 = createStyles((theme) => ({
2286
2042
  form: {
2287
2043
  backgroundColor: theme.white,
2288
2044
  padding: theme.spacing.xl,
@@ -2345,7 +2101,7 @@ const useStyles$8 = createStyles((theme) => ({
2345
2101
  }
2346
2102
  }));
2347
2103
  const StartAnonymousLesson = (props) => {
2348
- const { classes } = useStyles$8();
2104
+ const { classes } = useStyles$6();
2349
2105
  const [name, setName] = React.useState("");
2350
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(
2351
2107
  TextInput,
@@ -2402,7 +2158,7 @@ function TaskCard(props) {
2402
2158
  ));
2403
2159
  }
2404
2160
 
2405
- const useStyles$7 = createStyles((theme) => ({
2161
+ const useStyles$5 = createStyles((theme) => ({
2406
2162
  title: {
2407
2163
  fontSize: 34,
2408
2164
  fontWeight: 900,
@@ -2416,7 +2172,7 @@ const useStyles$7 = createStyles((theme) => ({
2416
2172
  }
2417
2173
  }));
2418
2174
  const UserInfo = (props) => {
2419
- const { classes } = useStyles$7();
2175
+ const { classes } = useStyles$5();
2420
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));
2421
2177
  };
2422
2178
 
@@ -2448,7 +2204,7 @@ var __objRest$1 = (source, exclude) => {
2448
2204
  }
2449
2205
  return target;
2450
2206
  };
2451
- const useStyles$6 = createStyles((theme) => ({
2207
+ const useStyles$4 = createStyles((theme) => ({
2452
2208
  card: {
2453
2209
  height: 240,
2454
2210
  backgroundSize: "cover",
@@ -2493,7 +2249,7 @@ const TenantBanner = (_a) => {
2493
2249
  "className",
2494
2250
  "code"
2495
2251
  ]);
2496
- const { classes, cx, theme } = useStyles$6();
2252
+ const { classes, cx, theme } = useStyles$4();
2497
2253
  const handleCopy = async () => {
2498
2254
  if (!code)
2499
2255
  return;
@@ -2540,7 +2296,7 @@ const TenantBanner = (_a) => {
2540
2296
  );
2541
2297
  };
2542
2298
 
2543
- const useStyles$5 = createStyles((theme) => ({
2299
+ const useStyles$3 = createStyles((theme) => ({
2544
2300
  action: {
2545
2301
  backgroundColor: "inherit",
2546
2302
  ":hover": {
@@ -2559,7 +2315,7 @@ const useStyles$5 = createStyles((theme) => ({
2559
2315
  }
2560
2316
  }));
2561
2317
  const TrialHome = (props) => {
2562
- const { classes } = useStyles$5();
2318
+ const { classes } = useStyles$3();
2563
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(
2564
2320
  Button,
2565
2321
  {
@@ -2589,8 +2345,8 @@ const TrialHome = (props) => {
2589
2345
  };
2590
2346
 
2591
2347
  var __defProp$6 = Object.defineProperty;
2592
- var __defProps$5 = Object.defineProperties;
2593
- var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2348
+ var __defProps$6 = Object.defineProperties;
2349
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
2594
2350
  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
2595
2351
  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
2596
2352
  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -2606,7 +2362,7 @@ var __spreadValues$6 = (a, b) => {
2606
2362
  }
2607
2363
  return a;
2608
2364
  };
2609
- var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2365
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
2610
2366
  var __objRest = (source, exclude) => {
2611
2367
  var target = {};
2612
2368
  for (var prop in source)
@@ -2619,7 +2375,7 @@ var __objRest = (source, exclude) => {
2619
2375
  }
2620
2376
  return target;
2621
2377
  };
2622
- const useStyles$4 = createStyles((theme, { checked }) => ({
2378
+ const useStyles$2 = createStyles((theme, { checked }) => ({
2623
2379
  button: {
2624
2380
  display: "flex",
2625
2381
  alignItems: "center",
@@ -2661,10 +2417,10 @@ function ImageCheckbox(_a) {
2661
2417
  finalValue: false,
2662
2418
  onChange
2663
2419
  });
2664
- const { classes, cx } = useStyles$4({ checked: value });
2420
+ const { classes, cx } = useStyles$2({ checked: value });
2665
2421
  return /* @__PURE__ */ React.createElement(
2666
2422
  UnstyledButton,
2667
- __spreadProps$5(__spreadValues$6({}, others), {
2423
+ __spreadProps$6(__spreadValues$6({}, others), {
2668
2424
  onClick: () => handleChange(!value),
2669
2425
  className: cx(classes.button, className)
2670
2426
  }),
@@ -2685,7 +2441,7 @@ function ImageCheckbox(_a) {
2685
2441
  function SelectGrid(props) {
2686
2442
  const items = props.items.map((item) => /* @__PURE__ */ React.createElement(
2687
2443
  ImageCheckbox,
2688
- __spreadProps$5(__spreadValues$6({}, item), {
2444
+ __spreadProps$6(__spreadValues$6({}, item), {
2689
2445
  key: item.title,
2690
2446
  onChange: (checked) => props.onChange(item.title, checked)
2691
2447
  })
@@ -2704,8 +2460,8 @@ function SelectGrid(props) {
2704
2460
  }
2705
2461
 
2706
2462
  var __defProp$5 = Object.defineProperty;
2707
- var __defProps$4 = Object.defineProperties;
2708
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2463
+ var __defProps$5 = Object.defineProperties;
2464
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
2709
2465
  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
2710
2466
  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
2711
2467
  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
@@ -2721,8 +2477,8 @@ var __spreadValues$5 = (a, b) => {
2721
2477
  }
2722
2478
  return a;
2723
2479
  };
2724
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2725
- const useStyles$3 = createStyles((theme) => ({
2480
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
2481
+ const useStyles$1 = createStyles((theme) => ({
2726
2482
  wrapper: {
2727
2483
  minHeight: "100%",
2728
2484
  boxSizing: "border-box",
@@ -2785,7 +2541,7 @@ const OPTIONS = [
2785
2541
  { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
2786
2542
  ];
2787
2543
  const TrialRegistration = (props) => {
2788
- const { classes } = useStyles$3();
2544
+ const { classes } = useStyles$1();
2789
2545
  const [firstName, setFirstName] = React.useState("");
2790
2546
  const [lastName, setLastName] = React.useState("");
2791
2547
  const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
@@ -2831,7 +2587,7 @@ const TrialRegistration = (props) => {
2831
2587
  label: "School/Organization Name",
2832
2588
  placeholder: "What's the name of your school?",
2833
2589
  data: props.organizations.map((o) => {
2834
- return __spreadProps$4(__spreadValues$5({}, o), { value: o.displayName });
2590
+ return __spreadProps$5(__spreadValues$5({}, o), { value: o.displayName });
2835
2591
  }),
2836
2592
  onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
2837
2593
  onChange: (next) => {
@@ -2843,7 +2599,7 @@ const TrialRegistration = (props) => {
2843
2599
  SelectGrid,
2844
2600
  {
2845
2601
  items: OPTIONS,
2846
- onChange: (e, checked) => setInterests(__spreadProps$4(__spreadValues$5({}, interests), { [e]: checked }))
2602
+ onChange: (e, checked) => setInterests(__spreadProps$5(__spreadValues$5({}, interests), { [e]: checked }))
2847
2603
  }
2848
2604
  ), /* @__PURE__ */ React.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(
2849
2605
  Button,
@@ -2882,8 +2638,8 @@ const AdminProvider = (props) => {
2882
2638
  };
2883
2639
 
2884
2640
  var __defProp$4 = Object.defineProperty;
2885
- var __defProps$3 = Object.defineProperties;
2886
- var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
2641
+ var __defProps$4 = Object.defineProperties;
2642
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
2887
2643
  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
2888
2644
  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
2889
2645
  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -2899,8 +2655,8 @@ var __spreadValues$4 = (a, b) => {
2899
2655
  }
2900
2656
  return a;
2901
2657
  };
2902
- var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
2903
- const useStyles$2 = createStyles((theme, props) => ({
2658
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2659
+ const useStyles = createStyles((theme, props) => ({
2904
2660
  footer: {
2905
2661
  paddingTop: theme.spacing.md,
2906
2662
  paddingBottom: theme.spacing.md,
@@ -2987,7 +2743,7 @@ const useStyles$2 = createStyles((theme, props) => ({
2987
2743
  }
2988
2744
  }));
2989
2745
  const App = (props) => {
2990
- const { classes } = useStyles$2(props);
2746
+ const { classes } = useStyles(props);
2991
2747
  const account = useAccount(props.account, props.accounts, props.onAccountChange);
2992
2748
  return /* @__PURE__ */ React.createElement(
2993
2749
  AppShell,
@@ -2995,7 +2751,7 @@ const App = (props) => {
2995
2751
  padding: "xs",
2996
2752
  navbar: props.navbar && /* @__PURE__ */ React.createElement(
2997
2753
  Navbar,
2998
- __spreadProps$3(__spreadValues$4({}, props.navbar.props), {
2754
+ __spreadProps$4(__spreadValues$4({}, props.navbar.props), {
2999
2755
  onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
3000
2756
  })
3001
2757
  ),
@@ -3089,61 +2845,52 @@ function Table$3(props) {
3089
2845
  if (props.items.length === 0) {
3090
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.");
3091
2847
  }
3092
- return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => /* @__PURE__ */ React.createElement(
3093
- Link,
3094
- {
3095
- key: row.badgeId,
3096
- to: row.href,
3097
- className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
3098
- },
3099
- /* @__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)),
3100
- /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
3101
- )));
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
+ }));
3102
2863
  }
3103
2864
 
3104
2865
  const Pathways = (props) => {
3105
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 }));
3106
2867
  };
3107
2868
 
3108
- const useStyles$1 = createStyles((theme) => ({
3109
- button: {
3110
- borderTopRightRadius: 0,
3111
- borderBottomRightRadius: 0,
3112
- marginLeft: 0,
3113
- marginRight: 0
3114
- },
3115
- menuControl: {
3116
- borderTopLeftRadius: 0,
3117
- borderBottomLeftRadius: 0,
3118
- border: 0,
3119
- borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
3120
- }
3121
- }));
3122
2869
  const SplitButton$1 = (props) => {
3123
- const { classes, theme } = useStyles$1();
3124
- theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
3125
- return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
3126
- Button,
2870
+ return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
2871
+ Link,
3127
2872
  {
3128
- component: Link,
3129
2873
  to: props.href,
3130
- className: classes.button,
3131
- 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"
3132
2875
  },
3133
2876
  "Preview"
3134
2877
  ), /* @__PURE__ */ React.createElement(
3135
- Button,
2878
+ "button",
3136
2879
  {
3137
- leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
3138
- 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"
3139
2883
  },
2884
+ /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 13, stroke: 2 }),
3140
2885
  "Copy link"
3141
2886
  ), /* @__PURE__ */ React.createElement(
3142
- Button,
2887
+ "button",
3143
2888
  {
3144
- leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
3145
- 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)]"
3146
2892
  },
2893
+ /* @__PURE__ */ React.createElement(IconTableExport, { size: 13, stroke: 2 }),
3147
2894
  "Export data (.csv)"
3148
2895
  ));
3149
2896
  };
@@ -3152,11 +2899,12 @@ function Stack$1(props) {
3152
2899
  if (props.items.length === 0) {
3153
2900
  return null;
3154
2901
  }
3155
- 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"))));
3156
- 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"))));
3157
2903
  }
3158
2904
 
3159
2905
  var __defProp$3 = Object.defineProperty;
2906
+ var __defProps$3 = Object.defineProperties;
2907
+ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
3160
2908
  var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
3161
2909
  var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
3162
2910
  var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -3172,7 +2920,10 @@ var __spreadValues$3 = (a, b) => {
3172
2920
  }
3173
2921
  return a;
3174
2922
  };
2923
+ var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
3175
2924
  function Table$2(props) {
2925
+ const [expanded, setExpanded] = React.useState({});
2926
+ const categories = props.categories || [];
3176
2927
  const preparedItems = React.useMemo(() => {
3177
2928
  return (props.items || []).map((item) => __spreadValues$3(__spreadValues$3({}, item), item.categoryPoints));
3178
2929
  }, [props.items]);
@@ -3188,55 +2939,26 @@ function Table$2(props) {
3188
2939
  }
3189
2940
  );
3190
2941
  }
3191
- const sortStatus = {
3192
- columnAccessor: sortConfig.key,
3193
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3194
- };
3195
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
3196
- DataTable,
3197
- {
3198
- verticalSpacing: "sm",
3199
- sx: { minWidth: 700 },
3200
- withBorder: false,
3201
- borderRadius: "sm",
3202
- withColumnBorders: true,
3203
- striped: true,
3204
- highlightOnHover: true,
3205
- records: sortedItems,
3206
- idAccessor: "userId",
3207
- sortStatus,
3208
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3209
- columns: [
3210
- {
3211
- accessor: "name",
3212
- title: "Student Name",
3213
- sortable: true,
3214
- titleStyle: { whiteSpace: "nowrap" },
3215
- 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)))
3216
- },
3217
- {
3218
- accessor: "isComplete",
3219
- title: "Status",
3220
- sortable: true,
3221
- titleStyle: { whiteSpace: "nowrap" },
3222
- render: (row) => /* @__PURE__ */ React.createElement(Badge$1, { color: row.isComplete ? "blue" : "red", variant: "filled" }, row.isComplete ? "Complete" : "Incomplete")
3223
- },
3224
- ...props.categories.map((category) => ({
3225
- accessor: category.categoryId,
3226
- title: category.name,
3227
- sortable: true,
3228
- titleStyle: { whiteSpace: "nowrap" },
3229
- render: (row) => {
3230
- var _a;
3231
- return /* @__PURE__ */ React.createElement(Badge$1, { color: "blue", variant: "filled" }, (_a = row[category.categoryId]) != null ? _a : 0, " pts");
3232
- }
3233
- }))
3234
- ],
3235
- rowExpansion: {
3236
- content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$1, { items: record.badges })
3237
- }
3238
- }
3239
- ));
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
+ }));
3240
2962
  }
3241
2963
 
3242
2964
  function Table$1(props) {
@@ -3252,138 +2974,60 @@ function Table$1(props) {
3252
2974
  }
3253
2975
  );
3254
2976
  }
3255
- const sortStatus = {
3256
- columnAccessor: sortConfig.key,
3257
- direction: sortConfig.direction === "desc" ? "desc" : "asc"
3258
- };
3259
- return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
3260
- 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,
3261
2980
  {
3262
- verticalSpacing: "sm",
3263
- withBorder: false,
3264
- borderRadius: "sm",
3265
- sx: { minWidth: 700 },
3266
- highlightOnHover: true,
3267
- striped: true,
3268
- records: sortedItems,
3269
- idAccessor: "badgeId",
3270
- sortStatus,
3271
- onSortStatusChange: (status) => requestSort(status.columnAccessor),
3272
- columns: [
3273
- {
3274
- accessor: "badgeName",
3275
- title: "Badge Name",
3276
- sortable: true,
3277
- render: (row) => /* @__PURE__ */ React.createElement(
3278
- Text,
3279
- {
3280
- component: Link,
3281
- to: row.href,
3282
- sx: (theme) => ({
3283
- color: theme.colorScheme === "dark" ? theme.white : theme.black,
3284
- textDecoration: "none",
3285
- fontWeight: 500,
3286
- "&:hover": {
3287
- textDecoration: "underline",
3288
- color: theme.colors.blue[6]
3289
- }
3290
- })
3291
- },
3292
- row.badgeName
3293
- )
3294
- },
3295
- {
3296
- accessor: "percentageCompletion",
3297
- title: "Badge Completion",
3298
- sortable: true,
3299
- render: (row) => {
3300
- const roundedValue = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
3301
- return `${roundedValue}%`;
3302
- }
3303
- }
3304
- ]
3305
- }
3306
- ));
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
+ )));
3307
2988
  }
3308
2989
 
3309
- const useStyles = createStyles((theme) => ({
3310
- title: {
3311
- fontSize: 34,
3312
- fontWeight: 900,
3313
- [theme.fn.smallerThan("sm")]: {
3314
- fontSize: 24
3315
- }
3316
- },
3317
- description: {
3318
- maxWidth: 600
3319
- }
3320
- }));
2990
+ const TABS$1 = [
2991
+ { label: "By Badge", value: "badges" },
2992
+ { label: "By student", value: "students" }
2993
+ ];
3321
2994
  const Pathway = (props) => {
3322
- const { classes } = useStyles();
2995
+ var _a;
3323
2996
  const [tab, setTab] = useState("badges");
3324
2997
  const numberOfStudents = props.students.length;
3325
- numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
3326
2998
  const numberOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
3327
- return /* @__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(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
3328
- Badge$1,
3329
- {
3330
- variant: "filled",
3331
- leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
3332
- size: "lg"
3333
- },
3334
- "Back"
3335
- )), /* @__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(
3336
3002
  SplitButton$1,
3337
3003
  {
3338
3004
  href: props.href,
3339
3005
  onCopyLinkClick: props.onCopyLinkClick,
3340
3006
  onExportDataClick: props.onExportDataClick
3341
3007
  }
3342
- ))))), /* @__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: [
3343
3009
  {
3344
3010
  title: props.trial ? "BADGES SUBMITTED" : "PATHWAY COMPLETION",
3345
- value: props.trial ? 0 : numberOfBadgesEarned,
3346
- unit: props.trial ? "" : ""
3011
+ value: props.trial ? 0 : numberOfBadgesEarned
3347
3012
  }
3348
- ] }), !props.trial && /* @__PURE__ */ React.createElement(
3349
- 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",
3350
3015
  {
3351
- clearable: true,
3352
- clearButtonLabel: "Clear class selection",
3353
- size: "sm",
3354
- placeholder: "Select a class",
3355
- nothingFound: "No options",
3356
3016
  value: props.classId,
3357
- onChange: props.onClassChange,
3358
- icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
3359
- data: props.classes.map((g) => {
3360
- return { value: g.classId, label: g.name };
3361
- })
3362
- }
3363
- ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
3364
- Tabs,
3365
- {
3366
- value: tab,
3367
- data: [
3368
- { label: "By Badge", value: "badges" },
3369
- { label: "By student", value: "students" }
3370
- ],
3371
- onChange: setTab
3372
- }
3373
- ), (!!props.trial || tab === "badges") && /* @__PURE__ */ React.createElement(
3374
- Table$1,
3375
- {
3376
- loading: props.loading,
3377
- items: props.badges
3378
- }
3379
- ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
3380
- 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",
3381
3024
  {
3382
- loading: props.loading,
3383
- items: props.students,
3384
- categories: props.categories
3385
- }
3386
- )))))));
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 })));
3387
3031
  };
3388
3032
 
3389
3033
  const SplitButton = (props) => {