@local-civics/mgmt-ui 0.1.212 → 0.1.214

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
-import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, Modal, Loader, Container, Button, Title, UnstyledButton, Card, SimpleGrid, Tabs as Tabs$1, Stack as Stack$5, Grid, ActionIcon, LoadingOverlay, Select, Table as Table$l, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell, Accordion } from '@mantine/core';
-import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconChevronDown, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+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';
+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';
 import { Link } from 'react-router-dom';
 import { showNotification, NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
@@ -14,47 +14,46 @@ import AvatarInit from 'avatar-initials';
 import { Chart } from 'react-charts';
 import { useUncontrolled } from '@mantine/hooks';
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
-        target[prop] = source[prop];
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
     }
-  return target;
-};
-const useStyles$v = createStyles((theme) => ({
-  user: {
-    display: "block",
-    width: "100%",
-    padding: theme.spacing.md,
-    cursor: "default",
-    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
+  } else {
+    head.appendChild(style);
   }
-}));
-function UserButton(_a) {
-  var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$v();
-  return /* @__PURE__ */ React.createElement(Group, __spreadValues$f({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "@font-face{font-family:ProximaNova;src:url(https://cdn.localcivics.io/fonts/ProximaNova.otf) format(\"opentype\")}@font-face{font-family:ProximaNova;font-weight:700;src:url(https://cdn.localcivics.io/fonts/ProximaNovaBold.otf) format(\"opentype\")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\\!relative{position:relative!important}.left-3\\.5{left:.875rem}.top-1\\/2{top:50%}.left-3{left:.75rem}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-1\\.5{margin-top:.375rem}.ml-\\[29px\\]{margin-left:29px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-full{height:100%}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-9{height:2.25rem}.h-screen{height:100vh}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-7{width:1.75rem}.w-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-36{width:9rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-\\[440px\\]{width:440px}.w-40{width:10rem}.w-screen{width:100vw}.w-\\[230px\\]{width:230px}.w-24{width:6rem}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-\\[1100px\\]{max-width:1100px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[18px\\]{gap:18px}.gap-5{gap:1.25rem}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-3{gap:.75rem}.gap-3\\.5{gap:.875rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-y-4{row-gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-sky-blue-400\\/30{border-color:rgba(59,208,242,.3)}.border-mint-400\\/30{border-color:rgba(30,226,175,.3)}.border-gold-400\\/30{border-color:rgba(255,212,77,.3)}.border-transparent{border-color:transparent}.border-l-sky-blue-400{--tw-border-opacity:1;border-left-color:rgb(59 208 242/var(--tw-border-opacity))}.border-l-mint-400{--tw-border-opacity:1;border-left-color:rgb(30 226 175/var(--tw-border-opacity))}.border-l-gold-400{--tw-border-opacity:1;border-left-color:rgb(255 212 77/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-blue-400{--tw-gradient-from:#3bd0f2;--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mint-400{--tw-gradient-from:#1ee2af;--tw-gradient-to:rgba(30,226,175,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gold-400{--tw-gradient-from:#ffd44d;--tw-gradient-to:rgba(255,212,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-dark-blue-600{--tw-gradient-from:#0a0f2e;--tw-gradient-to:rgba(10,15,46,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-blue-400\\/15{--tw-gradient-from:rgba(59,208,242,.15);--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-dark-blue-400{--tw-gradient-to:rgba(35,42,58,0);--tw-gradient-stops:var(--tw-gradient-from),#232a3a,var(--tw-gradient-to)}.to-dark-blue-400{--tw-gradient-to:#232a3a}.to-\\[\\#f5c300\\]{--tw-gradient-to:#f5c300}.to-sky-blue-400{--tw-gradient-to:#3bd0f2}.to-mint-400\\/15{--tw-gradient-to:rgba(30,226,175,.15)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-8{padding:2rem}.p-4{padding:1rem}.p-1{padding:.25rem}.p-5{padding:1.25rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.py-\\[18px\\]{padding-bottom:18px;padding-top:18px}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-proxima{font-family:ProximaNova}.text-\\[15\\.5px\\]{font-size:15.5px}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-\\[11px\\]{font-size:11px}.text-\\[28px\\]{font-size:28px}.text-\\[12\\.5px\\]{font-size:12.5px}.text-base{font-size:1rem;line-height:1.5rem}.text-\\[11\\.5px\\]{font-size:11.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-dark-blue-400{--tw-text-opacity:1;color:rgb(35 42 58/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-gold-400{--tw-text-opacity:1;color:rgb(255 212 77/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\]{--tw-shadow:0 3px 12px rgba(255,212,77,.35);--tw-shadow-colored:0 3px 12px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{--tw-shadow:0 2px 10px rgba(30,226,175,.15);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{border-style:solid;border-width:0}button{background-color:transparent;background-image:none;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-transform:none}.placeholder\\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:scale-\\[1\\.02\\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-sky-blue-400:focus{--tw-border-opacity:1;border-color:rgb(59 208 242/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\\:opacity-50:disabled{opacity:.5}";
+styleInject(css_248z);
+
+function UserButton({ image, name, email }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "m-3 flex items-center gap-2.5 rounded-xl border border-mint-400/30 bg-gradient-to-r from-sky-blue-400/15 to-mint-400/15 p-2.5 shadow-[0_2px_10px_rgba(30,226,175,0.15)]" }, /* @__PURE__ */ React.createElement(
+    Avatar,
+    {
+      src: image,
+      radius: "xl",
+      size: 32,
+      styles: { placeholder: { color: "#232A3A", backgroundColor: "rgba(30,226,175,0.2)" } }
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-[10px] text-slate-500" }, email)));
 }
 
 const compact = (num) => {
@@ -64,102 +63,66 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$u = createStyles((theme, _params, getRef) => {
-  const icon = getRef("icon");
-  return {
-    control: {
-      fontWeight: 500,
-      width: "100%",
-      padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-      fontSize: theme.fontSizes.sm,
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0],
-        color: theme.colorScheme === "dark" ? theme.white : theme.black
-      }
-    },
-    controlButton: {
-      cursor: "pointer"
-    },
-    badge: {
-      pointerEvents: "none"
-    },
-    link: {
-      fontWeight: 500,
-      display: "block",
-      textDecoration: "none",
-      padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
-      paddingLeft: 31,
-      marginLeft: 30,
-      fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
-      borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0],
-        color: theme.colorScheme === "dark" ? theme.white : theme.black
-      }
-    },
-    linkActive: {
-      "&, &:hover": {
-        backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
-        color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color,
-        [`& .${icon}`]: {
-          color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
-        }
-      }
-    },
-    chevron: {
-      transition: "transform 200ms ease"
-    },
-    linkIcon: {
-      ref: icon
-    }
-  };
-});
-function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$u();
+const ACCENT_CLASSNAMES = {
+  cyan: {
+    row: "bg-sky-blue-400/15 border-sky-blue-400/30",
+    chip: "bg-sky-blue-400/25",
+    icon: "text-sky-blue-400",
+    pill: "bg-sky-blue-400/15 text-dark-blue-400"
+  },
+  mint: {
+    row: "bg-mint-400/15 border-mint-400/30",
+    chip: "bg-mint-400/25",
+    icon: "text-mint-400",
+    pill: "bg-mint-400/15 text-dark-blue-400"
+  },
+  gold: {
+    row: "bg-gold-400/15 border-gold-400/30",
+    chip: "bg-gold-400/25",
+    icon: "text-gold-400",
+    pill: "bg-gold-400/15 text-dark-blue-400"
+  }
+};
+function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened, links, active, notifications }) {
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = useState(initiallyOpened || hasActiveLinks || false);
   React.useEffect(() => {
     setOpened(hasActiveLinks);
   }, [hasActiveLinks]);
-  const ChevronIcon = theme.dir === "ltr" ? IconChevronRight : IconChevronLeft;
+  const isActive = !!active && !hasLinks && label === active;
+  const accentClasses = ACCENT_CLASSNAMES[accent];
   const items = (hasLinks ? links : []).map((link) => {
+    const linkActive = !!active && active === `${label}/${link.label}`;
     return /* @__PURE__ */ React.createElement(
-      Box,
+      Link,
       {
-        className: cx(classes.link, { [classes.linkActive]: !!active && active === `${label}/${link.label}` }),
-        key: link.label
+        key: link.label,
+        to: link.href,
+        className: `flex items-center justify-between gap-2 rounded-[8px] border px-3 py-2 text-xs no-underline transition-colors ${linkActive ? `${accentClasses.row} font-bold text-dark-blue-400` : "border-transparent font-medium text-slate-500 hover:bg-slate-50"}`
       },
-      /* @__PURE__ */ React.createElement(Group, { position: "apart", spacing: 0 }, /* @__PURE__ */ React.createElement(Text, { component: Link, to: link.href }, link.label), !!link.notifications && /* @__PURE__ */ React.createElement(Badge$1, { size: "sm", variant: "filled", className: classes.badge }, compact(link.notifications)))
+      link.label,
+      !!link.notifications && /* @__PURE__ */ React.createElement("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-bold ${accentClasses.pill}` }, compact(link.notifications))
     );
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Group,
+  const rowInner = /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center gap-2.5" }, /* @__PURE__ */ React.createElement("div", { className: `flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg ${isActive ? accentClasses.chip : "bg-slate-50"}` }, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: isActive ? 2.2 : 1.75, className: isActive ? accentClasses.icon : "text-slate-400" })), /* @__PURE__ */ React.createElement("span", { className: `flex-1 text-xs ${isActive ? "font-bold text-dark-blue-400" : "font-medium text-slate-500"}` }, label));
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
     {
-      className: cx(classes.control, {
-        [classes.linkActive]: !!active && !hasLinks && label === active,
-        [classes.controlButton]: hasLinks
-      }),
-      onClick: () => setOpened((o) => !o),
-      position: "apart",
-      spacing: 0
+      onClick: () => hasLinks && setOpened((o) => !o),
+      className: `flex items-center gap-2.5 rounded-[10px] border px-3.5 py-2.5 transition-colors ${isActive ? accentClasses.row : "border-transparent hover:bg-slate-50"} ${hasLinks ? "cursor-pointer" : ""}`
     },
-    /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(ThemeIcon, { variant: "light", size: 30 }, /* @__PURE__ */ React.createElement(Icon, { className: classes.linkIcon, size: 18 })), /* @__PURE__ */ React.createElement(Box, { ml: "md" }, /* @__PURE__ */ React.createElement(Text, { component: Link, to: href }, label))),
-    !!notifications && /* @__PURE__ */ React.createElement(Badge$1, { size: "sm", variant: "filled", className: classes.badge }, compact(notifications)),
+    hasLinks ? rowInner : /* @__PURE__ */ React.createElement(Link, { to: href, className: "flex flex-1 items-center gap-2.5 no-underline" }, rowInner),
+    !!notifications && /* @__PURE__ */ React.createElement("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-bold ${accentClasses.pill}` }, compact(notifications)),
     hasLinks && /* @__PURE__ */ React.createElement(
-      ChevronIcon,
+      IconChevronRight,
       {
-        className: classes.chevron,
-        size: 14,
-        stroke: 1.5,
-        style: {
-          transform: opened ? `rotate(${theme.dir === "rtl" ? -90 : 90}deg)` : "none"
-        }
+        size: 13,
+        stroke: 2.2,
+        className: `shrink-0 text-slate-300 transition-transform ${opened ? "rotate-90" : ""}`
       }
     )
-  ), hasLinks ? /* @__PURE__ */ React.createElement(Collapse, { in: opened }, items) : null);
+  ), hasLinks && opened && /* @__PURE__ */ React.createElement("div", { className: "ml-[29px] mt-0.5 flex flex-col gap-0.5 border-l border-slate-100 pl-2.5" }, items));
 }
 
 var __defProp$e = Object.defineProperty;
@@ -181,100 +144,15 @@ var __spreadValues$e = (a, b) => {
   return a;
 };
 var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-const useStyles$t = createStyles((theme, _params, getRef) => {
-  const icon = getRef("icon");
-  return {
-    navbar: {
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white
-    },
-    navHeader: {
-      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
-        height: 71,
-        position: "absolute",
-        top: 0
-      }
-    },
-    navBody: {
-      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
-        display: "none"
-      }
-    },
-    burger: {
-      [theme.fn.largerThan("sm")]: {
-        display: "none"
-      }
-    },
-    header: {
-      padding: theme.spacing.md,
-      paddingTop: 0,
-      marginLeft: -theme.spacing.md,
-      marginRight: -theme.spacing.md,
-      color: theme.colorScheme === "dark" ? theme.white : theme.black,
-      borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
-    },
-    link: __spreadProps$a(__spreadValues$e({}, theme.fn.focusStyles()), {
-      display: "flex",
-      alignItems: "center",
-      textDecoration: "none",
-      fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
-      padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-      borderRadius: theme.radius.sm,
-      fontWeight: 500,
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
-        color: theme.colorScheme === "dark" ? theme.white : theme.black,
-        [`& .${icon}`]: {
-          color: theme.colorScheme === "dark" ? theme.white : theme.black
-        }
-      }
-    }),
-    linkIcon: {
-      ref: icon,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
-      marginRight: theme.spacing.sm
-    },
-    links: {
-      marginLeft: -theme.spacing.md,
-      marginRight: -theme.spacing.md
-    },
-    user: {
-      margin: theme.spacing.md,
-      marginLeft: 0,
-      marginRight: 0
-    },
-    linksInner: {
-      paddingBottom: theme.spacing.xl
-    },
-    footer: {
-      paddingTop: theme.spacing.md,
-      paddingBottom: theme.spacing.md,
-      borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`
-    },
-    active: {
-      "&, &:hover": {
-        backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
-        color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
-      }
-    }
-  };
-});
 const data = [
-  { label: "Home", icon: IconHome2 },
-  { label: "Dashboard", icon: IconGauge },
-  { label: "Classes", icon: IconCategory2 },
-  { label: "Pathways", icon: IconRoute },
-  { label: "Badges", icon: IconAlbum },
-  { label: "Lessons", icon: IconLambda },
-  { label: "File Locker", icon: IconClipboard },
-  {
-    label: "Organization",
-    icon: IconBuilding,
-    links: [
-      { label: "Overview" },
-      { label: "People" }
-    ]
-  }
+  { label: "Home", icon: IconHome2, accent: "cyan" },
+  { label: "Dashboard", icon: IconGauge, accent: "mint" },
+  { label: "Classes", icon: IconCategory2, accent: "gold" },
+  { label: "Pathways", icon: IconRoute, accent: "cyan" },
+  { label: "Badges", icon: IconAlbum, accent: "mint" },
+  { label: "Lessons", icon: IconLambda, accent: "gold" },
+  { label: "File Locker", icon: IconClipboard, accent: "cyan" },
+  { label: "Organization", icon: IconBuilding, accent: "gold", links: [{ label: "Overview" }, { label: "People" }] }
 ];
 const TRIAL_PAGES = [
   "Home",
@@ -282,9 +160,6 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$t();
-  const [burgerOpen, setBurgerOpen] = React.useState(false);
-  const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
     const context = props.links[item.label] || { notifications: 0, href: "" };
     if (context.hidden || props.trial && TRIAL_PAGES.indexOf(item.label) === -1) {
@@ -305,27 +180,22 @@ function Navbar(props) {
       })
     );
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Navbar$1, { width: { sm: 300 }, p: "md", className: cx(classes.navbar, { [classes.navHeader]: !burgerOpen }) }, /* @__PURE__ */ React.createElement(Navbar$1.Section, { className: classes.header }, /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React.createElement(Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Code, { sx: { fontWeight: 700 } }, props.version), !!props.trial && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", radius: "xs" }, "Trial"), /* @__PURE__ */ React.createElement(Burger, { opened: burgerOpen, onClick: toggle, className: classes.burger, size: "sm" })))), /* @__PURE__ */ React.createElement("div", { className: cx({ [classes.navBody]: !burgerOpen }) }, !props.loading && /* @__PURE__ */ React.createElement(
-    UserButton,
-    {
-      className: classes.user,
-      image: props.image,
-      name: props.name,
-      email: props.email
-    }
-  ), /* @__PURE__ */ React.createElement(Navbar$1.Section, { grow: true, className: classes.links, component: ScrollArea }, /* @__PURE__ */ React.createElement("div", { className: classes.linksInner }, links)), !props.loading && /* @__PURE__ */ React.createElement(Navbar$1.Section, { className: classes.footer }, props.trial && /* @__PURE__ */ React.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
-    event.preventDefault();
-    props.onGettingStarted();
-  } }, /* @__PURE__ */ React.createElement(IconVideo, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Getting started")), !!props.onSwitchAccounts && /* @__PURE__ */ React.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
-    event.preventDefault();
-    props.onSwitchAccounts && props.onSwitchAccounts();
-  } }, /* @__PURE__ */ React.createElement(IconSwitchHorizontal, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Change account")), /* @__PURE__ */ React.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
-    event.preventDefault();
-    props.onLogout();
-  } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
+  return /* @__PURE__ */ React.createElement("nav", { className: "flex h-full w-[230px] shrink-0 flex-col border-r border-slate-200 bg-white" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between border-b border-slate-100 p-4" }, /* @__PURE__ */ React.createElement("div", { className: "w-24" }, /* @__PURE__ */ React.createElement("img", { className: "w-full object-contain", src: "https://cdn.localcivics.io/brand/localcivics.png", alt: "Logo" })), !!props.trial && /* @__PURE__ */ React.createElement("span", { className: "rounded-full bg-gold-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Trial")), !props.loading && /* @__PURE__ */ React.createElement(UserButton, { image: props.image, name: props.name, email: props.email }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 flex-col gap-0.5 overflow-y-auto p-2.5" }, links), !props.loading && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 border-t border-slate-200 p-2.5" }, props.trial && /* @__PURE__ */ React.createElement(UtilLink, { label: "Getting started", icon: IconVideo, onClick: props.onGettingStarted }), !!props.onSwitchAccounts && /* @__PURE__ */ React.createElement(UtilLink, { label: "Change account", icon: IconSwitchHorizontal, onClick: props.onSwitchAccounts }), /* @__PURE__ */ React.createElement(UtilLink, { label: "Logout", icon: IconLogout, onClick: props.onLogout })));
 }
+const UtilLink = (props) => {
+  const Icon = props.icon;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: props.onClick,
+      className: "flex cursor-pointer items-center gap-2.5 rounded-[10px] px-3.5 py-2 text-slate-400 hover:bg-slate-50 hover:text-slate-500"
+    },
+    /* @__PURE__ */ React.createElement(Icon, { size: 13, stroke: 1.75 }),
+    /* @__PURE__ */ React.createElement("span", { className: "text-[11.5px]" }, props.label)
+  );
+};
 
-const useStyles$s = createStyles((theme) => ({
+const useStyles$k = createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -361,7 +231,7 @@ const useStyles$s = createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$s();
+  const { classes } = useStyles$k();
   return /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -375,7 +245,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$r = createStyles((theme) => ({
+const useStyles$j = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -416,7 +286,7 @@ const useStyles$r = createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$r();
+  const { classes, theme } = useStyles$j();
   const options = props.accounts.map((a) => {
     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")));
   });
@@ -433,51 +303,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$q = createStyles((theme) => ({
-  root: {
-    display: "flex",
-    backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
-    padding: theme.spacing.xl * 1.5,
-    borderRadius: theme.radius.md
-  },
-  title: {
-    color: theme.white,
-    textTransform: "uppercase",
-    fontWeight: 700,
-    fontSize: theme.fontSizes.sm
-  },
-  count: {
-    color: theme.white,
-    fontSize: 32,
-    lineHeight: 1,
-    fontWeight: 700,
-    marginBottom: theme.spacing.md,
-    fontFamily: `Greycliff CF, ${theme.fontFamily}`
-  },
-  description: {
-    color: theme.colors[theme.primaryColor][0],
-    fontSize: theme.fontSizes.sm,
-    marginTop: 5
-  },
-  stat: {
-    flex: 1,
-    "& + &": {
-      paddingLeft: theme.spacing.xl,
-      marginLeft: theme.spacing.xl,
-      borderLeft: `1px solid ${theme.colors[theme.primaryColor][3]}`,
-      [theme.fn.smallerThan("sm")]: {
-        paddingLeft: 0,
-        marginLeft: 0,
-        borderLeft: 0,
-        paddingTop: theme.spacing.xl,
-        marginTop: theme.spacing.xl,
-        borderTop: `1px solid ${theme.colors[theme.primaryColor][3]}`
-      }
-    }
-  }
-}));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$q();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -486,9 +312,9 @@ const StatsGroup = ({ data, footer }) => {
       return stat.value;
     })();
     const safeValue = Number.isFinite(value) ? value : 0;
-    return /* @__PURE__ */ React.createElement("div", { key: stat.title, className: classes.stat }, /* @__PURE__ */ React.createElement(Text, { className: classes.count }, safeValue.toLocaleString(), stat.unit), /* @__PURE__ */ React.createElement(Text, { className: classes.title }, stat.title));
+    return /* @__PURE__ */ React.createElement("div", { key: stat.title }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-black text-white" }, safeValue.toLocaleString(), stat.unit), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[11px] font-bold uppercase tracking-wide text-white/70" }, stat.title));
   });
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, stats, footer);
+  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);
 };
 
 const Tabs = (props) => {
@@ -497,7 +323,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
 };
 
-const useStyles$p = createStyles((theme) => ({
+const useStyles$i = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -511,8 +337,8 @@ const useStyles$p = createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton$5 = (props) => {
-  const { classes, theme } = useStyles$p();
+const SplitButton$4 = (props) => {
+  const { classes, theme } = useStyles$i();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -540,7 +366,7 @@ const SplitButton$5 = (props) => {
   ));
 };
 
-const useStyles$o = createStyles((theme) => ({
+const useStyles$h = createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -591,7 +417,7 @@ const useStyles$o = createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$o();
+  const { classes } = useStyles$h();
   const title = props.title || "Nothing to display";
   const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
   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 }));
@@ -761,7 +587,7 @@ function Table$j(props) {
   ));
 }
 
-const useStyles$n = createStyles((theme) => ({
+const useStyles$g = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -774,7 +600,7 @@ const useStyles$n = createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$n();
+  const { classes } = useStyles$g();
   const [tab, setTab] = useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -788,7 +614,7 @@ const Badge = (props) => {
     },
     "Back"
   )), /* @__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(
-    SplitButton$5,
+    SplitButton$4,
     {
       href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
@@ -841,65 +667,34 @@ const Badge = (props) => {
 };
 
 function Table$i(props) {
+  if (props.loading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
+  }
   if (props.items.length === 0) {
-    return /* @__PURE__ */ React.createElement(
-      PlaceholderBanner,
-      {
-        title: "No badges to display",
-        description: "We don't have any badges to show you just yet.",
-        loading: props.loading,
-        icon: "badges"
-      }
-    );
+    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.");
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
-    UnstyledButton,
+  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(
+    Link,
     {
-      component: Link,
+      key: row.badgeId,
       to: row.href,
-      sx: (theme) => ({
-        display: "block",
-        width: "100%",
-        padding: theme.spacing.md,
-        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-        "&:hover": {
-          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
-        }
-      })
+      className: `block px-5 py-4 no-underline hover:bg-slate-50 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
     },
-    /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
-  ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+    /* @__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)
+  )));
 }
 
-const useStyles$m = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
-    }
-  },
-  description: {
-    maxWidth: 600
-  }
-}));
 const Badges = (props) => {
-  const { classes } = useStyles$m();
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Key milestones that reflect skill development, micro-credentials, or academic progress"))), /* @__PURE__ */ React.createElement(
-    Autocomplete,
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Project-sized skills acquisition and standards alignment.")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2.5 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm" }, /* @__PURE__ */ React.createElement(IconSearch, { size: 15, stroke: 1.75, className: "text-slate-400" }), /* @__PURE__ */ React.createElement(
+    "input",
     {
+      type: "text",
       placeholder: "Search for a badge that fits your needs",
-      data: props.badges.map((item) => item.name),
-      onChange: props.onAutocompleteChange
-    }
-  ), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
-    Table$i,
-    {
-      loading: props.loading,
-      items: props.badges
+      onChange: (e) => props.onAutocompleteChange(e.target.value),
+      className: "flex-1 border-none bg-transparent text-sm text-dark-blue-400 outline-none placeholder:text-slate-400"
     }
-  ))));
+  )), /* @__PURE__ */ React.createElement(Table$i, { loading: props.loading, items: props.badges }));
 };
 
 function Table$h(props) {
@@ -1090,30 +885,58 @@ const Dashboard = (props) => {
   )))))));
 };
 
-const SplitButton$4 = (props) => {
-  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 }),
-      onClick: props.onAddMembersClick
-    },
-    "Add students"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
-      onClick: props.onCopyClassLinkClick
-    },
-    "Copy link"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
-      onClick: props.onExportDataClick
-    },
-    "Export data (.csv)"
-  ));
-};
+const openDeleteModal = (student, onDelete) => openConfirmModal({
+  title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
+  centered: true,
+  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."),
+  labels: { confirm: "Remove Student", cancel: "Cancel" },
+  confirmProps: { color: "red" },
+  onConfirm: () => onDelete(student)
+});
+function Table$c(props) {
+  if (props.loading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
+  }
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "You have not rostered any students yet.");
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] gap-3 border-b border-slate-100 px-5 py-3 text-[10px] font-bold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("div", null, "Name"), /* @__PURE__ */ React.createElement("div", null, "Role"), /* @__PURE__ */ React.createElement("div", null, "Badges Earned"), /* @__PURE__ */ React.createElement("div", null, "Lessons Completed"), /* @__PURE__ */ React.createElement("div", null, "Account Created?"), /* @__PURE__ */ React.createElement("div", null)), props.items.map((row, i) => {
+    var _a, _b;
+    const name = row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email;
+    const initials = (((_a = row.givenName) == null ? void 0 : _a[0]) || row.email[0] || "?") + (((_b = row.familyName) == null ? void 0 : _b[0]) || "");
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: row.email,
+        className: `grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
+      },
+      /* @__PURE__ */ React.createElement(Link, { to: row.href, className: "flex min-w-0 items-center gap-2.5 no-underline" }, row.avatar ? /* @__PURE__ */ React.createElement("img", { className: "h-8 w-8 shrink-0 rounded-full object-cover", src: row.avatar, alt: name }) : /* @__PURE__ */ React.createElement("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-mint-400/20 text-[10px] font-bold text-dark-blue-400" }, initials.toUpperCase()), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-[10.5px] text-slate-400" }, row.email))),
+      /* @__PURE__ */ React.createElement(
+        "select",
+        {
+          disabled: row.readonly,
+          value: row.isAdmin ? "educator" : "student",
+          onChange: (e) => props.onRoleChange && props.onRoleChange(row, e.target.value),
+          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"
+        },
+        /* @__PURE__ */ React.createElement("option", { value: "student" }, "Student"),
+        /* @__PURE__ */ React.createElement("option", { value: "educator" }, "Educator")
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.badgesEarned),
+      /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.lessonsCompleted),
+      /* @__PURE__ */ React.createElement("div", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { size: 16, stroke: 3, className: "text-mint-400" })),
+      /* @__PURE__ */ React.createElement("div", null, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => openDeleteModal(row, props.onDelete),
+          className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-300 hover:bg-red-50 hover:text-red-500"
+        },
+        /* @__PURE__ */ React.createElement(IconTrash, { size: 14, stroke: 1.75 })
+      ))
+    );
+  }));
+}
 
 var __defProp$c = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
@@ -1134,225 +957,46 @@ var __spreadValues$c = (a, b) => {
   return a;
 };
 var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-function Table$c(props) {
-  const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$8(__spreadValues$c({}, item), {
-      fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
-    }));
-  }, [props.items]);
-  console.groupEnd();
-  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
-  if (props.items.length === 0) {
-    return /* @__PURE__ */ React.createElement(
-      PlaceholderBanner,
-      {
-        title: "No members to display",
-        description: "You have not rostered any students yet.",
-        loading: props.loading,
-        icon: "groups"
-      }
-    );
-  }
-  const sortStatus = {
-    columnAccessor: sortConfig.key,
-    direction: sortConfig.direction === "desc" ? "desc" : "asc"
-  };
-  const openDeleteModal = (student) => openConfirmModal({
-    title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
-    centered: true,
-    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."),
-    labels: { confirm: "Remove Student", cancel: "Cancel" },
-    confirmProps: { color: "red" },
-    onConfirm: () => props.onDelete && props.onDelete(student)
-  });
-  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(
-    DataTable,
-    {
-      verticalSpacing: 20,
-      sx: { minWidth: 700 },
-      highlightOnHover: true,
-      striped: true,
-      records: sortedItems,
-      idAccessor: "email",
-      sortStatus,
-      onSortStatusChange: (status) => requestSort(status.columnAccessor),
-      columns: [
-        {
-          accessor: "fullName",
-          title: "Name",
-          sortable: true,
-          render: (row) => /* @__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))))
-        },
-        {
-          accessor: "isAdmin",
-          title: "Role",
-          sortable: true,
-          render: (row) => /* @__PURE__ */ React.createElement(Box, { maw: 150 }, /* @__PURE__ */ React.createElement(
-            Select,
-            {
-              size: "sm",
-              disabled: row.readonly,
-              value: row.isAdmin ? "educator" : "student",
-              onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
-              data: [
-                { label: "Student", value: "student" },
-                { label: "Educator", value: "educator" }
-              ]
-            }
-          ))
-        },
-        {
-          accessor: "badgesEarned",
-          title: "Badges Earned",
-          sortable: true
-        },
-        {
-          accessor: "lessonsCompleted",
-          title: "Lessons Completed",
-          sortable: true
-        },
-        {
-          accessor: "hasAccount",
-          title: "Account Created?",
-          sortable: true,
-          render: (row) => row.hasAccount ? /* @__PURE__ */ React.createElement(IconCheck, { color: "green" }) : null
-        },
-        {
-          accessor: "actions",
-          title: "",
-          textAlignment: "right",
-          render: (row) => /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red", onClick: () => openDeleteModal(row) }, /* @__PURE__ */ React.createElement(IconTrash, { size: 16, stroke: 1.5 })))
-        }
-      ]
-    }
-  ));
-}
-
-var __defProp$b = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-const useStyles$l = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
-    }
-  },
-  description: {
-    maxWidth: 600
-  },
-  autocomplete: {
-    maxWidth: 400
-  },
-  wrapper: {
-    position: "relative",
-    marginBottom: 30
-  },
-  dropzone: {
-    borderWidth: 1,
-    paddingBottom: 50
-  },
-  icon: {
-    color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
-  },
-  control: {
-    position: "absolute",
-    width: 250,
-    left: "calc(50% - 125px)",
-    bottom: -20
-  }
-}));
-const Class = (props) => {
-  const { classes } = useStyles$l();
-  const form = useForm({
-    initialValues: {
-      classId: "",
-      userId: "",
-      email: "",
-      givenName: "",
-      familyName: "",
-      avatar: "",
-      role: "",
-      readonly: false,
-      lastActivity: null,
-      hasAccount: false,
-      lessonsCompleted: 0,
-      badgesEarned: 0,
-      href: "",
-      isAdmin: false
-    },
-    validate: {
-      email: (value) => /^\S+@\S+$/.test(value) && props.members.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
-    }
-  });
-  const [opened, setOpened] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Drawer,
+const Class = (props) => {
+  const [opened, setOpened] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Drawer,
     {
       opened,
       onClose: () => setOpened(false),
-      title: /* @__PURE__ */ React.createElement(Title, { size: "h5" }, "Add students"),
+      title: "Add students",
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$7(__spreadValues$b({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
-      const values = form.values;
-      form.reset();
-      setOpened(false);
-      props.onCreateMembers && props.onCreateMembers([values]);
-    }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
-      TextInput,
-      __spreadValues$b({
-        withAsterisk: true,
-        label: "Email",
-        placeholder: "Email"
-      }, form.getInputProps("email"))
-    ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
-      TextInput,
-      __spreadValues$b({
-        label: "Given name",
-        placeholder: "Given name"
-      }, form.getInputProps("givenName"))
-    ), /* @__PURE__ */ React.createElement(
-      TextInput,
-      __spreadValues$b({
-        label: "Family name",
-        placeholder: "Family name"
-      }, form.getInputProps("familyName"))
-    )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
-  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
-    Badge$1,
+    /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$8(__spreadValues$c({}, props), { close: () => setOpened(false) }))
+  ), /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-5xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, props.description || "No description")), !props.loading && /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
+    "button",
     {
-      variant: "filled",
-      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
-      size: "lg"
+      type: "button",
+      onClick: () => setOpened(true),
+      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"
     },
-    "Back"
-  )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
-    SplitButton$4,
+    /* @__PURE__ */ React.createElement(IconPlus, { size: 13, stroke: 2 }),
+    "Add students"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
     {
-      onAddMembersClick: () => setOpened(true),
-      onCopyClassLinkClick: props.onCopyLinkClick,
-      onExportDataClick: props.onExportDataClick
-    }
-  ))), /* @__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: [
+      type: "button",
+      onClick: props.onCopyLinkClick,
+      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"
+    },
+    /* @__PURE__ */ React.createElement(IconLink, { size: 13, stroke: 2 }),
+    "Copy class link"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: props.onExportDataClick,
+      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)]"
+    },
+    /* @__PURE__ */ React.createElement(IconDownload, { size: 13, stroke: 2 }),
+    "Export data (.csv)"
+  ))), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "# OF STUDENTS",
       value: props.members.filter((a) => !a.isAdmin).length
@@ -1378,10 +1022,30 @@ const Class = (props) => {
       onDelete: props.onDeleteMember,
       onRoleChange: props.onChangeUserRole
     }
-  ))))));
+  )));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$l();
+  const form = useForm({
+    initialValues: {
+      classId: "",
+      userId: "",
+      email: "",
+      givenName: "",
+      familyName: "",
+      avatar: "",
+      role: "",
+      readonly: false,
+      lastActivity: null,
+      hasAccount: false,
+      lessonsCompleted: 0,
+      badgesEarned: 0,
+      href: "",
+      isAdmin: false
+    },
+    validate: {
+      email: (value) => /^\S+@\S+$/.test(value) && props.members.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
+    }
+  });
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -1402,29 +1066,59 @@ const DropzoneButton$1 = (props) => {
       });
     });
   }, []);
-  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement(
     Dropzone,
     {
       loading,
       openRef,
       onDrop,
-      className: classes.dropzone,
-      radius: "md",
       accept: [MIME_TYPES.csv],
       maxSize: 5 * 1024 ** 2
     },
-    /* @__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(
-      IconCloudUpload,
-      {
-        size: 50,
-        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-        stroke: 1.5
-      }
-    ))), /* @__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."))
-  ), /* @__PURE__ */ React.createElement(Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
-    var _a;
-    return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
-  } }, "Select file"));
+    /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React.createElement(Group, { position: "center" }, /* @__PURE__ */ React.createElement(IconCloudUpload, { size: 50, stroke: 1.5 })), /* @__PURE__ */ React.createElement("p", { className: "mt-6 text-center text-lg font-bold text-dark-blue-400" }, "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."))
+  ), /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        var _a;
+        return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
+      },
+      className: "rounded-full bg-dark-blue-400 px-6 py-2.5 text-xs font-bold text-white"
+    },
+    "Select file"
+  )), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    const values = form.values;
+    form.reset();
+    props.close();
+    props.onCreateMembers && props.onCreateMembers([values]);
+  }) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(
+    TextInput,
+    __spreadValues$c({
+      withAsterisk: true,
+      label: "Email",
+      placeholder: "Email"
+    }, form.getInputProps("email"))
+  ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
+    TextInput,
+    __spreadValues$c({
+      label: "Given name",
+      placeholder: "Given name"
+    }, form.getInputProps("givenName"))
+  ), /* @__PURE__ */ React.createElement(
+    TextInput,
+    __spreadValues$c({
+      label: "Family name",
+      placeholder: "Family name"
+    }, form.getInputProps("familyName"))
+  )), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "submit",
+      className: "mt-2 rounded-lg bg-dark-blue-400 px-4 py-2.5 text-xs font-bold text-white"
+    },
+    "Submit"
+  ))));
 };
 
 function Table$b(props) {
@@ -1493,23 +1187,23 @@ function Table$b(props) {
   ));
 }
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-const useStyles$k = createStyles((theme) => ({
+const useStyles$f = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1522,7 +1216,7 @@ const useStyles$k = createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$k();
+  const { classes } = useStyles$f();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1552,14 +1246,14 @@ const Classes = (props) => {
       props.onCreateClass && props.onCreateClass(values);
     }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$a({
+      __spreadValues$b({
         withAsterisk: true,
         label: "Name",
         placeholder: "Class name"
       }, form.getInputProps("name"))
     ), /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$a({
+      __spreadValues$b({
         label: "Description",
         placeholder: "A class for my first period English students"
       }, form.getInputProps("description"))
@@ -1593,7 +1287,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$j = createStyles((theme) => ({
+const useStyles$e = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1607,7 +1301,7 @@ const useStyles$j = createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$j();
+  const { classes } = useStyles$e();
   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));
 };
 
@@ -1745,229 +1439,98 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$i = createStyles((theme, props) => {
-  const from = props.from || "blue";
-  const to = props.to || "green";
-  return {
-    card: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden",
-      transition: "transform 150ms ease, box-shadow 100ms ease",
-      padding: theme.spacing.xl,
-      paddingLeft: theme.spacing.xl * 2,
-      "&:hover": {
-        boxShadow: theme.shadows.md,
-        transform: "scale(1.02)"
-      },
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: 6,
-        backgroundImage: theme.fn.linearGradient(0, theme.colors[from][6], theme.colors[to][6])
-      }
-    }
-  };
-});
+const ACCENT_BORDER = {
+  cyan: "border-l-sky-blue-400",
+  mint: "border-l-mint-400",
+  gold: "border-l-gold-400"
+};
+const ACCENT_GRADIENT = {
+  cyan: "from-sky-blue-400",
+  mint: "from-mint-400",
+  gold: "from-gold-400"
+};
 function CardGradient(props) {
-  const { classes } = useStyles$i(props);
-  const from = props.from || "blue";
-  const to = props.to || "green";
-  const icon = props.icon || /* @__PURE__ */ React.createElement(IconColorSwatch, { size: 28, stroke: 1.5 });
-  return /* @__PURE__ */ React.createElement(Paper, { withBorder: true, radius: "md", className: classes.card, onClick: props.onClick }, /* @__PURE__ */ React.createElement(
-    ThemeIcon,
-    {
-      size: "xl",
-      radius: "md",
-      variant: "gradient",
-      gradient: { deg: 0, from, to }
+  const accent = props.accent || "cyan";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: props.onClick,
+      className: `flex cursor-pointer items-center gap-[18px] rounded-2xl border border-l-4 border-slate-200 bg-white px-[22px] py-[18px] transition-transform hover:scale-[1.02] hover:shadow-md ${ACCENT_BORDER[accent]}`
     },
-    icon
-  ), /* @__PURE__ */ React.createElement(Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React.createElement(Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
+    /* @__PURE__ */ React.createElement("div", { className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-br ${ACCENT_GRADIENT[accent]} to-dark-blue-400 text-white` }, props.icon),
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-[15.5px] font-extrabold text-dark-blue-400" }, props.title), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-xs text-slate-500" }, props.description))
+  );
 }
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+const Home = (props) => {
+  const accessCode = props.organization.accessCode;
+  const onCopyAccessCode = async () => {
+    if (!accessCode)
+      return;
+    try {
+      await navigator.clipboard.writeText(accessCode);
+      showNotification({
+        title: "Copied!",
+        message: "Community code copied to clipboard.",
+        autoClose: 3e3
+      });
+    } catch (err) {
+      console.error("Failed to copy code", err);
     }
-  return a;
-};
-var __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
-        target[prop] = source[prop];
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-[1100px] flex-col gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-[28px] font-extrabold text-dark-blue-400" }, props.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[12.5px] text-slate-400" }, props.impactStatement)), /* @__PURE__ */ React.createElement("div", { className: "flex w-[440px] shrink-0 flex-col justify-between gap-3 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 p-5" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-base font-extrabold text-white" }, props.organization.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-white/70" }, props.organization.description)), accessCode && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-white/70" }, "Community code: ", accessCode), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: onCopyAccessCode,
+      className: "rounded-md bg-white/90 px-2.5 py-1 text-[10.5px] font-bold text-dark-blue-400 hover:bg-white"
+    },
+    "Copy"
+  )))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "Dashboard",
+      description: "Track your students\u2019 pathway progress",
+      accent: "mint",
+      icon: /* @__PURE__ */ React.createElement(IconGauge, { size: 18, stroke: 1.75 }),
+      onClick: props.onDashboardClick
     }
-  return target;
-};
-const useStyles$h = createStyles((theme) => ({
-  card: {
-    height: 240,
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    whiteSpace: "pre-line"
-  },
-  content: {
-    position: "absolute",
-    padding: theme.spacing.xl,
-    zIndex: 1,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    left: 0
-  },
-  title: {
-    color: theme.white,
-    marginBottom: theme.spacing.xs / 2
-  },
-  description: {
-    color: theme.white,
-    maxWidth: 220
-  },
-  code: {
-    color: theme.white,
-    maxWidth: 220
-  }
-}));
-const TenantBanner = (_a) => {
-  var _b = _a, {
-    title,
-    description,
-    image,
-    style,
-    className,
-    code
-  } = _b, others = __objRest$1(_b, [
-    "title",
-    "description",
-    "image",
-    "style",
-    "className",
-    "code"
-  ]);
-  const { classes, cx, theme } = useStyles$h();
-  const handleCopy = async () => {
-    if (!code)
-      return;
-    try {
-      await navigator.clipboard.writeText(code);
-      showNotification({
-        title: "Copied!",
-        message: "Community code copied to clipboard.",
-        autoClose: 3e3
-      });
-    } catch (err) {
-      console.error("Failed to copy code", err);
-    }
-  };
-  return /* @__PURE__ */ React.createElement(
-    Card,
-    __spreadValues$9({
-      radius: "md",
-      style: __spreadValues$9({ backgroundImage: `url(${image})` }, style),
-      className: cx(classes.card, className)
-    }, others),
-    /* @__PURE__ */ React.createElement(
-      Overlay,
-      {
-        gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[6]} 100%)`,
-        opacity: 0.55,
-        zIndex: 0
-      }
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React.createElement(Group, { mt: "sm", spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.code }, "Community Code: ", code || "\u2014"), code && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        size: "xs",
-        variant: "white",
-        onClick: handleCopy,
-        styles: {
-          root: {
-            backgroundColor: "rgba(255,255,255,0.9)"
-          }
-        }
-      },
-      "Copy"
-    )))
-  );
-};
-
-const Home = (props) => {
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "lg" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { md: 6 }, /* @__PURE__ */ React.createElement(
-    UserInfo,
-    {
-      variant: "compact",
-      name: props.name,
-      impactStatement: props.impactStatement
-    }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, { md: 6 }, /* @__PURE__ */ React.createElement(
-    TenantBanner,
-    {
-      title: props.organization.name,
-      description: props.organization.description,
-      image: props.organization.image,
-      code: props.organization.accessCode
-    }
-  ))), /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
-    CardGradient,
-    {
-      title: "Dashboard",
-      description: "Track your students\u2019 pathway progress",
-      onClick: props.onDashboardClick
-    }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
-    CardGradient,
-    {
-      title: "Classes",
-      description: "Create classes, cohorts, or custom subgroups",
-      onClick: props.onClassesClick
-    }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
-    CardGradient,
-    {
-      title: "Pathways",
-      description: "Explore all your unique pathway requirements in one clear space",
-      onClick: props.onPathwaysClick
-    }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
-    CardGradient,
-    {
-      title: "Badges",
-      description: "Key milestones that reflect skill development, micro-credentials, or academic progress",
-      onClick: props.onBadgesClick
-    }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
-    CardGradient,
-    {
-      title: "Lessons",
-      description: "Bite-sized activities and learning experiences accelerating students achievement",
-      onClick: props.onLessonsClick
-    }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
-    CardGradient,
-    {
-      title: "File Locker",
-      description: "A secure space to view student-submitted work and provide feedback",
-      onClick: props.onFileLockerClick
-    }
-  )))));
+  ), /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "Classes",
+      description: "Create classes, cohorts, or custom subgroups",
+      accent: "gold",
+      icon: /* @__PURE__ */ React.createElement(IconCategory2, { size: 18, stroke: 1.75 }),
+      onClick: props.onClassesClick
+    }
+  ), /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "Pathways",
+      description: "Explore all your unique pathway requirements in one clear space",
+      accent: "cyan",
+      icon: /* @__PURE__ */ React.createElement(IconRoute, { size: 18, stroke: 1.75 }),
+      onClick: props.onPathwaysClick
+    }
+  ), /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "Badges",
+      description: "Key milestones that reflect skill development, micro-credentials, or academic progress",
+      accent: "mint",
+      icon: /* @__PURE__ */ React.createElement(IconAlbum, { size: 18, stroke: 1.75 }),
+      onClick: props.onBadgesClick
+    }
+  ), /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "File Locker",
+      description: "A secure space to view student-submitted work and provide feedback",
+      accent: "cyan",
+      icon: /* @__PURE__ */ React.createElement(IconClipboard, { size: 18, stroke: 1.75 }),
+      onClick: props.onFileLockerClick
+    }
+  )));
 };
 
 function Table$7(props) {
@@ -2002,7 +1565,7 @@ function Table$7(props) {
   ));
 }
 
-const useStyles$g = createStyles((theme) => ({
+const useStyles$d = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2017,7 +1580,7 @@ const useStyles$g = createStyles((theme) => ({
   }
 }));
 const SplitButton$3 = (props) => {
-  const { classes, theme } = useStyles$g();
+  const { classes, theme } = useStyles$d();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -2054,28 +1617,28 @@ function Stack$3(props) {
   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)));
 }
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function Table$6(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$6(__spreadValues$8({}, item), {
+    return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
       status: item.isComplete ? 2 : item.isStarted ? 1 : 0
     }));
   }, [props.items]);
@@ -2195,7 +1758,7 @@ function Stack$2(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$f = createStyles((theme) => ({
+const useStyles$c = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2208,7 +1771,7 @@ const useStyles$f = createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$c();
   const [tab, setTab] = useState("question");
   const numberOfStudents = props.students.length;
   const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -2321,68 +1884,38 @@ const Lesson = (props) => {
 };
 
 function Table$5(props) {
+  if (props.loading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
+  }
   if (props.items.length === 0) {
-    return /* @__PURE__ */ React.createElement(
-      PlaceholderBanner,
-      {
-        title: "No lessons to display",
-        description: "We don't have any lessons to show you just yet.",
-        loading: props.loading,
-        icon: "lessons"
-      }
-    );
+    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.");
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
-    UnstyledButton,
+  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(
+    Link,
     {
-      component: Link,
+      key: row.lessonId,
       to: row.href,
-      sx: (theme) => ({
-        display: "block",
-        width: "100%",
-        padding: theme.spacing.md,
-        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-        "&:hover": {
-          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
-        }
-      })
+      className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
     },
-    /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
-  ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+    /* @__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)),
+    /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
+    /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
+  )));
 }
 
-const useStyles$e = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
-    }
-  },
-  description: {
-    maxWidth: 600
-  }
-}));
 const Lessons = (props) => {
-  const { classes } = useStyles$e();
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Bite-sized activities and learning experiences accelerating students achievement"))), /* @__PURE__ */ React.createElement(
-    Autocomplete,
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Lessons"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Bite-sized activities and learning experiences accelerating students achievement")), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(IconSearch, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React.createElement(
+    "input",
     {
+      type: "text",
       placeholder: "Search for a lesson that fits your needs",
-      data: props.lessons.map((item) => item.name),
-      onChange: props.onAutocompleteChange
+      onChange: (e) => props.onAutocompleteChange(e.target.value),
+      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"
     }
-  ), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
-    Table$5,
-    {
-      loading: props.loading,
-      items: props.lessons
-    }
-  ))));
+  )), /* @__PURE__ */ React.createElement(Table$5, { loading: props.loading, items: props.lessons }));
 };
 
-const useStyles$d = createStyles((theme) => ({
+const useStyles$b = createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2401,7 +1934,7 @@ const useStyles$d = createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$d();
+  const { classes } = useStyles$b();
   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(
     Anchor,
     {
@@ -2429,7 +1962,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$c = createStyles((theme) => ({
+const useStyles$a = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2459,7 +1992,7 @@ const useStyles$c = createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$a();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
@@ -2485,7 +2018,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$b = createStyles((theme) => ({
+const useStyles$9 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2500,7 +2033,7 @@ const useStyles$b = createStyles((theme) => ({
   }
 }));
 const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$b();
+  const { classes, theme } = useStyles$9();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   const hasMenu = !!props.withOrganizationLink;
   return /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
@@ -2562,26 +2095,26 @@ function Table$4(props) {
   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)));
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$a = createStyles((theme) => ({
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+const useStyles$8 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2611,7 +2144,7 @@ const useStyles$a = createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$a();
+  const { classes } = useStyles$8();
   const form = useForm({
     initialValues: {
       userId: "",
@@ -2642,27 +2175,27 @@ const People = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$5(__spreadValues$7({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    /* @__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(() => {
       const values = form.values;
       form.reset();
       setOpened(false);
       props.onCreateUsers && props.onCreateUsers([values]);
     }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$7({
+      __spreadValues$9({
         withAsterisk: true,
         label: "Email",
         placeholder: "Email"
       }, form.getInputProps("email"))
     ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$7({
+      __spreadValues$9({
         label: "Given name",
         placeholder: "Given name"
       }, form.getInputProps("givenName"))
     ), /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$7({
+      __spreadValues$9({
         label: "Family name",
         placeholder: "Family name"
       }, form.getInputProps("familyName"))
@@ -2715,7 +2248,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$a();
+  const { classes, theme } = useStyles$8();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -2761,7 +2294,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$9 = createStyles((theme) => ({
+const useStyles$7 = createStyles((theme) => ({
   form: {
     backgroundColor: theme.white,
     padding: theme.spacing.xl,
@@ -2824,7 +2357,7 @@ const useStyles$9 = createStyles((theme) => ({
   }
 }));
 const StartAnonymousLesson = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$7();
   const [name, setName] = React.useState("");
   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(
     TextInput,
@@ -2848,24 +2381,24 @@ const StartAnonymousLesson = (props) => {
   ))))));
 };
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
 const BadgeGrid = (props) => {
-  const badges = props.badges.map((b) => /* @__PURE__ */ React.createElement(TaskCard, __spreadValues$6({ key: b.title }, b)));
+  const badges = props.badges.map((b) => /* @__PURE__ */ React.createElement(TaskCard, __spreadValues$8({ key: b.title }, b)));
   return /* @__PURE__ */ React.createElement(SimpleGrid, { cols: 4, breakpoints: [{ maxWidth: "sm", cols: 1 }, { maxWidth: "md", cols: 3 }] }, badges);
 };
 function TaskCard(props) {
@@ -2881,7 +2414,127 @@ function TaskCard(props) {
   ));
 }
 
-const useStyles$8 = createStyles((theme) => ({
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const useStyles$6 = createStyles((theme) => ({
+  card: {
+    height: 240,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    whiteSpace: "pre-line"
+  },
+  content: {
+    position: "absolute",
+    padding: theme.spacing.xl,
+    zIndex: 1,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0
+  },
+  title: {
+    color: theme.white,
+    marginBottom: theme.spacing.xs / 2
+  },
+  description: {
+    color: theme.white,
+    maxWidth: 220
+  },
+  code: {
+    color: theme.white,
+    maxWidth: 220
+  }
+}));
+const TenantBanner = (_a) => {
+  var _b = _a, {
+    title,
+    description,
+    image,
+    style,
+    className,
+    code
+  } = _b, others = __objRest$1(_b, [
+    "title",
+    "description",
+    "image",
+    "style",
+    "className",
+    "code"
+  ]);
+  const { classes, cx, theme } = useStyles$6();
+  const handleCopy = async () => {
+    if (!code)
+      return;
+    try {
+      await navigator.clipboard.writeText(code);
+      showNotification({
+        title: "Copied!",
+        message: "Community code copied to clipboard.",
+        autoClose: 3e3
+      });
+    } catch (err) {
+      console.error("Failed to copy code", err);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Card,
+    __spreadValues$7({
+      radius: "md",
+      style: __spreadValues$7({ backgroundImage: `url(${image})` }, style),
+      className: cx(classes.card, className)
+    }, others),
+    /* @__PURE__ */ React.createElement(
+      Overlay,
+      {
+        gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[6]} 100%)`,
+        opacity: 0.55,
+        zIndex: 0
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React.createElement(Group, { mt: "sm", spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.code }, "Community Code: ", code || "\u2014"), code && /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        size: "xs",
+        variant: "white",
+        onClick: handleCopy,
+        styles: {
+          root: {
+            backgroundColor: "rgba(255,255,255,0.9)"
+          }
+        }
+      },
+      "Copy"
+    )))
+  );
+};
+
+const useStyles$5 = createStyles((theme) => ({
   action: {
     backgroundColor: "inherit",
     ":hover": {
@@ -2900,7 +2553,7 @@ const useStyles$8 = createStyles((theme) => ({
   }
 }));
 const TrialHome = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$5();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Badge$1, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -2929,38 +2582,38 @@ const TrialHome = (props) => {
   )), /* @__PURE__ */ React.createElement(Title, { maw: 500, mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected, check out these lessons to get started with your students!"), /* @__PURE__ */ React.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
 };
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$7 = createStyles((theme, { checked }) => ({
+const useStyles$4 = createStyles((theme, { checked }) => ({
   button: {
     display: "flex",
     alignItems: "center",
@@ -3002,10 +2655,10 @@ function ImageCheckbox(_a) {
     finalValue: false,
     onChange
   });
-  const { classes, cx } = useStyles$7({ checked: value });
+  const { classes, cx } = useStyles$4({ checked: value });
   return /* @__PURE__ */ React.createElement(
     UnstyledButton,
-    __spreadProps$4(__spreadValues$5({}, others), {
+    __spreadProps$5(__spreadValues$6({}, others), {
       onClick: () => handleChange(!value),
       className: cx(classes.button, className)
     }),
@@ -3026,7 +2679,7 @@ function ImageCheckbox(_a) {
 function SelectGrid(props) {
   const items = props.items.map((item) => /* @__PURE__ */ React.createElement(
     ImageCheckbox,
-    __spreadProps$4(__spreadValues$5({}, item), {
+    __spreadProps$5(__spreadValues$6({}, item), {
       key: item.title,
       onChange: (checked) => props.onChange(item.title, checked)
     })
@@ -3044,26 +2697,26 @@ function SelectGrid(props) {
   );
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$6 = createStyles((theme) => ({
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const useStyles$3 = createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
     boxSizing: "border-box",
@@ -3126,7 +2779,7 @@ const OPTIONS = [
   { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
 ];
 const TrialRegistration = (props) => {
-  const { classes } = useStyles$6();
+  const { classes } = useStyles$3();
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
   const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
@@ -3172,7 +2825,7 @@ const TrialRegistration = (props) => {
       label: "School/Organization Name",
       placeholder: "What's the name of your school?",
       data: props.organizations.map((o) => {
-        return __spreadProps$3(__spreadValues$4({}, o), { value: o.displayName });
+        return __spreadProps$4(__spreadValues$5({}, o), { value: o.displayName });
       }),
       onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
       onChange: (next) => {
@@ -3184,7 +2837,7 @@ const TrialRegistration = (props) => {
     SelectGrid,
     {
       items: OPTIONS,
-      onChange: (e, checked) => setInterests(__spreadProps$3(__spreadValues$4({}, interests), { [e]: checked }))
+      onChange: (e, checked) => setInterests(__spreadProps$4(__spreadValues$5({}, interests), { [e]: checked }))
     }
   ), /* @__PURE__ */ React.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -3222,26 +2875,26 @@ const AdminProvider = (props) => {
   );
 };
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const useStyles$5 = createStyles((theme, props) => ({
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+const useStyles$2 = createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
     paddingBottom: theme.spacing.md,
@@ -3328,7 +2981,7 @@ const useStyles$5 = createStyles((theme, props) => ({
   }
 }));
 const App = (props) => {
-  const { classes } = useStyles$5(props);
+  const { classes } = useStyles$2(props);
   const account = useAccount(props.account, props.accounts, props.onAccountChange);
   return /* @__PURE__ */ React.createElement(
     AppShell,
@@ -3336,7 +2989,7 @@ const App = (props) => {
       padding: "xs",
       navbar: props.navbar && /* @__PURE__ */ React.createElement(
         Navbar,
-        __spreadProps$2(__spreadValues$3({}, props.navbar.props), {
+        __spreadProps$3(__spreadValues$4({}, props.navbar.props), {
           onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
         })
       ),
@@ -3424,61 +3077,29 @@ const useAccount = (account, accounts, onAccountChange) => {
 };
 
 function Table$3(props) {
+  if (props.loading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
+  }
   if (props.items.length === 0) {
-    return /* @__PURE__ */ React.createElement(
-      PlaceholderBanner,
-      {
-        title: "No pathway items to display",
-        description: "We don't have any pathway items to show you just yet.",
-        loading: props.loading,
-        icon: "badges"
-      }
-    );
+    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.");
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
-    UnstyledButton,
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => /* @__PURE__ */ React.createElement(
+    Link,
     {
-      component: Link,
+      key: row.badgeId,
       to: row.href,
-      sx: (theme) => ({
-        display: "block",
-        width: "100%",
-        padding: theme.spacing.md,
-        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-        "&:hover": {
-          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
-        }
-      })
+      className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
     },
-    /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
-  ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+    /* @__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)),
+    /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
+  )));
 }
 
-const useStyles$4 = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
-    }
-  },
-  description: {
-    maxWidth: 600
-  }
-}));
 const Pathways = (props) => {
-  const { classes } = useStyles$4();
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Pathways"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Pathways"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore all your unique pathway requirements in one clear space"))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
-    Table$3,
-    {
-      loading: props.loading,
-      items: props.pathways
-    }
-  ))));
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Pathways"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Explore all your unique pathway requirements in one clear space")), /* @__PURE__ */ React.createElement(Table$3, { loading: props.loading, items: props.pathways }));
 };
 
-const useStyles$3 = createStyles((theme) => ({
+const useStyles$1 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -3493,7 +3114,7 @@ const useStyles$3 = createStyles((theme) => ({
   }
 }));
 const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$3();
+  const { classes, theme } = useStyles$1();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -3529,25 +3150,25 @@ function Stack$1(props) {
   return /* @__PURE__ */ React.createElement(Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
 }
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
 function Table$2(props) {
   const preparedItems = React.useMemo(() => {
-    return (props.items || []).map((item) => __spreadValues$2(__spreadValues$2({}, item), item.categoryPoints));
+    return (props.items || []).map((item) => __spreadValues$3(__spreadValues$3({}, item), item.categoryPoints));
   }, [props.items]);
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
   if (props.loading && props.items.length === 0) {
@@ -3679,7 +3300,7 @@ function Table$1(props) {
   ));
 }
 
-const useStyles$2 = createStyles((theme) => ({
+const useStyles = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -3692,7 +3313,7 @@ const useStyles$2 = createStyles((theme) => ({
   }
 }));
 const Pathway = (props) => {
-  const { classes } = useStyles$2();
+  const { classes } = useStyles();
   const [tab, setTab] = useState("badges");
   const numberOfStudents = props.students.length;
   numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -3759,82 +3380,84 @@ const Pathway = (props) => {
   )))))));
 };
 
-const useStyles$1 = createStyles((theme) => ({
-  button: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    marginLeft: 0,
-    marginRight: 0
-  },
-  menuControl: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    border: 0,
-    borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
-  }
-}));
 const SplitButton = (props) => {
-  const { classes, theme } = useStyles$1();
-  theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
-  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
-    Button,
+  return /* @__PURE__ */ React.createElement(
+    "button",
     {
-      leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
-      onClick: props.onExportDataClick
+      onClick: props.onExportDataClick,
+      className: "flex items-center gap-2 rounded-xl bg-gradient-to-r from-gold-400 to-[#f5c300] px-4 py-2.5 text-xs font-extrabold text-dark-blue-400"
     },
+    /* @__PURE__ */ React.createElement(IconTableExport, { size: 14, stroke: 2 }),
     "Export data (.csv)"
-  ));
+  );
 };
 
 function Stack(props) {
-  const { items, hideBadge, hideLesson } = props;
+  const { items, hideBadge, hideLesson, hidePathway } = props;
   if (!items.length)
     return null;
-  const visibleColumns = [
-    true,
-    !hideBadge,
-    !hideLesson,
-    true
-  ].filter(Boolean).length;
-  const span = 12 / visibleColumns;
-  return /* @__PURE__ */ React.createElement(Grid, { gutter: "md", sx: { padding: 20, minWidth: 700 } }, /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, { weight: "bold" }, "Link")), !hideBadge && /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, { weight: "bold" }, "Badge")), !hideLesson && /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, { weight: "bold" }, "Lesson")), /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, { weight: "bold" }, "Question")), items.map((row, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      component: "a",
-      href: row.link,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      size: "xs",
-      variant: "light"
-    },
-    "View File"
-  )), !hideBadge && /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, null, row.badgeName)), !hideLesson && /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, null, row.lessonName)), /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, null, row.question)))));
+  const columns = [
+    "minmax(0,2fr)",
+    !hidePathway && "minmax(0,1.3fr)",
+    !hideLesson && "minmax(0,1.3fr)",
+    !hideBadge && "minmax(0,1.3fr)",
+    "auto"
+  ].filter(Boolean).join(" ");
+  const headerCell = "border-b border-slate-100 pb-2 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400";
+  const dataCell = "py-3";
+  return /* @__PURE__ */ React.createElement("div", { className: "grid items-center gap-x-3", style: { gridTemplateColumns: columns } }, /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Question"), !hidePathway && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Pathway"), !hideLesson && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Lesson"), !hideBadge && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Badge"), /* @__PURE__ */ React.createElement("div", { className: headerCell }), items.map((row, i) => {
+    const rowBorder = i > 0 ? "border-t border-slate-100" : "";
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} text-xs font-semibold text-dark-blue-400` }, row.question), !hidePathway && /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.pathwayName || "\u2014"), !hideLesson && /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.lessonName), !hideBadge && /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.badgeName), /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} flex shrink-0 gap-2` }, /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: row.link,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-bold text-slate-600 no-underline hover:bg-slate-50"
+      },
+      /* @__PURE__ */ React.createElement(IconExternalLink, { size: 12, stroke: 2 }),
+      "Preview"
+    ), /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: row.link,
+        download: true,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-bold text-slate-600 no-underline hover:bg-slate-50"
+      },
+      /* @__PURE__ */ React.createElement(IconDownload, { size: 12, stroke: 2 }),
+      "Download"
+    )));
+  }));
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const initials$1 = (name) => name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
 function Table(props) {
+  const [expanded, setExpanded] = React.useState({});
   const preparedItems = React.useMemo(() => {
     return props.items.map((item) => {
       var _a;
-      return __spreadProps$1(__spreadValues$1({}, item), {
+      return __spreadProps$2(__spreadValues$2({}, item), {
         submissionCount: ((_a = item.submissions) == null ? void 0 : _a.length) || 0
       });
     });
@@ -3851,76 +3474,82 @@ function Table(props) {
       }
     );
   }
-  const sortStatus = {
-    columnAccessor: sortConfig.key,
-    direction: sortConfig.direction === "desc" ? "desc" : "asc"
-  };
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
-    DataTable,
+  const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
+  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("submissionCount"), className: "w-16 shrink-0 text-left hover:text-slate-600" }, "Files", indicator("submissionCount")), props.onReview && /* @__PURE__ */ React.createElement("div", { className: "w-36 shrink-0" }), /* @__PURE__ */ React.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
+    const isOpen = !!expanded[row.userId];
+    return /* @__PURE__ */ React.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        onClick: () => setExpanded(__spreadProps$2(__spreadValues$2({}, expanded), { [row.userId]: !isOpen })),
+        className: "flex cursor-pointer items-center gap-4 p-4"
+      },
+      /* @__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-gradient-to-br from-mint-400 to-dark-blue-400 text-xs font-bold text-white" }, initials$1(row.name)), /* @__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))),
+      /* @__PURE__ */ React.createElement("div", { className: "w-16 shrink-0 text-sm font-bold text-dark-blue-400" }, row.submissions.length),
+      props.onReview && /* @__PURE__ */ React.createElement("div", { className: "w-36 shrink-0" }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            props.onReview(row);
+          },
+          className: "rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-3 py-1.5 text-[11px] font-extrabold text-dark-blue-400"
+        },
+        "Review Submission"
+      )),
+      /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: `w-4 shrink-0 text-slate-300 transition-transform ${isOpen ? "rotate-90" : ""}` })
+    ), isOpen && /* @__PURE__ */ React.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React.createElement(Stack, { items: row.submissions, hideBadge: props.hideBadge, hideLesson: props.hideLesson, hidePathway: props.hidePathway })));
+  }));
+}
+
+const initials = (name) => name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+function SubmissionDetail(props) {
+  const { student } = props;
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-4 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: props.onBack, className: "font-bold text-sky-blue-400 hover:underline" }, "File Locker"), /* @__PURE__ */ React.createElement("span", null, "/"), /* @__PURE__ */ React.createElement("span", { className: "font-bold text-dark-blue-400" }, student.name)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, student.avatar ? /* @__PURE__ */ React.createElement("img", { src: student.avatar, className: "h-12 w-12 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React.createElement("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-sm font-bold text-white" }, initials(student.name)), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold text-dark-blue-400" }, student.name), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-xs text-slate-400" }, student.email, props.context ? ` \xB7 ${props.context}` : "")), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500" }, student.submissions.length, " file", student.submissions.length === 1 ? "" : "s")), /* @__PURE__ */ React.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, "Files"), /* @__PURE__ */ React.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React.createElement(Stack, { items: student.submissions }))), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(
+    "button",
     {
-      verticalSpacing: "sm",
-      sx: { minWidth: 700 },
-      withBorder: false,
-      borderRadius: "sm",
-      withColumnBorders: true,
-      striped: true,
-      highlightOnHover: true,
-      records: sortedItems,
-      sortStatus,
-      onSortStatusChange: (status) => requestSort(status.columnAccessor),
-      idAccessor: "userId",
-      columns: [{
-        accessor: "name",
-        title: "Student Name",
-        sortable: true,
-        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)))
-      }, {
-        accessor: "submissionCount",
-        title: "Files",
-        sortable: true,
-        render: (row) => row.submissions.length
-      }],
-      rowExpansion: {
-        content: ({ record }) => /* @__PURE__ */ React.createElement(
-          Stack,
-          {
-            items: record.submissions,
-            hideBadge: props.hideBadge,
-            hideLesson: props.hideLesson
-          }
-        )
-      }
-    }
-  ));
+      onClick: () => props.onNav(-1),
+      className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-50"
+    },
+    /* @__PURE__ */ React.createElement(IconChevronLeft, { size: 14, stroke: 2 }),
+    "Previous Submission"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => props.onNav(1),
+      className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-50"
+    },
+    "Next Submission",
+    /* @__PURE__ */ React.createElement(IconChevronRight, { size: 14, stroke: 2 })
+  )));
 }
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const useFilteredStudents = (students) => {
   return React.useMemo(() => {
-    const byBadge = (badgeId) => students.map((s) => __spreadProps(__spreadValues({}, s), {
+    const byBadge = (badgeId) => students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
       submissions: (s.submissions || []).filter(
         (sub) => sub.badgeId === badgeId
       )
     })).filter((s) => s.submissions.length);
-    const byLesson = (lessonName) => students.map((s) => __spreadProps(__spreadValues({}, s), {
+    const byLesson = (lessonName) => students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
       submissions: (s.submissions || []).filter(
         (sub) => sub.lessonName === lessonName
       )
@@ -3931,7 +3560,7 @@ const useFilteredStudents = (students) => {
           (c) => c.startsWith(pathwayId)
         )
       ).map((b) => b.badgeId);
-      return students.map((s) => __spreadProps(__spreadValues({}, s), {
+      return students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
         submissions: (s.submissions || []).filter(
           (sub) => validBadgeIds.includes(sub.badgeId)
         )
@@ -3941,168 +3570,167 @@ const useFilteredStudents = (students) => {
   }, [students]);
 };
 
-const useStyles = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-  },
-  description: {
-    maxWidth: 600
-  }
-}));
-const BadgeTable = ({ badges, students, loading }) => {
-  const { byBadge } = useFilteredStudents(students);
-  const countFiles = (students2) => students2.reduce((acc, s) => {
-    var _a;
-    return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
-  }, 0);
-  return /* @__PURE__ */ React.createElement(Accordion, null, badges.map((b) => {
-    const studentsForBadge = byBadge(b.badgeId);
-    const fileCount = countFiles(studentsForBadge);
-    return /* @__PURE__ */ React.createElement(Accordion.Item, { key: b.badgeId, value: b.badgeId }, /* @__PURE__ */ React.createElement(Accordion.Control, null, /* @__PURE__ */ React.createElement(Group, { position: "apart", w: "100%" }, /* @__PURE__ */ React.createElement(Text, null, b.displayName), /* @__PURE__ */ React.createElement(Badge$1, { size: "sm" }, fileCount))), /* @__PURE__ */ React.createElement(Accordion.Panel, null, /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        loading,
-        items: studentsForBadge,
-        hideBadge: true
-      }
-    )));
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const TABS = [
+  { value: "students", label: "By student" },
+  { value: "pathways", label: "By pathway" },
+  { value: "badges", label: "By badge" },
+  { value: "lessons", label: "By lesson" }
+];
+const countFiles = (students) => students.reduce((acc, s) => {
+  var _a;
+  return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
+}, 0);
+const GroupCard = (props) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement("div", { onClick: () => setOpen(!open), className: "flex cursor-pointer items-center gap-3.5 p-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, props.title), props.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, props.description)), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-mint-100 px-2.5 py-1 text-xs font-bold text-dark-blue-400" }, props.count), /* @__PURE__ */ React.createElement(IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${open ? "rotate-180" : ""}` })), open && /* @__PURE__ */ React.createElement("div", { className: "border-t border-slate-100 p-4" }, props.children));
+};
+const PathwayGroups = (props) => {
+  const { byPathway } = useFilteredStudents(props.students);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.pathways.map((p) => {
+    const filtered = byPathway(p.pathwayId, props.badges);
+    return /* @__PURE__ */ React.createElement(GroupCard, { key: p.pathwayId, title: p.title, description: p.description, count: countFiles(filtered) }, /* @__PURE__ */ React.createElement(Table, { loading: props.loading, items: filtered, hidePathway: true, onReview: (item) => props.onReview(item, filtered, p.title) }));
   }));
 };
-const LessonTableWrapper = ({ lessons, students, loading }) => {
-  const { byLesson } = useFilteredStudents(students);
-  const countFiles = (students2) => students2.reduce((acc, s) => {
-    var _a;
-    return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
-  }, 0);
-  return /* @__PURE__ */ React.createElement(Accordion, null, lessons.map((l) => {
-    const studentsForLesson = byLesson(l.lessonName);
-    const fileCount = countFiles(studentsForLesson);
-    return /* @__PURE__ */ React.createElement(Accordion.Item, { key: l.lessonId, value: l.lessonId }, /* @__PURE__ */ React.createElement(Accordion.Control, null, /* @__PURE__ */ React.createElement(Group, { position: "apart", w: "100%" }, /* @__PURE__ */ React.createElement(Text, null, l.lessonName), /* @__PURE__ */ React.createElement(Badge$1, { size: "sm" }, fileCount))), /* @__PURE__ */ React.createElement(Accordion.Panel, null, /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        loading,
-        items: studentsForLesson,
-        hideLesson: true
-      }
-    )));
+const BadgeGroups = (props) => {
+  const { byBadge } = useFilteredStudents(props.students);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.badges.map((b) => {
+    const filtered = byBadge(b.badgeId);
+    const pathwayTitle = props.pathwayNameForBadge[b.badgeId];
+    return /* @__PURE__ */ React.createElement(GroupCard, { key: b.badgeId, title: b.displayName, description: pathwayTitle ? `${pathwayTitle} pathway` : void 0, count: countFiles(filtered) }, /* @__PURE__ */ React.createElement(Table, { loading: props.loading, items: filtered, hideBadge: true, hidePathway: true, onReview: (item) => props.onReview(item, filtered, b.displayName) }));
   }));
 };
-const PathwayTable = ({
-  pathways,
-  badges,
-  students,
-  loading
-}) => {
-  const { byPathway } = useFilteredStudents(students);
-  const countFiles = (students2) => students2.reduce((acc, s) => {
-    var _a;
-    return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
-  }, 0);
-  return /* @__PURE__ */ React.createElement(Accordion, null, pathways.map((p) => {
-    const studentsForPathway = byPathway(p.pathwayId, badges);
-    const fileCount = countFiles(studentsForPathway);
-    return /* @__PURE__ */ React.createElement(Accordion.Item, { key: p.pathwayId, value: p.pathwayId }, /* @__PURE__ */ React.createElement(Accordion.Control, null, /* @__PURE__ */ React.createElement(Group, { position: "apart", w: "100%" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("strong", null, p.title), /* @__PURE__ */ React.createElement("div", null, p.description)), /* @__PURE__ */ React.createElement(Badge$1, { size: "sm" }, fileCount))), /* @__PURE__ */ React.createElement(Accordion.Panel, null, /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        loading,
-        items: studentsForPathway
-      }
-    )));
+const LessonGroups = (props) => {
+  const { byLesson } = useFilteredStudents(props.students);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.lessons.map((l) => {
+    const filtered = byLesson(l.lessonName);
+    const badge = props.badgeForLesson[l.lessonId];
+    const pathwayTitle = badge ? props.pathwayNameForBadge[badge.badgeId] : void 0;
+    const description = badge ? pathwayTitle ? `${badge.displayName} \xB7 ${pathwayTitle} pathway` : badge.displayName : void 0;
+    return /* @__PURE__ */ React.createElement(GroupCard, { key: l.lessonId, title: l.lessonName, description, count: countFiles(filtered) }, /* @__PURE__ */ React.createElement(Table, { loading: props.loading, items: filtered, hideBadge: true, hideLesson: true, hidePathway: true, onReview: (item) => props.onReview(item, filtered, l.lessonName) }));
   }));
 };
 const FileLocker = (props) => {
-  const { classes } = useStyles();
-  const [tab, setTab] = useState("students");
-  props.students.length;
-  const numberOfFiles = props.students.reduce(
-    (acc, s) => {
-      var _a;
-      return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
-    },
-    0
-  );
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
-    Badge$1,
-    {
-      variant: "filled",
-      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
-      size: "lg"
-    },
-    "Back"
-  )), /* @__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 || "File"), /* @__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(
-    SplitButton,
-    {
-      href: props.href,
-      onCopyLinkClick: props.onCopyLinkClick,
-      onExportDataClick: props.onExportDataClick
-    }
-  ))))), /* @__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: [
-    {
-      title: props.trial ? "LESSONS SUBMITTED" : "FILES",
-      value: props.trial ? props.lessonsCompleted || 0 : numberOfFiles,
-      unit: props.trial ? "" : ""
-    }
-  ] }), !props.trial && /* @__PURE__ */ React.createElement(
-    Select,
+  const [tab, setTab] = React.useState("students");
+  const [reviewing, setReviewing] = React.useState(null);
+  const numberOfFiles = countFiles(props.students);
+  const { thisWeek, thisMonth } = React.useMemo(() => {
+    const now = new Date();
+    const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1e3);
+    const fom = new Date(now.getFullYear(), now.getMonth(), 1);
+    let week = 0, month = 0;
+    props.students.forEach((s) => {
+      (s.submissions || []).forEach((sub) => {
+        if (!sub.updatedAt)
+          return;
+        const d = new Date(sub.updatedAt);
+        if (d >= weekAgo)
+          week += 1;
+        if (d >= fom)
+          month += 1;
+      });
+    });
+    return { thisWeek: week, thisMonth: month };
+  }, [props.students]);
+  const pathwayNameForBadge = React.useMemo(() => {
+    const map = {};
+    (props.badges || []).forEach((b) => {
+      if (!Array.isArray(b.categories))
+        return;
+      const pathway = (props.pathways || []).find((p) => b.categories.some((c) => c.startsWith(p.pathwayId)));
+      if (pathway)
+        map[b.badgeId] = pathway.title;
+    });
+    return map;
+  }, [props.badges, props.pathways]);
+  const badgeForLesson = React.useMemo(() => {
+    const map = {};
+    (props.badges || []).forEach((b) => {
+      if (!Array.isArray(b.lessonIds))
+        return;
+      b.lessonIds.forEach((lessonId) => {
+        if (!(lessonId in map))
+          map[lessonId] = { displayName: b.displayName, badgeId: b.badgeId };
+      });
+    });
+    return map;
+  }, [props.badges]);
+  const enrichedStudents = React.useMemo(() => {
+    return props.students.map((s) => __spreadProps(__spreadValues({}, s), {
+      submissions: (s.submissions || []).map((sub) => __spreadProps(__spreadValues({}, sub), { pathwayName: pathwayNameForBadge[sub.badgeId] || "" }))
+    }));
+  }, [props.students, pathwayNameForBadge]);
+  const { byPathway } = useFilteredStudents(enrichedStudents);
+  const mostActivePathway = React.useMemo(() => {
+    return (props.pathways || []).reduce((best, p) => {
+      const count = countFiles(byPathway(p.pathwayId, props.badges || []));
+      return count > 0 && (!best || count > best.count) ? { title: p.title, count } : best;
+    }, null);
+  }, [props.pathways, props.badges, byPathway]);
+  const onReview = (item, list, context) => setReviewing({ student: item, list, context });
+  const onNav = (dir) => {
+    if (!reviewing)
+      return;
+    const idx = reviewing.list.findIndex((s) => s.userId === reviewing.student.userId);
+    if (idx === -1)
+      return;
+    const next = reviewing.list[(idx + dir + reviewing.list.length) % reviewing.list.length];
+    setReviewing(__spreadProps(__spreadValues({}, reviewing), { student: next }));
+  };
+  if (reviewing) {
+    return /* @__PURE__ */ React.createElement(
+      SubmissionDetail,
+      {
+        student: reviewing.student,
+        context: reviewing.context,
+        onBack: () => setReviewing(null),
+        onNav
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { onClick: props.onBackClick, className: "flex items-center gap-1 text-xs font-bold text-sky-blue-400 hover:underline" }, /* @__PURE__ */ React.createElement(IconChevronLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "mt-1.5 text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "File Locker"), /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-sm text-slate-500" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(SplitButton, { href: props.href, onCopyLinkClick: props.onCopyLinkClick, onExportDataClick: props.onExportDataClick })), /* @__PURE__ */ React.createElement(StatsGroup, { data: props.trial ? [
+    { title: "LESSONS SUBMITTED", value: props.lessonsCompleted || 0 }
+  ] : [
+    { title: "FILES", value: numberOfFiles },
+    { title: "THIS WEEK", value: thisWeek },
+    { title: "THIS MONTH", value: thisMonth }
+  ] }), !props.trial && mostActivePathway && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-slate-500" }, "Most active pathway: ", /* @__PURE__ */ React.createElement("span", { className: "font-bold text-dark-blue-400" }, mostActivePathway.title), " (", mostActivePathway.count, " submission", mostActivePathway.count === 1 ? "" : "s", ")"), !props.trial && /* @__PURE__ */ React.createElement(
+    "select",
     {
-      clearable: true,
-      clearButtonLabel: "Clear class selection",
-      size: "sm",
-      placeholder: "Select a class",
-      nothingFound: "No options",
       value: props.classId,
-      onChange: props.onClassChange,
-      icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
-      data: props.classes.map((g) => {
-        return { value: g.classId, label: g.name };
-      })
-    }
-  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
-    Tabs,
-    {
-      value: tab,
-      data: [
-        { label: "By student", value: "students" },
-        { label: "By pathway", value: "pathways" },
-        { label: "By badge", value: "badges" },
-        { label: "By lesson", value: "lessons" }
-      ],
-      onChange: setTab
-    }
-  ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
-    Table,
-    {
-      loading: props.loading,
-      items: props.students
-    }
-  ), tab === "pathways" && /* @__PURE__ */ React.createElement(
-    PathwayTable,
-    {
-      pathways: props.pathways || [],
-      badges: props.badges || [],
-      students: props.students,
-      loading: props.loading
-    }
-  ), tab === "badges" && /* @__PURE__ */ React.createElement(
-    BadgeTable,
-    {
-      badges: props.badges || [],
-      students: props.students,
-      loading: props.loading
-    }
-  ), tab === "lessons" && /* @__PURE__ */ React.createElement(
-    LessonTableWrapper,
+      onChange: (e) => props.onClassChange(e.target.value),
+      className: "w-64 rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-dark-blue-400 focus:border-sky-blue-400 focus:outline-none"
+    },
+    /* @__PURE__ */ React.createElement("option", { value: "" }, "Select a class"),
+    props.classes.map((g) => /* @__PURE__ */ React.createElement("option", { key: g.classId, value: g.classId }, g.name))
+  ), !props.trial && /* @__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(
+    "button",
     {
-      lessons: props.lessons,
-      students: props.students,
-      loading: props.loading
-    }
-  )))))));
+      key: t.value,
+      onClick: () => setTab(t.value),
+      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"}`
+    },
+    t.label
+  ))), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(Table, { loading: props.loading, items: enrichedStudents, onReview: (item) => onReview(item, enrichedStudents) }), !props.trial && tab === "pathways" && /* @__PURE__ */ React.createElement(PathwayGroups, { students: enrichedStudents, loading: props.loading, pathways: props.pathways || [], badges: props.badges || [], onReview }), !props.trial && tab === "badges" && /* @__PURE__ */ React.createElement(BadgeGroups, { students: enrichedStudents, loading: props.loading, badges: props.badges || [], pathwayNameForBadge, onReview }), !props.trial && tab === "lessons" && /* @__PURE__ */ React.createElement(LessonGroups, { students: enrichedStudents, loading: props.loading, lessons: props.lessons, badgeForLesson, pathwayNameForBadge, onReview }));
 };
 
-export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, FileLocker, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, Pathway, PathwayTable, Pathways, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, FileLocker, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, Pathway, Pathways, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
 //# sourceMappingURL=index.mjs.map