@local-civics/mgmt-ui 0.1.50 → 0.1.52

package/dist/index.js

@@ -1 +1,1742 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@mantine/notifications"),require("react/jsx-runtime"),require("@tabler/icons"),require("react"),require("@mantine/core"),require("@mantine/dropzone"),require("@mantine/form"),require("papaparse"),require("@mantine/modals"),require("react-charts")):"function"==typeof define&&define.amd?define(["exports","@mantine/notifications","react/jsx-runtime","@tabler/icons","react","@mantine/core","@mantine/dropzone","@mantine/form","papaparse","@mantine/modals","react-charts"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).components={},e.MantineNotifications,e.ReactJSXRuntime,e.TablerIcons,e.React,e.MantineCore,e.MantineDropzone,e.MantineForm,e.Papaparse,e.MantineModals,e.ReactCharts)}(this,(function(e,n,t,i,s,r,o,l,a,c,d){"use strict";function h(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var u=h(s),m=h(a),x=function(){return x=Object.assign||function(e){for(var n,t=1,i=arguments.length;t<i;t++)for(var s in n=arguments[t])Object.prototype.hasOwnProperty.call(n,s)&&(e[s]=n[s]);return e},x.apply(this,arguments)};var g=r.createStyles((function(e){var n,t;return{root:(n={display:"flex",backgroundImage:"linear-gradient(-60deg, ".concat(e.colors[e.primaryColor][4]," 0%, ").concat(e.colors[e.primaryColor][7]," 100%)"),padding:1.5*e.spacing.xl,borderRadius:e.radius.md},n[e.fn.smallerThan("sm")]={flexDirection:"column"},n),title:{color:e.white,textTransform:"uppercase",fontWeight:700,fontSize:e.fontSizes.sm},count:{color:e.white,fontSize:32,lineHeight:1,fontWeight:700,marginBottom:e.spacing.md,fontFamily:"Greycliff CF, ".concat(e.fontFamily)},description:{color:e.colors[e.primaryColor][0],fontSize:e.fontSizes.sm,marginTop:5},stat:{flex:1,"& + &":(t={paddingLeft:e.spacing.xl,marginLeft:e.spacing.xl,borderLeft:"1px solid ".concat(e.colors[e.primaryColor][3])},t[e.fn.smallerThan("sm")]={paddingLeft:0,marginLeft:0,borderLeft:0,paddingTop:e.spacing.xl,marginTop:e.spacing.xl,borderTop:"1px solid ".concat(e.colors[e.primaryColor][3])},t)}}})),p=function(e){var n=e.data,i=g().classes,s=n.map((function(e){var n="%"===e.unit?Math.round(100*(e.value+Number.EPSILON)):e.value;return t.jsxs("div",x({className:i.stat},{children:[t.jsxs(r.Text,x({className:i.count},{children:[n.toLocaleString(),e.unit]})),t.jsx(r.Text,x({className:i.title},{children:e.title}))]}),e.title)}));return t.jsx("div",x({className:i.root},{children:s}))},j=function(e){var n,i=null===(n=e.data)||void 0===n?void 0:n.map((function(e){return t.jsx(r.Tabs.Tab,x({value:e.value},{children:e.label||e.value}),e.value)}));return t.jsx(r.Tabs,x({value:e.value,onTabChange:e.onChange},{children:t.jsx(r.Tabs.List,{children:i})}))},f=r.createStyles((function(e){var n,t,i;return{wrapper:(n={display:"flex",alignItems:"center",padding:2*e.spacing.xl,borderRadius:e.radius.md,backgroundColor:"dark"===e.colorScheme?e.colors.dark[8]:e.white,border:"1px solid ".concat("dark"===e.colorScheme?e.colors.dark[8]:e.colors.gray[3])},n["@media (max-width: ".concat(e.breakpoints.sm,"px)")]={flexDirection:"column-reverse",padding:e.spacing.xl},n),image:(t={maxWidth:"40%"},t["@media (max-width: ".concat(e.breakpoints.sm,"px)")]={maxWidth:"100%"},t),body:(i={paddingRight:4*e.spacing.xl},i["@media (max-width: ".concat(e.breakpoints.sm,"px)")]={paddingRight:0,marginTop:e.spacing.xl},i),title:{color:"dark"===e.colorScheme?e.white:e.black,fontFamily:"Greycliff CF, ".concat(e.fontFamily),lineHeight:1,marginBottom:e.spacing.md},controls:{display:"flex",marginTop:e.spacing.xl},inputWrapper:{width:"100%",flex:"1"},input:{borderTopRightRadius:0,borderBottomRightRadius:0,borderRight:0},control:{borderTopLeftRadius:0,borderBottomLeftRadius:0}}})),v=function(e){var n=f().classes,i=e.title||"Nothing to display",s=e.description||"We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";return t.jsxs("div",x({className:n.wrapper},{children:[t.jsxs("div",x({className:n.body},{children:[t.jsx(r.Title,x({className:n.title},{children:e.loading?"Loading...":i})),t.jsx(r.Text,x({size:"sm",color:"dimmed"},{children:e.loading?"Hold on, we're loading your data.":s}))]})),t.jsx(r.Image,{src:"https://cdn.localcivics.io/illustrations/".concat(e.icon,".svg"),className:n.image})]}))};function b(e){if(0===e.items.length)return t.jsx(v,{title:"No badges to display",description:"There has not been any badge progress just yet.",loading:e.loading,icon:"badges"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick&&e.onClick(n)}},{children:t.jsxs(r.Group,x({spacing:"sm"},{children:[t.jsx(r.Avatar,{size:40,src:n.avatar,radius:40}),t.jsxs("div",{children:[t.jsx(r.Text,x({size:"sm",weight:500},{children:n.name})),t.jsx(r.Text,x({size:"xs",color:"dimmed"},{children:n.email}))]})]}))}))}),t.jsxs("td",{children:[!!n.isComplete&&t.jsx(r.Badge,x({variant:"filled"},{children:"Complete"})),!n.isComplete&&t.jsx(r.Badge,x({color:"red",variant:"filled"},{children:"Incomplete"}))]})]},n.name)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Student Name"}),t.jsx("th",{children:"Badge Status"})]})}),t.jsx("tbody",{children:n})]}))}))}function y(e){if(0===e.items.length)return t.jsx(v,{title:"No lessons to display",description:"There are not lessons in badge.",loading:e.loading,icon:"badges"});var n=e.items.map((function(n){var i=Math.round(100*(n.percentageCompletion+Number.EPSILON));return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick&&e.onClick(n)}},{children:n.lessonName}))}),t.jsxs("td",{children:[i,"%"]})]},n.lessonName)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Lesson Name"}),t.jsx("th",{children:"Lesson Completion"})]})}),t.jsx("tbody",{children:n})]}))}))}var C=r.createStyles((function(e){var n;return{title:(n={fontSize:34,fontWeight:900},n[e.fn.smallerThan("sm")]={fontSize:24},n),description:{maxWidth:600}}}));function S(e){if(0===e.items.length)return t.jsx(v,{title:"No badges to display",description:"We don't have any badges to show you just yet.",loading:e.loading,icon:"badges"});var n=e.items.map((function(n){return t.jsx("tr",{children:t.jsx("td",{children:t.jsx(r.UnstyledButton,x({sx:function(e){return{display:"block",width:"100%",padding:e.spacing.md,color:"dark"===e.colorScheme?e.colors.dark[0]:e.black,"&:hover":{backgroundColor:"dark"===e.colorScheme?e.colors.dark[8]:e.colors.gray[1]}}},onClick:function(){return e.onClick&&e.onClick(n)}},{children:t.jsx(r.Group,{children:t.jsxs("div",{children:[t.jsx(r.Text,x({size:"sm",weight:500},{children:n.name})),t.jsx(r.Text,x({size:"xs",color:"dimmed"},{children:n.description}))]})})}))})},n.badgeId)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsx(r.Table,x({horizontalSpacing:0,verticalSpacing:0,sx:{minWidth:700}},{children:t.jsx("tbody",{children:n})}))}))}var k=r.createStyles((function(e){var n;return{title:(n={fontSize:34,fontWeight:900},n[e.fn.smallerThan("sm")]={fontSize:24},n),description:{maxWidth:600}}}));function N(e){if(0===e.items.length)return t.jsx(v,{title:"No students to display",description:"You don't have any students yet, add them and revisit.",loading:e.loading,icon:"groups"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onViewProfile(n)}},{children:n.studentName}))}),t.jsx("td",{children:n.className})]},n.studentName)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Student Name"}),t.jsx("th",{children:"Class Name"})]})}),t.jsx("tbody",{children:n})]}))}))}var T=[{unit:"year",ms:31536e6},{unit:"month",ms:2628e6},{unit:"day",ms:864e5},{unit:"hour",ms:36e5},{unit:"minute",ms:6e4},{unit:"second",ms:1e3}],z=new Intl.RelativeTimeFormat("en",{numeric:"auto"});function w(e,n){return void 0===n&&(n=new Date),e?function(e){for(var n=0,t=T;n<t.length;n++){var i=t[n],s=i.unit,r=i.ms;if(Math.abs(e)>=r||"second"===s)return z.format(Math.round(e/r),s)}return""}(e.getTime()-n.getTime()):""}function I(e){if(0===e.items.length)return t.jsx(v,{title:"No reflections to display",description:"There has not been any lesson progress just yet.",loading:e.loading,icon:"lessons"});var n=e.items.map((function(e){return t.jsxs("tr",{children:[t.jsx("td",{children:e.studentName}),t.jsx("td",{children:e.lessonName}),t.jsx("td",{children:e.reflection}),t.jsx("td",{children:w(new Date(e.updatedAt))})]},e.studentName+e.lessonName)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Student Name"}),t.jsx("th",{children:"Lesson Name"}),t.jsx("th",{children:"Reflection"}),t.jsx("th",{children:"Updated At"})]})}),t.jsx("tbody",{children:n})]}))}))}function A(e){if(0===e.items.length)return t.jsx(v,{title:"No impact statements to display",description:"There are no students with impact statements yet.",loading:e.loading,icon:"kindergarten"});var n=e.items.map((function(e){return t.jsxs("tr",{children:[t.jsx("td",{children:e.studentName}),t.jsx("td",{children:e.impactStatement})]},e.studentName)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Student Name"}),t.jsx("th",{children:"Impact Statement"})]})}),t.jsx("tbody",{children:n})]}))}))}function B(e){if(0===e.items.length)return t.jsx(v,{title:"No badges to display",description:"We don't have any badges to show you just yet.",loading:e.loading,icon:"badges"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick&&e.onClick(n)}},{children:n.name}))}),t.jsx("td",{children:n.description}),t.jsxs("td",{children:[Math.round(100*(n.percentageCompletion+Number.EPSILON)),"%"]})]},n.badgeId)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Badge Name"}),t.jsx("th",{children:"Description"}),t.jsx("th",{children:"Completion"})]})}),t.jsx("tbody",{children:n})]}))}))}function O(e){if(0===e.items.length)return t.jsx(v,{title:"No lessons to display",description:"We don't have any lessons to show you just yet.",loading:e.loading,icon:"lessons"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick&&e.onClick(n)}},{children:n.name}))}),t.jsx("td",{children:n.description}),t.jsxs("td",{children:[Math.round(100*(n.percentageCompletion+Number.EPSILON)),"%"]})]},n.lessonId)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Lesson Name"}),t.jsx("th",{children:"Description"}),t.jsx("th",{children:"Completion"})]})}),t.jsx("tbody",{children:n})]}))}))}function L(e){if(0===e.items.length)return t.jsx(v,{title:"No students to display",description:"You have not rostered any students yet.",loading:e.loading,icon:"groups"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onViewProfile&&e.onViewProfile(n)}},{children:t.jsxs(r.Group,x({spacing:"sm"},{children:[t.jsx(r.Avatar,{size:40,src:n.avatar,radius:40}),t.jsxs("div",{children:[t.jsx(r.Text,x({size:"sm",weight:500},{children:n.givenName&&n.familyName?"".concat(n.givenName," ").concat(n.familyName):n.email})),t.jsx(r.Text,x({size:"xs",color:"dimmed"},{children:n.email}))]})]}))}))}),t.jsx("td",{children:n.badgesEarned}),t.jsx("td",{children:n.lessonsCompleted}),t.jsx("td",{children:n.hasAccount&&t.jsx(i.IconCheck,{color:"green"})}),t.jsx("td",{children:n.lastActivity?w(n.lastActivity):""}),t.jsx("td",{children:t.jsx(r.Group,x({noWrap:!0,spacing:0,position:"right"},{children:!n.readonly&&!!e.onDelete&&t.jsx(r.ActionIcon,x({color:"red"},{children:t.jsx(i.IconTrash,{onClick:function(){return i=n,c.openConfirmModal({title:'Delete "'.concat(i.givenName&&i.familyName?"".concat(i.givenName," ").concat(i.familyName):i.email,'"?'),centered:!0,children:t.jsx(r.Text,x({size:"sm"},{children:"Are you sure you want to delete this person? This action is destructive and you will have to contact support to restore your data."})),labels:{confirm:"Delete",cancel:"No don't delete them"},confirmProps:{color:"red"},onConfirm:function(){return e.onDelete&&e.onDelete(i)}});var i},size:16,stroke:1.5})}))}))})]},n.email)}));return t.jsx(r.ScrollArea,{children:t.jsxs(r.Table,x({verticalSpacing:20,sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Student Name"}),t.jsx("th",{children:"Badges Earned"}),t.jsx("th",{children:"Lessons Completed"}),t.jsx("th",{children:"Account Created?"}),t.jsx("th",{children:"Last Active"}),t.jsx("th",{})]})}),t.jsx("tbody",{children:n})]}))})}var P=r.createStyles((function(e){var n;return{title:(n={fontSize:34,fontWeight:900},n[e.fn.smallerThan("sm")]={fontSize:24},n),description:{maxWidth:600},wrapper:{position:"relative",marginBottom:30},dropzone:{borderWidth:1,paddingBottom:50},icon:{color:"dark"===e.colorScheme?e.colors.dark[3]:e.colors.gray[4]},control:{position:"absolute",width:250,left:"calc(50% - 125px)",bottom:-20}}})),D=function(e){var n=P(),s=n.classes,l=n.theme,a=u.useRef(null),c=u.useState(!1),d=c[0],h=c[1],g=u.useCallback((function(n){h(!0),n.forEach((function(n){m.parse(n,{download:!0,header:!0,dynamicTyping:!0,skipEmptyLines:!0,worker:!0,complete:function(n){var t=n.data.filter((function(n){return/^\S+@\S+$/.test(n.email)&&0===e.students.filter((function(e){return e.email===n.email})).length}));t.length>0&&e.onCreateStudents&&e.onCreateStudents(t),h(!1),e.close()}})}))}),[]);return t.jsxs("div",x({className:s.wrapper},{children:[t.jsx(o.Dropzone,x({loading:d,openRef:a,onDrop:g,className:s.dropzone,radius:"md",accept:[o.MIME_TYPES.csv],maxSize:5*Math.pow(1024,2)},{children:t.jsxs("div",x({style:{pointerEvents:"none"}},{children:[t.jsxs(r.Group,x({position:"center"},{children:[t.jsx(o.Dropzone.Accept,{children:t.jsx(i.IconDownload,{size:50,color:l.colors[l.primaryColor][6],stroke:1.5})}),t.jsx(o.Dropzone.Reject,{children:t.jsx(i.IconX,{size:50,color:l.colors.red[6],stroke:1.5})}),t.jsx(o.Dropzone.Idle,{children:t.jsx(i.IconCloudUpload,{size:50,color:"dark"===l.colorScheme?l.colors.dark[0]:l.black,stroke:1.5})})]})),t.jsxs(r.Text,x({align:"center",weight:700,size:"lg",mt:"xl"},{children:[t.jsx(o.Dropzone.Accept,{children:"Drop files here"}),t.jsx(o.Dropzone.Reject,{children:"Csv file less than 5mb"}),t.jsx(o.Dropzone.Idle,{children:"Upload multiple"})]})),t.jsxs(r.Text,x({align:"center",size:"sm",mt:"xs",color:"dimmed"},{children:["Drag'n'drop files here to upload. We can accept only ",t.jsx("i",{children:".csv"})," files that are less than 5mb in size."]}))]}))})),t.jsx(r.Button,x({className:s.control,size:"md",radius:"xl",onClick:function(){var e;return null===(e=a.current)||void 0===e?void 0:e.call(a)}},{children:"Select file"}))]}))};function W(e){if(0===e.items.length)return t.jsx(v,{title:"No classes to display",description:"You don't have any classes yet. Try creating one first...",loading:e.loading,icon:"groups"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick(n)}},{children:t.jsx(r.Text,x({size:14},{children:n.name}))}))}),t.jsx("td",{children:t.jsx(r.Text,x({size:14},{children:n.description}))}),t.jsx("td",{children:t.jsx(r.Group,x({noWrap:!0,spacing:0,position:"right"},{children:t.jsx(r.ActionIcon,x({color:"red"},{children:t.jsx(i.IconTrash,{onClick:function(){return i=n,c.openConfirmModal({title:'Delete "'.concat(i.name,'"?'),centered:!0,children:t.jsx(r.Text,x({size:"sm"},{children:"Are you sure you want to delete this class? This action is destructive and you will have to contact support to restore your data."})),labels:{confirm:"Delete class",cancel:"No don't delete it"},confirmProps:{color:"red"},onConfirm:function(){return e.onDeleteClass(i)}});var i},size:16,stroke:1.5})}))}))})]},n.classId)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:300},{children:t.jsxs(r.Table,x({verticalSpacing:20,sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Class Name"}),t.jsx("th",{children:"Description"}),t.jsx("th",{})]})}),t.jsx("tbody",{children:n})]}))}))}var G=r.createStyles((function(e){var n;return{title:(n={fontSize:34,fontWeight:900},n[e.fn.smallerThan("sm")]={fontSize:24},n),description:{maxWidth:600}}})),E=r.createStyles((function(e){var n;return{title:(n={fontSize:34,fontWeight:900,marginTop:16},n[e.fn.smallerThan("sm")]={fontSize:24},n),description:{maxWidth:600}}})),M=function(e){var n=E().classes;return t.jsxs(t.Fragment,{children:[t.jsx(r.Title,x({className:n.title},{children:e.name})),t.jsx(r.Text,x({color:"dimmed",className:n.description,mt:"xs"},{children:e.impactStatement}))]})};function H(e){if(0===e.items.length)return t.jsx(v,{title:"No badges to display",description:"There has not been any badge progress just yet.",loading:e.loading,icon:"badges"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick(n)}},{children:n.badgeName}))}),t.jsxs("td",{children:[!!n.isComplete&&t.jsx(r.Badge,x({variant:"filled"},{children:"Complete"})),!n.isComplete&&t.jsx(r.Badge,x({color:"red",variant:"filled"},{children:"Incomplete"}))]})]},n.badgeName)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Badge Name"}),t.jsx("th",{children:"Status"})]})}),t.jsx("tbody",{children:n})]}))}))}function R(e){if(0===e.items.length)return t.jsx(v,{title:"No answers to display",description:"There has not been any lesson progress just yet.",loading:e.loading,icon:"lessons"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick(n)}},{children:n.lessonName}))}),t.jsx("td",{children:n.questionName}),t.jsx("td",{children:n.answer.join(",")})]},n.questionName)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Lesson Name"}),t.jsx("th",{children:"Question"}),t.jsx("th",{children:"Answer"})]})}),t.jsx("tbody",{children:n})]}))}))}function F(e){if(0===e.items.length)return t.jsx(v,{title:"No reflections to display",description:"There has not been any lesson progress just yet.",loading:e.loading,icon:"lessons"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick(n)}},{children:n.lessonName}))}),t.jsx("td",{children:n.reflection}),t.jsx("td",{children:n.rating.toLocaleString()})]},n.lessonName)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Lesson Name"}),t.jsx("th",{children:"Reflection"}),t.jsx("th",{children:"Rating"})]})}),t.jsx("tbody",{children:n})]}))}))}var q=r.createStyles((function(e,n){var t=n.from||"blue",i=n.to||"green";return{card:{position:"relative",cursor:"pointer",overflow:"hidden",transition:"transform 150ms ease, box-shadow 100ms ease",padding:e.spacing.xl,paddingLeft:2*e.spacing.xl,"&:hover":{boxShadow:e.shadows.md,transform:"scale(1.02)"},"&::before":{content:'""',position:"absolute",top:0,bottom:0,left:0,width:6,backgroundImage:e.fn.linearGradient(0,e.colors[t][6],e.colors[i][6])}}}}));function U(e){var n=q(e).classes,s=e.from||"blue",o=e.to||"green",l=e.icon||t.jsx(i.IconColorSwatch,{size:28,stroke:1.5});return t.jsxs(r.Paper,x({withBorder:!0,radius:"md",className:n.card,onClick:e.onClick},{children:[t.jsx(r.ThemeIcon,x({size:"xl",radius:"md",variant:"gradient",gradient:{deg:0,from:s,to:o}},{children:l})),t.jsx(r.Text,x({size:"xl",weight:500,mt:"md"},{children:e.title})),t.jsx(r.Text,x({size:"sm",mt:"sm",color:"dimmed"},{children:e.description}))]}))}var V=r.createStyles((function(e){return{card:{height:240,backgroundSize:"cover",backgroundPosition:"center"},content:{position:"absolute",padding:e.spacing.xl,zIndex:1,top:0,bottom:0,right:0,left:0},action:{position:"absolute",bottom:e.spacing.xl,right:e.spacing.xl},title:{color:e.white,marginBottom:e.spacing.xs/2},description:{color:e.white,maxWidth:220}}})),_=function(e){var n=e.title,i=e.description,s=e.image,o=e.action,l=e.style,a=e.className,c=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(i=Object.getOwnPropertySymbols(e);s<i.length;s++)n.indexOf(i[s])<0&&Object.prototype.propertyIsEnumerable.call(e,i[s])&&(t[i[s]]=e[i[s]])}return t}(e,["title","description","image","action","style","className"]),d=V(),h=d.classes,u=d.cx,m=d.theme;return t.jsxs(r.Card,x({radius:"md",style:x({backgroundImage:"url(".concat(s,")")},l),className:u(h.card,a)},c,{children:[t.jsx(r.Overlay,{gradient:"linear-gradient(105deg, ".concat(m.black," 20%, #312f2f 50%, ").concat(m.colors.gray[4]," 100%)"),opacity:.55,zIndex:0}),t.jsxs("div",x({className:h.content},{children:[t.jsx(r.Text,x({size:"lg",weight:700,className:h.title},{children:n})),t.jsx(r.Text,x({size:"sm",className:h.description},{children:i})),t.jsx(r.Button,x({className:h.action,variant:"white",color:"dark",component:"a",size:"xs",href:o.link,target:"_blank"},{children:o.label}))]}))]}))};function Y(e){if(0===e.items.length)return t.jsx(v,{title:"No reflections to display",description:"There has not been any lesson progress just yet.",loading:e.loading,icon:"lessons"});var n=e.items.map((function(e){return t.jsxs("tr",{children:[t.jsx("td",{children:e.studentName}),t.jsx("td",{children:e.reflection}),t.jsx("td",{children:e.rating.toLocaleString()})]},e.studentName)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Student Name"}),t.jsx("th",{children:"Reflection"}),t.jsx("th",{children:"Rating"})]})}),t.jsx("tbody",{children:n})]}))}))}function J(e){if(0===e.items.length)return t.jsx(v,{title:"No students to display",description:"You don't have any student data yet for this lesson",loading:e.loading,icon:"lessons"});var n=e.items.map((function(n){return t.jsxs("tr",{children:[t.jsx("td",{children:t.jsx(r.UnstyledButton,x({onClick:function(){return e.onClick&&e.onClick(n)}},{children:t.jsxs(r.Group,x({spacing:"sm"},{children:[t.jsx(r.Avatar,{size:40,src:n.avatar,radius:40}),t.jsxs("div",{children:[t.jsx(r.Text,x({size:"sm",weight:500},{children:n.name})),t.jsx(r.Text,x({size:"xs",color:"dimmed"},{children:n.email}))]})]}))}))}),t.jsxs("td",{children:[!!n.isComplete&&t.jsx(r.Badge,x({variant:"filled"},{children:"Complete"})),!n.isComplete&&!n.isStarted&&t.jsx(r.Badge,x({color:"red",variant:"filled"},{children:"Not started"})),!n.isComplete&&!!n.isStarted&&t.jsx(r.Badge,x({color:"violet",variant:"filled"},{children:"In progress"}))]})]},n.name)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsxs(r.Table,x({verticalSpacing:"sm",sx:{minWidth:700},highlightOnHover:!0,striped:!0},{children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Lesson Name"}),t.jsx("th",{children:"Status"})]})}),t.jsx("tbody",{children:n})]}))}))}function X(e){var n=u.useMemo((function(){return{position:"left",getValue:function(e){return e.primary}}}),[]),i=u.useMemo((function(){return[{position:"bottom",getValue:function(e){return e.secondary}}]}),[]);if(0===e.items.length)return t.jsx(v,{title:"No questions to display",description:"There are no questions in this lesson.",loading:e.loading,icon:"lessons"});var s=e.items.map((function(e){if(e.chart){var s={},o=e.choices||[];return o.forEach((function(e){s[e]=0})),e.answers.forEach((function(e){return e.forEach((function(e){e in s&&(s[e]=s[e]?s[e]+1:1)}))})),t.jsx(r.Card,x({withBorder:!0,p:"xl",radius:"md"},{children:t.jsxs(r.Stack,x({spacing:4},{children:[t.jsx(r.Title,x({size:"lg"},{children:e.question})),t.jsxs(r.Text,x({size:"sm"},{children:[e.answers.length," answers"]})),t.jsx("div",x({style:{background:"white",height:"300px",width:"100%",position:"relative"}},{children:t.jsx(d.Chart,{options:{data:[{label:"",data:o.map((function(e){return{primary:$(e,50),secondary:s[e]}}))}],primaryAxis:n,secondaryAxes:i}})}))]}))}),e.question)}return t.jsx(r.Card,x({withBorder:!0,p:"xl",radius:"md"},{children:t.jsxs(r.Stack,x({spacing:4},{children:[t.jsx(r.Title,x({size:"lg"},{children:e.question})),t.jsxs(r.Text,x({size:"sm"},{children:[e.answers.length," answers"]})),t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsx(r.Stack,x({spacing:4},{children:e.answers.map((function(e){var n=e.join("\n");return t.jsx(r.Card,x({p:5,radius:0,bg:"gray.0"},{children:t.jsx(r.Text,{children:n})}),n)}))}))}))]}))}),e.question)}));return t.jsx(r.Stack,x({py:4,spacing:10,sx:{minWidth:700}},{children:s}))}var $=function(e,n){return e.substr(0,n-1)+(e.length>n?"&hellip;":"")},Q=r.createStyles((function(e){var n;return{title:(n={fontSize:34,fontWeight:900},n[e.fn.smallerThan("sm")]={fontSize:24},n),description:{maxWidth:600}}}));function K(e){if(0===e.items.length)return t.jsx(v,{title:"No lessons to display",description:"We don't have any lessons to show you just yet.",loading:e.loading,icon:"lessons"});var n=e.items.map((function(n){return t.jsx("tr",{children:t.jsx("td",{children:t.jsx(r.UnstyledButton,x({sx:function(e){return{display:"block",width:"100%",padding:e.spacing.md,color:"dark"===e.colorScheme?e.colors.dark[0]:e.black,"&:hover":{backgroundColor:"dark"===e.colorScheme?e.colors.dark[8]:e.colors.gray[1]}}},onClick:function(){return e.onClick&&e.onClick(n)}},{children:t.jsx(r.Group,{children:t.jsxs("div",{children:[t.jsx(r.Text,x({size:"sm",weight:500},{children:n.name})),t.jsx(r.Text,x({size:"xs",color:"dimmed"},{children:n.description}))]})})}))})},n.lessonId)}));return t.jsx(r.ScrollArea.Autosize,x({maxHeight:500},{children:t.jsx(r.Table,x({horizontalSpacing:0,verticalSpacing:0,sx:{minWidth:700}},{children:t.jsx("tbody",{children:n})}))}))}var Z=r.createStyles((function(e){var n;return{title:(n={fontSize:34,fontWeight:900},n[e.fn.smallerThan("sm")]={fontSize:24},n),description:{maxWidth:600}}})),ee=r.createEmotionCache({key:"mantine",prepend:!1}),ne=function(e){var n=l.useForm({initialValues:{active:e.account}});return t.jsx(r.Modal,x({centered:!0,opened:e.opened,onClose:function(){return e.onClose&&e.onClose()},size:"sm",title:t.jsx(r.Title,x({size:"h5"},{children:"Accounts"}))},{children:t.jsxs("form",x({onSubmit:n.onSubmit((function(){e.onChange&&e.onChange(n.values.active)}))},{children:[t.jsx(r.Select,x({required:!0,placeholder:"Select an account",defaultValue:e.account,data:e.accounts.map((function(e){return{value:e.accountId,label:e.name}}))},n.getInputProps("active"))),t.jsx(r.Button,x({type:"submit",fullWidth:!0,mt:"xl"},{children:"Switch"}))]}))}))},te=r.createStyles((function(e){return{link:{width:50,height:50,borderRadius:e.radius.md,display:"flex",alignItems:"center",justifyContent:"center",color:"dark"===e.colorScheme?e.colors.dark[0]:e.colors.gray[7],"&:hover":{backgroundColor:"dark"===e.colorScheme?e.colors.dark[5]:e.colors.gray[0]}},active:{"&, &:hover":{backgroundColor:e.fn.variant({variant:"light",color:e.primaryColor}).background,color:e.fn.variant({variant:"light",color:e.primaryColor}).color}}}})),ie=[{icon:i.IconHome2,label:"Home",href:"/home"},{icon:i.IconGauge,label:"Dashboard",href:"/dashboard"},{icon:i.IconCategory2,label:"Classes",href:"/classes"},{icon:i.IconAlbum,label:"Badges",href:"/badges"},{icon:i.IconLambda,label:"Lessons",href:"/lessons"}],se=function(e){var n,i=e.icon,s=e.label,o=e.active,l=e.onClick,a=te(),c=a.classes,d=a.cx;return t.jsx(r.Tooltip,x({label:s,position:"right",transitionDuration:0},{children:t.jsx(r.UnstyledButton,x({onClick:l,className:d(c.link,(n={},n[c.active]=o,n))},{children:t.jsx(i,{stroke:1.5})}))}))},re=function(e){var n=ie.map((function(n){return t.jsx(se,{label:n.label,icon:n.icon,active:n.label===e.active,onClick:function(){return e.navigate(n.href)}},n.label)}));return t.jsxs(r.Navbar,x({width:{base:80},p:"md"},{children:[t.jsx(r.Center,{children:t.jsx(r.Avatar,x({color:"blue",radius:"sm"},{children:t.jsx("div",x({style:{width:15,marginLeft:"auto",marginRight:"auto"}},{children:t.jsx(r.Image,{fit:"contain",src:"https://cdn.localcivics.io/brand/l.png"})}))}))}),t.jsx(r.Navbar.Section,x({grow:!0,mt:50},{children:t.jsx(r.Stack,x({justify:"center",spacing:0},{children:n}))})),t.jsx(r.Navbar.Section,{children:t.jsxs(r.Stack,x({justify:"center",spacing:0},{children:[t.jsx(se,{icon:i.IconSwitchHorizontal,label:"Switch accounts",onClick:e.onSwitchAccounts}),t.jsx(se,{icon:i.IconLogout,label:"Logout",onClick:e.onLogout})]}))})]}))},oe=r.createStyles((function(e){var n,t,i,s,r,o;return{footer:{paddingTop:2*e.spacing.xl,paddingBottom:2*e.spacing.xl,paddingLeft:3*e.spacing.xl,backgroundColor:"dark"===e.colorScheme?e.colors.dark[6]:e.colors.gray[0],borderTop:"1px solid ".concat("dark"===e.colorScheme?e.colors.dark[5]:e.colors.gray[2])},logo:(n={maxWidth:200},n[e.fn.smallerThan("sm")]={display:"flex",flexDirection:"column",alignItems:"center"},n),description:(t={marginTop:5},t[e.fn.smallerThan("sm")]={marginTop:e.spacing.xs,textAlign:"center"},t),inner:(i={display:"flex",justifyContent:"space-between"},i[e.fn.smallerThan("sm")]={flexDirection:"column",alignItems:"center"},i),groups:(s={display:"flex",flexWrap:"wrap"},s[e.fn.smallerThan("sm")]={display:"none"},s),wrapper:{width:160},link:{display:"block",color:"dark"===e.colorScheme?e.colors.dark[1]:e.colors.gray[6],fontSize:e.fontSizes.sm,paddingTop:3,paddingBottom:3,"&:hover":{textDecoration:"underline"}},title:{fontSize:e.fontSizes.md,fontWeight:700,fontFamily:"Greycliff CF, ".concat(e.fontFamily),marginBottom:e.spacing.xs/2,color:"dark"===e.colorScheme?e.white:e.black},afterFooter:(r={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:e.spacing.xl,paddingTop:e.spacing.xl,paddingBottom:e.spacing.xl,borderTop:"1px solid ".concat("dark"===e.colorScheme?e.colors.dark[4]:e.colors.gray[2])},r[e.fn.smallerThan("sm")]={flexDirection:"column"},r),social:(o={},o[e.fn.smallerThan("sm")]={marginTop:e.spacing.xs},o)}})),le=function(e,n,t){var i=JSON.stringify(n),r=s.useState(!1),o=r[0],l=r[1],a=s.useState(e),c=a[0],d=a[1];return u.useEffect((function(){d(e)}),[e,i]),{opened:o,account:c,accounts:n,setChangeModalOpen:l,onAccountChange:function(e){d(e),l(!1),t(e)}}};Object.defineProperty(e,"showNotification",{enumerable:!0,get:function(){return n.showNotification}}),Object.defineProperty(e,"updateNotification",{enumerable:!0,get:function(){return n.updateNotification}}),e.AdminProvider=function(e){return t.jsx(r.MantineProvider,x({withNormalizeCSS:!0,withGlobalStyles:!0,emotionCache:ee,theme:{loader:"bars"}},{children:t.jsx(n.NotificationsProvider,x({limit:e.notificationLimit||5},{children:t.jsx(c.ModalsProvider,{children:e.children})}))}))},e.App=function(e){var n=oe().classes,s=le(e.account,e.accounts,e.onAccountChange);return t.jsxs(r.AppShell,x({padding:"xs",navbar:t.jsx(re,{active:e.navbar.props.active,navigate:e.navbar.props.navigate,onLogout:e.navbar.props.onLogout,onSwitchAccounts:function(){return s.setChangeModalOpen(!0)}}),footer:t.jsx(t.Fragment,{children:!s.opened&&t.jsxs("footer",x({className:n.footer},{children:[t.jsxs(r.Container,x({className:n.inner},{children:[t.jsxs("div",x({className:n.logo},{children:[t.jsxs(r.Group,x({spacing:"xs"},{children:[t.jsx("div",x({style:{width:15}},{children:t.jsx(r.Image,{fit:"contain",src:"https://cdn.localcivics.io/brand/l.png"})})),t.jsx(r.Title,x({color:"dimmed",size:"h5"},{children:"Local Civics"}))]})),t.jsx(r.Text,x({size:"xs",color:"dimmed",className:n.description},{children:"We connect students to powerful civic learning experiences."}))]})),t.jsx("div",x({className:n.groups},{children:t.jsxs("div",x({className:n.wrapper},{children:[t.jsx(r.Text,x({className:n.link,component:"a",href:"https://www.localcivics.io",target:"_blank"},{children:"About"})),t.jsx(r.Text,x({className:n.link,component:"a",href:"https://www.localcivics.io/terms-of-service",target:"_blank"},{children:"Terms"})),t.jsx(r.Text,x({className:n.link,component:"a",href:"https://www.localcivics.io/privacy-policy",target:"_blank"},{children:"Privacy"})),t.jsx(r.Text,x({className:n.link,component:"a",href:"https://localcivics.notion.site/Help-Center-b52300f587b64fc0a61f512686e7626d",target:"_blank"},{children:"Help Center"}))]}))}))]})),t.jsxs(r.Container,x({className:n.afterFooter},{children:[t.jsxs(r.Text,x({color:"dimmed",size:"sm"},{children:["© ",(new Date).getFullYear()," Local Civics. All rights reserved."]})),t.jsxs(r.Group,x({spacing:0,className:n.social,position:"right",noWrap:!0},{children:[t.jsx(r.ActionIcon,x({component:"a",target:"_blank",href:"https://www.instagram.com/localcivics/",size:"lg"},{children:t.jsx(i.IconBrandInstagram,{size:18,stroke:1.5})})),t.jsx(r.ActionIcon,x({component:"a",target:"_blank",href:"https://www.linkedin.com/company/localcivics",size:"lg"},{children:t.jsx(i.IconBrandLinkedin,{size:18,stroke:1.5})})),t.jsx(r.ActionIcon,x({component:"a",target:"_blank",href:"https://www.facebook.com/localcivics/",size:"lg"},{children:t.jsx(i.IconBrandFacebook,{size:18,stroke:1.5})}))]}))]}))]}))}),styles:function(e){return{main:{backgroundColor:"dark"===e.colorScheme?e.colors.dark[8]:e.colors.gray[0]}}}},{children:[t.jsxs("div",x({style:{position:"relative"}},{children:[(e.loading||s.opened)&&t.jsx(r.Center,x({style:{height:400}},{children:t.jsx(r.Loader,{})})),!e.loading&&!s.opened&&e.page]})),t.jsx(ne,{opened:s.opened,account:s.account,accounts:s.accounts,onChange:s.onAccountChange,onClose:function(){return s.setChangeModalOpen(!1)}})]}))},e.Badge=function(e){var n=C().classes,o=s.useState("lessons"),l=o[0],a=o[1],c=e.students.length,d=c>0?e.students.filter((function(e){return e.isComplete})).length/c:0;return t.jsx(r.Container,x({size:"lg",py:"xl"},{children:t.jsxs(r.Stack,x({spacing:"md"},{children:[t.jsx(r.Grid,{children:t.jsxs(r.Grid.Col,x({sm:"auto"},{children:[t.jsx(r.Badge,x({variant:"filled",leftSection:t.jsx(r.ActionIcon,x({onClick:e.onBackClick,color:"blue",size:"xs",radius:"xl",variant:"filled"},{children:t.jsx(i.IconArrowLeft,{size:14})})),size:"lg"},{children:"Badges"})),t.jsxs(r.Group,{children:[t.jsxs(r.Stack,x({spacing:0},{children:[t.jsx(r.Title,x({order:2,className:n.title,mt:"md"},{children:e.displayName||"Badge"})),t.jsx(r.Text,x({color:"dimmed",className:n.description,mt:"sm"},{children:e.description||"No description"}))]})),t.jsx(r.Stack,x({ml:"auto"},{children:t.jsx(r.Button,x({variant:"gradient",onClick:e.onPreviewClick},{children:"Preview"}))}))]})]}))}),t.jsx("div",{children:t.jsxs("div",x({style:{position:"relative"}},{children:[t.jsx(r.LoadingOverlay,{visible:e.loading,overlayBlur:2}),t.jsxs(r.Stack,{children:[t.jsx(p,{data:[{title:"BADGE COMPLETION",value:d,unit:"%"}]}),t.jsx(r.Select,{clearable:!0,clearButtonLabel:"Clear class selection",size:"sm",placeholder:"Select a class",nothingFound:"No options",value:e.classId,onChange:e.onClassChange,icon:t.jsx(i.IconCategory2,{}),data:e.classes.map((function(e){return{value:e.classId,label:e.name}}))}),t.jsxs(r.Stack,x({spacing:0},{children:[t.jsx(j,{value:l,data:[{label:"By lesson",value:"lessons"},{label:"By student",value:"students"}],onChange:a}),"lessons"===l&&t.jsx(y,{loading:e.loading,items:e.lessons,onClick:e.onLessonClick}),"students"===l&&t.jsx(b,{loading:e.loading,items:e.students,onClick:e.onUserClick})]}))]})]}))})]}))}))},e.Badges=function(e){var n=k().classes;return t.jsx(r.Container,x({size:"lg",py:"xl"},{children:t.jsxs(r.Stack,x({spacing:"md"},{children:[t.jsx(r.Grid,{children:t.jsxs(r.Grid.Col,x({sm:"auto"},{children:[t.jsx(r.Badge,x({variant:"filled",size:"lg"},{children:"Badges"})),t.jsx(r.Title,x({order:2,className:n.title,mt:"md"},{children:"Badges and micro-credentials"})),t.jsx(r.Text,x({color:"dimmed",className:n.description,mt:"sm"},{children:"Project-sized skills acquisition and standards alignment."}))]}))}),t.jsx(r.Autocomplete,{placeholder:"Search for a badge that fits your needs",data:e.badges.map((function(e){return e.name})),onChange:e.onAutocompleteChange}),t.jsxs("div",x({style:{position:"relative"}},{children:[t.jsx(r.LoadingOverlay,{visible:e.loading,overlayBlur:2}),t.jsx(S,{loading:e.loading,items:e.badges,onClick:e.onBadgeClick})]}))]}))}))},e.Class=function(e){var n=P().classes,o=l.useForm({initialValues:{classId:"",studentId:"",email:"",givenName:"",familyName:"",avatar:"",role:"",readonly:!1,lastActivity:null,hasAccount:!1,lessonsCompleted:0,badgesEarned:0},validate:{email:function(n){return/^\S+@\S+$/.test(n)&&0===e.students.filter((function(e){return e.email===n})).length?null:"Invalid email"}}}),a=s.useState(!1),c=a[0],d=a[1];return t.jsxs(t.Fragment,{children:[t.jsx(r.Drawer,x({opened:c,onClose:function(){return d(!1)},title:t.jsx(r.Title,x({size:"h5"},{children:"Add students"})),padding:"xl",size:"xl"},{children:t.jsxs(r.Stack,x({spacing:"md"},{children:[t.jsx(D,x({},e,{close:function(){return d(!1)}})),t.jsx(r.Divider,{label:"or",labelPosition:"center",my:"md",variant:"dashed"}),t.jsx("form",x({onSubmit:o.onSubmit((function(){var n=o.values;o.reset(),d(!1),e.onCreateStudents&&e.onCreateStudents([n])}))},{children:t.jsxs(r.Stack,{children:[t.jsx(r.TextInput,x({withAsterisk:!0,label:"Email",placeholder:"Email"},o.getInputProps("email"))),t.jsxs(r.Group,x({grow:!0},{children:[t.jsx(r.TextInput,x({label:"Given name",placeholder:"Given name"},o.getInputProps("givenName"))),t.jsx(r.TextInput,x({label:"Family name",placeholder:"Family name"},o.getInputProps("familyName")))]})),t.jsx(r.Button,x({type:"submit",fullWidth:!0,mt:"md"},{children:"Submit"}))]})}))]}))})),t.jsx(r.Container,x({size:"lg",py:"xl"},{children:t.jsxs(r.Stack,x({spacing:"md"},{children:[t.jsxs(r.Grid,{children:[t.jsxs(r.Grid.Col,x({sm:"auto"},{children:[t.jsx(r.Badge,x({variant:"filled",leftSection:t.jsx(r.ActionIcon,x({onClick:e.onBackClick,color:"blue",size:"xs",radius:"xl",variant:"filled"},{children:t.jsx(i.IconArrowLeft,{size:14})})),size:"lg"},{children:"Classes"})),t.jsx(r.Title,x({order:2,className:n.title,mt:"md"},{children:e.displayName||"Class"})),t.jsx(r.Text,x({color:"dimmed",className:n.description,mt:"sm"},{children:e.description||"No description"}))]})),t.jsx(r.Grid.Col,x({sm:"content"},{children:!e.loading&&t.jsx(r.Button,x({onClick:function(){return d(!0)},leftIcon:t.jsx(i.IconPlaylistAdd,{size:14})},{children:"Add students"}))}))]}),t.jsxs("div",x({style:{position:"relative"}},{children:[t.jsx(r.LoadingOverlay,{visible:e.loading,overlayBlur:2}),t.jsxs(r.Stack,x({spacing:"sm"},{children:[t.jsx(p,{data:[{title:"# OF STUDENTS",value:e.students.length},{title:"ACCOUNT CREATION",value:e.percentageOfAccountsCreated,unit:"%"},{title:"BADGE COMPLETION",value:e.percentageOfBadgesEarned,unit:"%"},{title:"LESSON COMPLETION",value:e.percentageOfLessonsCompleted,unit:"%"}]}),t.jsx(L,{loading:e.loading,items:e.students,onDelete:e.onDeleteStudent,onViewProfile:function(n){return e.onStudentClick(n)}})]}))]}))]}))}))]})},e.Classes=function(e){var n=G().classes,o=l.useForm({initialValues:{classId:"",name:"",description:""},validate:{name:function(e){return e.length<=6?"Name should include at least 6 characters":null}}}),a=s.useState(!1),c=a[0],d=a[1];return t.jsxs(t.Fragment,{children:[t.jsx(r.Drawer,x({opened:c,onClose:function(){return d(!1)},title:t.jsxs(r.Group,x({spacing:0},{children:[t.jsx(r.Title,x({size:"h5"},{children:"Create a class"})),t.jsx(r.Tooltip,x({label:"Classes settings cannot be modified once created"},{children:t.jsx(r.ActionIcon,{children:t.jsx(i.IconInfoCircle,{color:"#3b82f6",size:14})})}))]})),padding:"xl",size:"xl"},{children:t.jsxs("form",x({onSubmit:o.onSubmit((function(){var n=o.values;o.reset(),d(!1),e.onCreateClass&&e.onCreateClass(n)}))},{children:[t.jsxs(r.Stack,{children:[t.jsx(r.TextInput,x({withAsterisk:!0,label:"Name",placeholder:"Class name"},o.getInputProps("name"))),t.jsx(r.TextInput,x({label:"Description",placeholder:"A class for my first period English students"},o.getInputProps("description")))]}),t.jsx(r.Button,x({type:"submit",fullWidth:!0,mt:"md"},{children:"Submit"}))]}))})),t.jsx(r.Container,x({size:"lg",py:"xl"},{children:t.jsxs(r.Stack,x({spacing:"md"},{children:[t.jsxs(r.Grid,{children:[t.jsxs(r.Grid.Col,x({sm:"auto"},{children:[t.jsx(r.Badge,x({variant:"filled",size:"lg"},{children:"Classes"})),t.jsx(r.Title,x({order:2,className:n.title,mt:"md"},{children:"Organize students into classes"})),t.jsx(r.Text,x({color:"dimmed",className:n.description,mt:"sm"},{children:"A class can be for a specific period of time, grade, team, or other cohorts."}))]})),t.jsx(r.Grid.Col,x({sm:"content"},{children:!e.loading&&t.jsx(r.Button,x({onClick:function(){return d(!0)},leftIcon:t.jsx(i.IconPlaylistAdd,{size:14})},{children:"Create class"}))}))]}),t.jsxs("div",x({style:{position:"relative"}},{children:[t.jsx(r.LoadingOverlay,{visible:e.loading,overlayBlur:2}),t.jsxs(r.Stack,x({spacing:"sm"},{children:[t.jsx(p,{data:[{title:"# OF CLASSES",value:e.classes.length}]}),t.jsx(W,{loading:e.loading,items:e.classes,onDeleteClass:e.onDeleteClass,onClick:e.onClassClick})]}))]}))]}))}))]})},e.Dashboard=function(e){var n=s.useState("students"),o=n[0],l=n[1];return t.jsx(r.Container,x({size:"lg",py:"xl"},{children:t.jsxs(r.Stack,{children:[t.jsxs(r.Stack,x({spacing:0},{children:[t.jsx(r.Title,x({size:"h3"},{children:"Dashboard"})),t.jsx(r.Text,x({color:"dimmed",size:"sm",mt:"md"},{children:"Fast-track learning for your students."}))]})),t.jsx(r.Stack,{children:t.jsxs("div",x({style:{position:"relative"}},{children:[t.jsx(r.LoadingOverlay,{visible:e.loading,overlayBlur:2}),t.jsxs(r.Stack,x({spacing:"sm"},{children:[t.jsx(p,{data:[{title:"# OF STUDENTS",value:e.students.length},{title:"ACCOUNT CREATION",value:e.percentageOfAccountsCreated,unit:"%"},{title:"BADGE COMPLETION",value:e.percentageOfBadgesEarned,unit:"%"},{title:"LESSON COMPLETION",value:e.percentageOfLessonsCompleted,unit:"%"}]}),t.jsx(r.Select,{clearable:!0,clearButtonLabel:"Clear class selection",size:"sm",placeholder:"Select a class",nothingFound:"No options",value:e.classId,onChange:e.onClassChange,icon:t.jsx(i.IconCategory2,{}),data:e.classes.map((function(e){return{value:e.classId,label:e.name}}))}),t.jsxs(r.Stack,x({spacing:0},{children:[t.jsx(j,{value:o,data:[{label:"My students",value:"students"},{label:"Impact statements",value:"impact"},{label:"Reflections",value:"reflections"},{label:"Badges",value:"badges"},{label:"Lessons",value:"lessons"}],onChange:l}),"impact"===o&&t.jsx(A,{loading:e.loading,items:e.impacts}),"reflections"===o&&t.jsx(I,{loading:e.loading,items:e.reflections}),"badges"===o&&t.jsx(B,{loading:e.loading,items:e.badges,onClick:e.onBadgeClick}),"lessons"===o&&t.jsx(O,{loading:e.loading,items:e.lessons,onClick:e.onLessonClick}),"students"===o&&t.jsx(N,{loading:e.loading,items:e.students,onViewProfile:e.onViewStudentProfile})]}))]}))]}))})]})}))},e.Home=function(e){return t.jsx(r.Container,x({size:"lg"},{children:t.jsxs(r.Stack,x({spacing:"lg"},{children:[t.jsxs(r.Grid,x({gutter:"md"},{children:[t.jsx(r.Grid.Col,x({md:6},{children:t.jsx(M,{variant:"compact",name:e.name,impactStatement:e.impactStatement})})),t.jsx(r.Grid.Col,x({md:6},{children:t.jsx(_,{title:e.organization.name,description:e.organization.description,image:e.organization.image,action:{label:"Visit website",link:e.organization.website}})}))]})),t.jsxs(r.Grid,x({gutter:"md"},{children:[t.jsx(r.Grid.Col,{children:t.jsx(U,{title:"Dashboard",description:"Track class performance across core areas of focus.",onClick:e.onDashboardClick})}),t.jsx(r.Grid.Col,{children:t.jsx(U,{title:"Classes",description:"Organize students into classes.",onClick:e.onClassesClick})}),t.jsx(r.Grid.Col,{children:t.jsx(U,{title:"Lessons",description:"Explore units of instruction and/or see corresponding class progress.",onClick:e.onLessonsClick})}),t.jsx(r.Grid.Col,{children:t.jsx(U,{title:"Badges",description:"Project-sized skills acquisition and standards alignment.",onClick:e.onBadgesClick})})]}))]}))}))},e.Lesson=function(e){var n=Q().classes,o=s.useState("question"),l=o[0],a=o[1],c=e.students.length,d=c>0?e.students.filter((function(e){return e.isComplete})).length/c:0;return t.jsx(r.Container,x({size:"lg",py:"xl"},{children:t.jsxs(r.Stack,x({spacing:"md"},{children:[t.jsx(r.Grid,{children:t.jsxs(r.Grid.Col,x({sm:"auto"},{children:[t.jsx(r.Badge,x({variant:"filled",leftSection:t.jsx(r.ActionIcon,x({onClick:e.onBackClick,color:"blue",size:"xs",radius:"xl",variant:"filled"},{children:t.jsx(i.IconArrowLeft,{size:14})})),size:"lg"},{children:"Lessons"})),t.jsxs(r.Group,{children:[t.jsxs(r.Stack,x({spacing:0},{children:[t.jsx(r.Title,x({order:2,className:n.title,mt:"md"},{children:e.displayName||"Lesson"})),t.jsx(r.Text,x({color:"dimmed",className:n.description,mt:"sm"},{children:e.description||"No description"}))]})),t.jsx(r.Stack,x({ml:"auto"},{children:t.jsx(r.Button,x({variant:"gradient",onClick:e.onPreviewClick},{children:"Preview"}))}))]})]}))}),t.jsx("div",{children:t.jsxs("div",x({style:{position:"relative"}},{children:[t.jsx(r.LoadingOverlay,{visible:e.loading,overlayBlur:2}),t.jsxs(r.Stack,{children:[t.jsx(p,{data:[{title:"LESSON COMPLETION",value:d,unit:"%"}]}),t.jsx(r.Select,{clearable:!0,clearButtonLabel:"Clear class selection",size:"sm",placeholder:"Select a class",nothingFound:"No options",value:e.classId,onChange:e.onClassChange,icon:t.jsx(i.IconCategory2,{}),data:e.classes.map((function(e){return{value:e.classId,label:e.name}}))}),t.jsxs(r.Stack,x({spacing:0},{children:[t.jsx(j,{value:l,data:[{label:"By question",value:"question"},{label:"By reflection",value:"reflections"},{label:"By student",value:"students"}],onChange:a}),"question"===l&&t.jsx(X,{loading:e.loading,items:e.questions}),"reflections"===l&&t.jsx(Y,{loading:e.loading,items:e.reflections}),"students"===l&&t.jsx(J,{loading:e.loading,items:e.students,onClick:e.onUserClick})]}))]})]}))})]}))}))},e.Lessons=function(e){var n=Z().classes;return t.jsx(r.Container,x({size:"lg",py:"xl"},{children:t.jsxs(r.Stack,x({spacing:"md"},{children:[t.jsx(r.Grid,{children:t.jsxs(r.Grid.Col,x({sm:"auto"},{children:[t.jsx(r.Badge,x({variant:"filled",size:"lg"},{children:"Lessons"})),t.jsx(r.Title,x({order:2,className:n.title,mt:"md"},{children:"Lessons"})),t.jsx(r.Text,x({color:"dimmed",className:n.description,mt:"sm"},{children:"Explore units of instruction and/or see corresponding class progress."}))]}))}),t.jsx(r.Autocomplete,{placeholder:"Search for a lesson that fits your needs",data:e.lessons.map((function(e){return e.name})),onChange:e.onAutocompleteChange}),t.jsxs("div",x({style:{position:"relative"}},{children:[t.jsx(r.LoadingOverlay,{visible:e.loading,overlayBlur:2}),t.jsx(K,{loading:e.loading,items:e.lessons,onClick:e.onLessonClick})]}))]}))}))},e.Navbar=re,e.Student=function(e){var n=s.useState("badges"),o=n[0],l=n[1],a=e.badges.length,c=a>0?e.badges.filter((function(e){return e.isComplete})).length/a:0;return t.jsx(r.Container,x({size:"lg",py:"xl"},{children:t.jsxs(r.Stack,x({spacing:"md"},{children:[t.jsx(r.Grid,x({gutter:"md"},{children:t.jsxs(r.Grid.Col,x({sm:"auto"},{children:[t.jsx(r.Badge,x({variant:"filled",leftSection:t.jsx(r.ActionIcon,x({onClick:e.onBackClick,color:"blue",size:"xs",radius:"xl",variant:"filled"},{children:t.jsx(i.IconArrowLeft,{size:14})})),size:"lg"},{children:"Students"})),t.jsx(M,{variant:"compact",name:e.name,impactStatement:e.impactStatement})]}))})),t.jsxs("div",x({style:{position:"relative"}},{children:[t.jsx(r.LoadingOverlay,{visible:e.loading,overlayBlur:2}),t.jsxs(r.Stack,x({spacing:"lg"},{children:[t.jsx(p,{data:[{title:"PROBLEMS SOLVED",value:e.numberOfProblemsSolved},{title:"LESSON COMPLETION",value:e.percentageOfLessonsCompleted,unit:"%"},{title:"BADGE COMPLETION",value:c,unit:"%"}]}),t.jsxs(r.Stack,x({spacing:0},{children:[t.jsx(j,{value:o,data:[{label:"My badges",value:"badges"},{label:"My answers",value:"answers"},{label:"My reflections",value:"reflections"}],onChange:l}),"badges"===o&&t.jsx(H,{loading:e.loading,items:e.badges,onClick:e.onBadgeClick}),"answers"===o&&t.jsx(R,{loading:e.loading,items:e.answers,onClick:e.onAnswerClick}),"reflections"===o&&t.jsx(F,{loading:e.loading,items:e.reflections,onClick:e.onReflectionClick})]}))]}))]}))]}))}))},e.SwitchAccount=ne,Object.defineProperty(e,"__esModule",{value:!0})}));
+'use strict';
+
+var notifications = require('@mantine/notifications');
+var icons = require('@tabler/icons');
+var React = require('react');
+var core = require('@mantine/core');
+var dropzone = require('@mantine/dropzone');
+var form = require('@mantine/form');
+var papa = require('papaparse');
+var modals = require('@mantine/modals');
+var reactCharts = require('react-charts');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
+
+const useStyles$c = core.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,
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column"
+    }
+  },
+  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 }) => {
+  const { classes } = useStyles$c();
+  const stats = data.map((stat) => {
+    const value = (() => {
+      if (stat.unit === "%") {
+        return Math.round((stat.value + Number.EPSILON) * 100);
+      }
+      return stat.value;
+    })();
+    return /* @__PURE__ */ React__namespace.createElement("div", { key: stat.title, className: classes.stat }, /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.count }, value.toLocaleString(), stat.unit), /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.title }, stat.title));
+  });
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.root }, stats);
+};
+
+const Tabs = (props) => {
+  var _a;
+  const tabs = (_a = props.data) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React__namespace.createElement(core.Tabs.Tab, { key: item.value, value: item.value }, item.label || item.value));
+  return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
+};
+
+const useStyles$b = core.createStyles((theme) => ({
+  wrapper: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing.xl * 2,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white,
+    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      flexDirection: "column-reverse",
+      padding: theme.spacing.xl
+    }
+  },
+  image: {
+    maxWidth: "40%",
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      maxWidth: "100%"
+    }
+  },
+  body: {
+    paddingRight: theme.spacing.xl * 4,
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      paddingRight: 0,
+      marginTop: theme.spacing.xl
+    }
+  },
+  title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    lineHeight: 1,
+    marginBottom: theme.spacing.md
+  },
+  controls: {
+    display: "flex",
+    marginTop: theme.spacing.xl
+  },
+  inputWrapper: {
+    width: "100%",
+    flex: "1"
+  },
+  input: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    borderRight: 0
+  },
+  control: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  }
+}));
+const PlaceholderBanner = (props) => {
+  const { classes } = useStyles$b();
+  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__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React__namespace.createElement(core.Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
+};
+
+function Table$f(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No badges to display",
+        description: "There has not been any badge progress just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.name }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Incomplete"))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Badge Status"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+function Table$e(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No lessons to display",
+        description: "There are not lessons in badge.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const rows = props.items.map((row) => {
+    const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
+    return /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, percentageCompletion, "%"));
+  });
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+const useStyles$a = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Badge = (props) => {
+  const { classes } = useStyles$a();
+  const [tab, setTab] = React.useState("lessons");
+  const numberOfStudents = props.students.length;
+  const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+    core.Badge,
+    {
+      variant: "filled",
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      size: "lg"
+    },
+    "Badges"
+  ), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
+    {
+      variant: "gradient",
+      onClick: props.onPreviewClick
+    },
+    "Preview"
+  ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+    {
+      title: "BADGE COMPLETION",
+      value: percentageOfBadgesEarned,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React__namespace.createElement(
+    core.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__namespace.createElement(icons.IconCategory2, null),
+      data: props.classes.map((g) => {
+        return { value: g.classId, label: g.name };
+      })
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "By lesson", value: "lessons" },
+        { label: "By student", value: "students" }
+      ],
+      onChange: setTab
+    }
+  ), tab === "lessons" && /* @__PURE__ */ React__namespace.createElement(
+    Table$e,
+    {
+      loading: props.loading,
+      items: props.lessons,
+      onClick: props.onLessonClick
+    }
+  ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
+    Table$f,
+    {
+      loading: props.loading,
+      items: props.students,
+      onClick: props.onUserClick
+    }
+  )))))));
+};
+
+function Table$d(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No badges to display",
+        description: "We don't have any badges to show you just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(
+    core.UnstyledButton,
+    {
+      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]
+        }
+      }),
+      onClick: () => props.onClick && props.onClick(row)
+    },
+    /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.description)))
+  ))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+const useStyles$9 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Badges = (props) => {
+  const { classes } = useStyles$9();
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React__namespace.createElement(
+    core.Autocomplete,
+    {
+      placeholder: "Search for a badge that fits your needs",
+      data: props.badges.map((item) => item.name),
+      onChange: props.onAutocompleteChange
+    }
+  ), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(
+    Table$d,
+    {
+      loading: props.loading,
+      items: props.badges,
+      onClick: props.onBadgeClick
+    }
+  ))));
+};
+
+function Table$c(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No students to display",
+        description: "You don't have any students yet, add them and revisit.",
+        loading: props.loading,
+        icon: "groups"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onViewProfile(row) }, row.studentName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.className)));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Class Name"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+const units = [
+  { unit: "year", ms: 31536e6 },
+  { unit: "month", ms: 2628e6 },
+  { unit: "day", ms: 864e5 },
+  { unit: "hour", ms: 36e5 },
+  { unit: "minute", ms: 6e4 },
+  { unit: "second", ms: 1e3 }
+];
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+function relativeTimeFromDates(relative, pivot = new Date()) {
+  if (!relative)
+    return "";
+  const elapsed = relative.getTime() - pivot.getTime();
+  return relativeTimeFromElapsed(elapsed);
+}
+function relativeTimeFromElapsed(elapsed) {
+  for (const { unit, ms } of units) {
+    if (Math.abs(elapsed) >= ms || unit === "second") {
+      return rtf.format(Math.round(elapsed / ms), unit);
+    }
+  }
+  return "";
+}
+
+function Table$b(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No reflections to display",
+        description: "There has not been any lesson progress just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName + row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.lessonName), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, relativeTimeFromDates(new Date(row.updatedAt)))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Updated At"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+function Table$a(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No impact statements to display",
+        description: "There are no students with impact statements yet.",
+        loading: props.loading,
+        icon: "kindergarten"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.impactStatement)));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Impact Statement"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+function Table$9(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No badges to display",
+        description: "We don't have any badges to show you just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React__namespace.createElement("td", null, row.description), /* @__PURE__ */ React__namespace.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Badge Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+function Table$8(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No lessons to display",
+        description: "We don't have any lessons to show you just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React__namespace.createElement("td", null, row.description), /* @__PURE__ */ React__namespace.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+const Dashboard = (props) => {
+  const [tab, setTab] = React.useState("students");
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h3" }, "Dashboard"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm", mt: "md" }, "Fast-track learning for your students.")), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+    {
+      title: "# OF STUDENTS",
+      value: props.students.length
+    },
+    {
+      title: "ACCOUNT CREATION",
+      value: props.percentageOfAccountsCreated,
+      unit: "%"
+    },
+    {
+      title: "BADGE COMPLETION",
+      value: props.percentageOfBadgesEarned,
+      unit: "%"
+    },
+    {
+      title: "LESSON COMPLETION",
+      value: props.percentageOfLessonsCompleted,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React__namespace.createElement(
+    core.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__namespace.createElement(icons.IconCategory2, null),
+      data: props.classes.map((g) => {
+        return { value: g.classId, label: g.name };
+      })
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "My students", value: "students" },
+        { label: "Impact statements", value: "impact" },
+        { label: "Reflections", value: "reflections" },
+        { label: "Badges", value: "badges" },
+        { label: "Lessons", value: "lessons" }
+      ],
+      onChange: setTab
+    }
+  ), tab === "impact" && /* @__PURE__ */ React__namespace.createElement(
+    Table$a,
+    {
+      loading: props.loading,
+      items: props.impacts
+    }
+  ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
+    Table$b,
+    {
+      loading: props.loading,
+      items: props.reflections
+    }
+  ), tab === "badges" && /* @__PURE__ */ React__namespace.createElement(
+    Table$9,
+    {
+      loading: props.loading,
+      items: props.badges,
+      onClick: props.onBadgeClick
+    }
+  ), tab === "lessons" && /* @__PURE__ */ React__namespace.createElement(
+    Table$8,
+    {
+      loading: props.loading,
+      items: props.lessons,
+      onClick: props.onLessonClick
+    }
+  ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
+    Table$c,
+    {
+      loading: props.loading,
+      items: props.students,
+      onViewProfile: props.onViewStudentProfile
+    }
+  )))))));
+};
+
+function Table$7(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No students to display",
+        description: "You have not rostered any students yet.",
+        loading: props.loading,
+        icon: "groups"
+      }
+    );
+  }
+  const openDeleteModal = (student) => modals.openConfirmModal({
+    title: `Delete "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}"?`,
+    centered: true,
+    children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Are you sure you want to delete this person? This action is destructive and you will have to contact support to restore your data."),
+    labels: { confirm: "Delete", cancel: "No don't delete them" },
+    confirmProps: { color: "red" },
+    onConfirm: () => props.onDelete && props.onDelete(student)
+  });
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.email }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onViewProfile && props.onViewProfile(row) }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, row.badgesEarned), /* @__PURE__ */ React__namespace.createElement("td", null, row.lessonsCompleted), /* @__PURE__ */ React__namespace.createElement("td", null, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { color: "green" })), /* @__PURE__ */ React__namespace.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red" }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Badges Earned"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lessons Completed"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "Last Active"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = 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) => {
+  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]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const useStyles$8 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  },
+  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$8();
+  const form$1 = form.useForm({
+    initialValues: {
+      classId: "",
+      studentId: "",
+      email: "",
+      givenName: "",
+      familyName: "",
+      avatar: "",
+      role: "",
+      readonly: false,
+      lastActivity: null,
+      hasAccount: false,
+      lessonsCompleted: 0,
+      badgesEarned: 0
+    },
+    validate: {
+      email: (value) => /^\S+@\S+$/.test(value) && props.students.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
+    }
+  });
+  const [opened, setOpened] = React.useState(false);
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+    core.Drawer,
+    {
+      opened,
+      onClose: () => setOpened(false),
+      title: /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h5" }, "Add students"),
+      padding: "xl",
+      size: "xl"
+    },
+    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps(__spreadValues$3({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
+      const values = form$1.values;
+      form$1.reset();
+      setOpened(false);
+      props.onCreateStudents && props.onCreateStudents([values]);
+    }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
+      core.TextInput,
+      __spreadValues$3({
+        withAsterisk: true,
+        label: "Email",
+        placeholder: "Email"
+      }, form$1.getInputProps("email"))
+    ), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
+      core.TextInput,
+      __spreadValues$3({
+        label: "Given name",
+        placeholder: "Given name"
+      }, form$1.getInputProps("givenName"))
+    ), /* @__PURE__ */ React__namespace.createElement(
+      core.TextInput,
+      __spreadValues$3({
+        label: "Family name",
+        placeholder: "Family name"
+      }, form$1.getInputProps("familyName"))
+    )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
+  ), /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+    core.Badge,
+    {
+      variant: "filled",
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      size: "lg"
+    },
+    "Classes"
+  ), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
+    {
+      onClick: () => setOpened(true),
+      leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 })
+    },
+    "Add students"
+  ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+    {
+      title: "# OF STUDENTS",
+      value: props.students.length
+    },
+    {
+      title: "ACCOUNT CREATION",
+      value: props.percentageOfAccountsCreated,
+      unit: "%"
+    },
+    {
+      title: "BADGE COMPLETION",
+      value: props.percentageOfBadgesEarned,
+      unit: "%"
+    },
+    {
+      title: "LESSON COMPLETION",
+      value: props.percentageOfLessonsCompleted,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React__namespace.createElement(
+    Table$7,
+    {
+      loading: props.loading,
+      items: props.students,
+      onDelete: props.onDeleteStudent,
+      onViewProfile: (student) => props.onStudentClick(student)
+    }
+  ))))));
+};
+const DropzoneButton = (props) => {
+  const { classes, theme } = useStyles$8();
+  const openRef = React__namespace.useRef(null);
+  const [loading, setLoading] = React__namespace.useState(false);
+  const onDrop = React__namespace.useCallback((acceptedFiles) => {
+    setLoading(true);
+    acceptedFiles.forEach((file) => {
+      papa__namespace.parse(file, {
+        download: true,
+        header: true,
+        dynamicTyping: true,
+        skipEmptyLines: true,
+        worker: true,
+        complete: function(results) {
+          const data = results.data.filter((v) => /^\S+@\S+$/.test(v.email) && props.students.filter((u) => u.email === v.email).length === 0);
+          data.length > 0 && props.onCreateStudents && props.onCreateStudents(data);
+          setLoading(false);
+          props.close();
+        }
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(
+    dropzone.Dropzone,
+    {
+      loading,
+      openRef,
+      onDrop,
+      className: classes.dropzone,
+      radius: "md",
+      accept: [dropzone.MIME_TYPES.csv],
+      maxSize: 5 * 1024 ** 2
+    },
+    /* @__PURE__ */ React__namespace.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "center" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, /* @__PURE__ */ React__namespace.createElement(icons.IconDownload, { size: 50, color: theme.colors[theme.primaryColor][6], stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, /* @__PURE__ */ React__namespace.createElement(icons.IconX, { size: 50, color: theme.colors.red[6], stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, /* @__PURE__ */ React__namespace.createElement(
+      icons.IconCloudUpload,
+      {
+        size: 50,
+        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+        stroke: 1.5
+      }
+    ))), /* @__PURE__ */ React__namespace.createElement(core.Text, { align: "center", weight: 700, size: "lg", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, "Upload multiple")), /* @__PURE__ */ React__namespace.createElement(core.Text, { align: "center", size: "sm", mt: "xs", color: "dimmed" }, "Drag'n'drop files here to upload. We can accept only ", /* @__PURE__ */ React__namespace.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
+  ), /* @__PURE__ */ React__namespace.createElement(core.Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
+    var _a;
+    return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
+  } }, "Select file"));
+};
+
+function Table$6(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No classes to display",
+        description: "You don't have any classes yet. Try creating one first...",
+        loading: props.loading,
+        icon: "groups"
+      }
+    );
+  }
+  const openDeleteModal = (group) => modals.openConfirmModal({
+    title: `Delete "${group.name}"?`,
+    centered: true,
+    children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Are you sure you want to delete this class? This action is destructive and you will have to contact support to restore your data."),
+    labels: { confirm: "Delete class", cancel: "No don't delete it" },
+    confirmProps: { color: "red" },
+    onConfirm: () => props.onDeleteClass(group)
+  });
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.classId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick(row) }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.name))), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14 }, row.description)), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red" }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 300 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Class Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, 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) => {
+  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]);
+    }
+  return a;
+};
+const useStyles$7 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Classes = (props) => {
+  const { classes } = useStyles$7();
+  const form$1 = form.useForm({
+    initialValues: {
+      classId: "",
+      name: "",
+      description: ""
+    },
+    validate: {
+      name: (val) => val.length <= 6 ? "Name should include at least 6 characters" : null
+    }
+  });
+  const [opened, setOpened] = React.useState(false);
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+    core.Drawer,
+    {
+      opened,
+      onClose: () => setOpened(false),
+      title: /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h5" }, "Create a class"), /* @__PURE__ */ React__namespace.createElement(core.Tooltip, { label: "Classes settings cannot be modified once created" }, /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, null, /* @__PURE__ */ React__namespace.createElement(icons.IconInfoCircle, { color: "#3b82f6", size: 14 })))),
+      padding: "xl",
+      size: "xl"
+    },
+    /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
+      const values = form$1.values;
+      form$1.reset();
+      setOpened(false);
+      props.onCreateClass && props.onCreateClass(values);
+    }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
+      core.TextInput,
+      __spreadValues$2({
+        withAsterisk: true,
+        label: "Name",
+        placeholder: "Class name"
+      }, form$1.getInputProps("name"))
+    ), /* @__PURE__ */ React__namespace.createElement(
+      core.TextInput,
+      __spreadValues$2({
+        label: "Description",
+        placeholder: "A class for my first period English students"
+      }, form$1.getInputProps("description"))
+    )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))
+  ), /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Organize students into classes"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "A class can be for a specific period of time, grade, team, or other cohorts.")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
+    {
+      onClick: () => setOpened(true),
+      leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 })
+    },
+    "Create class"
+  ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+    {
+      title: "# OF CLASSES",
+      value: props.classes.length
+    }
+  ] }), /* @__PURE__ */ React__namespace.createElement(
+    Table$6,
+    {
+      loading: props.loading,
+      items: props.classes,
+      onDeleteClass: props.onDeleteClass,
+      onClick: props.onClassClick
+    }
+  ))))));
+};
+
+const useStyles$6 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    marginTop: 16,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const UserInfo = (props) => {
+  const { classes } = useStyles$6();
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
+};
+
+function Table$5(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No badges to display",
+        description: "There has not been any badge progress just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.badgeName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick(row) }, row.badgeName)), /* @__PURE__ */ React__namespace.createElement("td", null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Incomplete"))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Badge Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Status"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+function Table$4(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No answers to display",
+        description: "There has not been any lesson progress just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.questionName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.questionName), /* @__PURE__ */ React__namespace.createElement("td", null, row.answer.join(","))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Question"), /* @__PURE__ */ React__namespace.createElement("th", null, "Answer"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+function Table$3(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No reflections to display",
+        description: "There has not been any lesson progress just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick(row) }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, row.rating.toLocaleString())));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+const Student = (props) => {
+  const [tab, setTab] = React.useState("badges");
+  const numberOfBadges = props.badges.length;
+  const percentageOfBadgesEarned = numberOfBadges > 0 ? props.badges.filter((b) => b.isComplete).length / numberOfBadges : 0;
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+    core.Badge,
+    {
+      variant: "filled",
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      size: "lg"
+    },
+    "Students"
+  ), /* @__PURE__ */ React__namespace.createElement(
+    UserInfo,
+    {
+      variant: "compact",
+      name: props.name,
+      impactStatement: props.impactStatement
+    }
+  ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "lg" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+    {
+      title: "PROBLEMS SOLVED",
+      value: props.numberOfProblemsSolved
+    },
+    {
+      title: "LESSON COMPLETION",
+      value: props.percentageOfLessonsCompleted,
+      unit: "%"
+    },
+    {
+      title: "BADGE COMPLETION",
+      value: percentageOfBadgesEarned,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "My badges", value: "badges" },
+        { label: "My answers", value: "answers" },
+        { label: "My reflections", value: "reflections" }
+      ],
+      onChange: setTab
+    }
+  ), tab === "badges" && /* @__PURE__ */ React__namespace.createElement(
+    Table$5,
+    {
+      loading: props.loading,
+      items: props.badges,
+      onClick: props.onBadgeClick
+    }
+  ), tab === "answers" && /* @__PURE__ */ React__namespace.createElement(
+    Table$4,
+    {
+      loading: props.loading,
+      items: props.answers,
+      onClick: props.onAnswerClick
+    }
+  ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
+    Table$3,
+    {
+      loading: props.loading,
+      items: props.reflections,
+      onClick: props.onReflectionClick
+    }
+  ))))));
+};
+
+const useStyles$5 = core.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])
+      }
+    }
+  };
+});
+function CardGradient(props) {
+  const { classes } = useStyles$5(props);
+  const from = props.from || "blue";
+  const to = props.to || "green";
+  const icon = props.icon || /* @__PURE__ */ React__namespace.createElement(icons.IconColorSwatch, { size: 28, stroke: 1.5 });
+  return /* @__PURE__ */ React__namespace.createElement(core.Paper, { withBorder: true, radius: "md", className: classes.card, onClick: props.onClick }, /* @__PURE__ */ React__namespace.createElement(
+    core.ThemeIcon,
+    {
+      size: "xl",
+      radius: "md",
+      variant: "gradient",
+      gradient: { deg: 0, from, to }
+    },
+    icon
+  ), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
+}
+
+var __defProp$1 = Object.defineProperty;
+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$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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const useStyles$4 = core.createStyles((theme) => ({
+  card: {
+    height: 240,
+    backgroundSize: "cover",
+    backgroundPosition: "center"
+  },
+  content: {
+    position: "absolute",
+    padding: theme.spacing.xl,
+    zIndex: 1,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0
+  },
+  action: {
+    position: "absolute",
+    bottom: theme.spacing.xl,
+    right: theme.spacing.xl
+  },
+  title: {
+    color: theme.white,
+    marginBottom: theme.spacing.xs / 2
+  },
+  description: {
+    color: theme.white,
+    maxWidth: 220
+  }
+}));
+const TenantBanner = (_a) => {
+  var _b = _a, {
+    title,
+    description,
+    image,
+    action,
+    style,
+    className
+  } = _b, others = __objRest(_b, [
+    "title",
+    "description",
+    "image",
+    "action",
+    "style",
+    "className"
+  ]);
+  const { classes, cx, theme } = useStyles$4();
+  return /* @__PURE__ */ React__namespace.createElement(
+    core.Card,
+    __spreadValues$1({
+      radius: "md",
+      style: __spreadValues$1({ backgroundImage: `url(${image})` }, style),
+      className: cx(classes.card, className)
+    }, others),
+    /* @__PURE__ */ React__namespace.createElement(
+      core.Overlay,
+      {
+        gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[4]} 100%)`,
+        opacity: 0.55,
+        zIndex: 0
+      }
+    ),
+    /* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React__namespace.createElement(
+      core.Button,
+      {
+        className: classes.action,
+        variant: "white",
+        color: "dark",
+        component: "a",
+        size: "xs",
+        href: action.link,
+        target: "_blank"
+      },
+      action.label
+    ))
+  );
+};
+
+const Home = (props) => {
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { md: 6 }, /* @__PURE__ */ React__namespace.createElement(
+    UserInfo,
+    {
+      variant: "compact",
+      name: props.name,
+      impactStatement: props.impactStatement
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { md: 6 }, /* @__PURE__ */ React__namespace.createElement(
+    TenantBanner,
+    {
+      title: props.organization.name,
+      description: props.organization.description,
+      image: props.organization.image,
+      action: {
+        label: "Visit website",
+        link: props.organization.website
+      }
+    }
+  ))), /* @__PURE__ */ React__namespace.createElement(core.Grid, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
+    CardGradient,
+    {
+      title: "Dashboard",
+      description: "Track class performance across core areas of focus.",
+      onClick: props.onDashboardClick
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
+    CardGradient,
+    {
+      title: "Classes",
+      description: "Organize students into classes.",
+      onClick: props.onClassesClick
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
+    CardGradient,
+    {
+      title: "Lessons",
+      description: "Explore units of instruction and/or see corresponding class progress.",
+      onClick: props.onLessonsClick
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
+    CardGradient,
+    {
+      title: "Badges",
+      description: "Project-sized skills acquisition and standards alignment.",
+      onClick: props.onBadgesClick
+    }
+  )))));
+};
+
+function Table$2(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No reflections to display",
+        description: "There has not been any lesson progress just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React__namespace.createElement("td", null, row.studentName), /* @__PURE__ */ React__namespace.createElement("td", null, row.reflection), /* @__PURE__ */ React__namespace.createElement("td", null, row.rating.toLocaleString())));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+function Table$1(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No students to display",
+        description: "You don't have any student data yet for this lesson",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.name }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, "In progress"))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Status"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+function Stack(props) {
+  const primaryAxis = React__namespace.useMemo(
+    () => ({
+      position: "left",
+      getValue: (datum) => datum.primary
+    }),
+    []
+  );
+  const secondaryAxes = React__namespace.useMemo(
+    () => [
+      {
+        position: "bottom",
+        getValue: (datum) => datum.secondary
+      }
+    ],
+    []
+  );
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No questions to display",
+        description: "There are no questions in this lesson.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => {
+    if (row.chart) {
+      const labelMap = {};
+      const choices = row.choices || [];
+      choices.forEach((c) => {
+        labelMap[c] = 0;
+      });
+      row.answers.forEach((a) => a.forEach((r) => {
+        if (r in labelMap) {
+          labelMap[r] = labelMap[r] ? labelMap[r] + 1 : 1;
+        }
+      }));
+      return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "lg" }, row.question), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement("div", { style: { background: "white", height: "300px", width: "100%", position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(
+        reactCharts.Chart,
+        {
+          options: {
+            data: [{
+              label: "",
+              data: choices.map((k) => {
+                return {
+                  primary: truncateWithEllipses(k, 50),
+                  secondary: labelMap[k]
+                };
+              })
+            }],
+            primaryAxis,
+            secondaryAxes
+          }
+        }
+      ))));
+    }
+    return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "lg" }, row.question), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 4 }, row.answers.map((a) => {
+      const answerText = a.join("\n");
+      return /* @__PURE__ */ React__namespace.createElement(core.Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React__namespace.createElement(core.Text, null, answerText));
+    })))));
+  });
+  return /* @__PURE__ */ React__namespace.createElement(core.Stack, { py: 4, spacing: 10, sx: { minWidth: 700 } }, rows);
+}
+const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
+
+const useStyles$3 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Lesson = (props) => {
+  const { classes } = useStyles$3();
+  const [tab, setTab] = React.useState("question");
+  const numberOfStudents = props.students.length;
+  const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+    core.Badge,
+    {
+      variant: "filled",
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onBackClick, color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      size: "lg"
+    },
+    "Lessons"
+  ), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
+    {
+      variant: "gradient",
+      onClick: props.onPreviewClick
+    },
+    "Preview"
+  ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+    {
+      title: "LESSON COMPLETION",
+      value: percentageOfLessonsCompleted,
+      unit: "%"
+    }
+  ] }), /* @__PURE__ */ React__namespace.createElement(
+    core.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__namespace.createElement(icons.IconCategory2, null),
+      data: props.classes.map((g) => {
+        return { value: g.classId, label: g.name };
+      })
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "By question", value: "question" },
+        { label: "By reflection", value: "reflections" },
+        { label: "By student", value: "students" }
+      ],
+      onChange: setTab
+    }
+  ), tab === "question" && /* @__PURE__ */ React__namespace.createElement(
+    Stack,
+    {
+      loading: props.loading,
+      items: props.questions
+    }
+  ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
+    Table$2,
+    {
+      loading: props.loading,
+      items: props.reflections
+    }
+  ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
+    Table$1,
+    {
+      loading: props.loading,
+      items: props.students,
+      onClick: props.onUserClick
+    }
+  )))))));
+};
+
+function Table(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No lessons to display",
+        description: "We don't have any lessons to show you just yet.",
+        loading: props.loading,
+        icon: "lessons"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(
+    core.UnstyledButton,
+    {
+      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]
+        }
+      }),
+      onClick: () => props.onClick && props.onClick(row)
+    },
+    /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.description)))
+  ))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+const useStyles$2 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Lessons = (props) => {
+  const { classes } = useStyles$2();
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore units of instruction and/or see corresponding class progress."))), /* @__PURE__ */ React__namespace.createElement(
+    core.Autocomplete,
+    {
+      placeholder: "Search for a lesson that fits your needs",
+      data: props.lessons.map((item) => item.name),
+      onChange: props.onAutocompleteChange
+    }
+  ), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(
+    Table,
+    {
+      loading: props.loading,
+      items: props.lessons,
+      onClick: props.onLessonClick
+    }
+  ))));
+};
+
+const mycCache = core.createEmotionCache({
+  key: "mantine",
+  prepend: false
+});
+const AdminProvider = (props) => {
+  return /* @__PURE__ */ React__namespace.createElement(core.MantineProvider, { withNormalizeCSS: true, withGlobalStyles: true, emotionCache: mycCache, theme: { loader: "bars" } }, /* @__PURE__ */ React__namespace.createElement(notifications.NotificationsProvider, { limit: props.notificationLimit || 5 }, /* @__PURE__ */ React__namespace.createElement(modals.ModalsProvider, null, props.children)));
+};
+
+var __defProp = Object.defineProperty;
+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]);
+    }
+  return a;
+};
+const SwitchAccount = (props) => {
+  const form$1 = form.useForm({
+    initialValues: {
+      active: props.account
+    }
+  });
+  return /* @__PURE__ */ React__namespace.createElement(
+    core.Modal,
+    {
+      centered: true,
+      opened: props.opened,
+      onClose: () => props.onClose && props.onClose(),
+      size: "sm",
+      title: /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h5" }, "Accounts")
+    },
+    /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
+      props.onChange && props.onChange(form$1.values.active);
+    }) }, /* @__PURE__ */ React__namespace.createElement(
+      core.Select,
+      __spreadValues({
+        required: true,
+        placeholder: "Select an account",
+        defaultValue: props.account,
+        data: props.accounts.map((a) => {
+          return { value: a.accountId, label: a.name };
+        })
+      }, form$1.getInputProps("active"))
+    ), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "xl" }, "Switch"))
+  );
+};
+
+const useStyles$1 = core.createStyles((theme) => ({
+  link: {
+    width: 50,
+    height: 50,
+    borderRadius: theme.radius.md,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
+    "&:hover": {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[0]
+    }
+  },
+  active: {
+    "&, &:hover": {
+      backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
+      color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
+    }
+  }
+}));
+const data = [
+  { icon: icons.IconHome2, label: "Home", href: "/home" },
+  { icon: icons.IconGauge, label: "Dashboard", href: "/dashboard" },
+  { icon: icons.IconCategory2, label: "Classes", href: "/classes" },
+  { icon: icons.IconAlbum, label: "Badges", href: "/badges" },
+  { icon: icons.IconLambda, label: "Lessons", href: "/lessons" }
+];
+const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
+  const { classes, cx } = useStyles$1();
+  return /* @__PURE__ */ React__namespace.createElement(core.Tooltip, { label, position: "right", transitionDuration: 0 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick, className: cx(classes.link, { [classes.active]: active }) }, /* @__PURE__ */ React__namespace.createElement(Icon, { stroke: 1.5 })));
+};
+const Navbar = (props) => {
+  const links = data.map((link) => /* @__PURE__ */ React__namespace.createElement(
+    NavbarLink,
+    {
+      key: link.label,
+      label: link.label,
+      icon: link.icon,
+      active: link.label === props.active,
+      onClick: () => props.navigate(link.href)
+    }
+  ));
+  return /* @__PURE__ */ React__namespace.createElement(core.Navbar, { width: { base: 80 }, p: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React__namespace.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React__namespace.createElement(core.Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { grow: true, mt: 50 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { justify: "center", spacing: 0 }, links)), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { justify: "center", spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+    NavbarLink,
+    {
+      icon: icons.IconSwitchHorizontal,
+      label: "Switch accounts",
+      onClick: props.onSwitchAccounts
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    NavbarLink,
+    {
+      icon: icons.IconLogout,
+      label: "Logout",
+      onClick: props.onLogout
+    }
+  ))));
+};
+
+const useStyles = core.createStyles((theme) => ({
+  footer: {
+    paddingTop: theme.spacing.xl * 2,
+    paddingBottom: theme.spacing.xl * 2,
+    paddingLeft: theme.spacing.xl * 3,
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+    borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]}`
+  },
+  logo: {
+    maxWidth: 200,
+    [theme.fn.smallerThan("sm")]: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    }
+  },
+  description: {
+    marginTop: 5,
+    [theme.fn.smallerThan("sm")]: {
+      marginTop: theme.spacing.xs,
+      textAlign: "center"
+    }
+  },
+  inner: {
+    display: "flex",
+    justifyContent: "space-between",
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column",
+      alignItems: "center"
+    }
+  },
+  groups: {
+    display: "flex",
+    flexWrap: "wrap",
+    [theme.fn.smallerThan("sm")]: {
+      display: "none"
+    }
+  },
+  wrapper: {
+    width: 160
+  },
+  link: {
+    display: "block",
+    color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[6],
+    fontSize: theme.fontSizes.sm,
+    paddingTop: 3,
+    paddingBottom: 3,
+    "&:hover": {
+      textDecoration: "underline"
+    }
+  },
+  title: {
+    fontSize: theme.fontSizes.md,
+    fontWeight: 700,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    marginBottom: theme.spacing.xs / 2,
+    color: theme.colorScheme === "dark" ? theme.white : theme.black
+  },
+  afterFooter: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: theme.spacing.xl,
+    paddingTop: theme.spacing.xl,
+    paddingBottom: theme.spacing.xl,
+    borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column"
+    }
+  },
+  social: {
+    [theme.fn.smallerThan("sm")]: {
+      marginTop: theme.spacing.xs
+    }
+  }
+}));
+const App = (props) => {
+  const { classes } = useStyles();
+  const account = useAccount(props.account, props.accounts, props.onAccountChange);
+  return /* @__PURE__ */ React__namespace.createElement(
+    core.AppShell,
+    {
+      padding: "xs",
+      navbar: /* @__PURE__ */ React__namespace.createElement(
+        Navbar,
+        {
+          active: props.navbar.props.active,
+          navigate: props.navbar.props.navigate,
+          onLogout: props.navbar.props.onLogout,
+          onSwitchAccounts: () => account.setChangeModalOpen(true)
+        }
+      ),
+      footer: /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !account.opened && /* @__PURE__ */ React__namespace.createElement("footer", { className: classes.footer }, /* @__PURE__ */ React__namespace.createElement(core.Container, { className: classes.inner }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.logo }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "xs" }, /* @__PURE__ */ React__namespace.createElement("div", { style: { width: 15 } }, /* @__PURE__ */ React__namespace.createElement(core.Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })), /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dimmed", size: "h5" }, "Local Civics")), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed", className: classes.description }, "We connect students to powerful civic learning experiences.")), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.groups }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(
+        core.Text,
+        {
+          className: classes.link,
+          component: "a",
+          href: "https://www.localcivics.io",
+          target: "_blank"
+        },
+        "About"
+      ), /* @__PURE__ */ React__namespace.createElement(
+        core.Text,
+        {
+          className: classes.link,
+          component: "a",
+          href: "https://www.localcivics.io/terms-of-service",
+          target: "_blank"
+        },
+        "Terms"
+      ), /* @__PURE__ */ React__namespace.createElement(
+        core.Text,
+        {
+          className: classes.link,
+          component: "a",
+          href: "https://www.localcivics.io/privacy-policy",
+          target: "_blank"
+        },
+        "Privacy"
+      ), /* @__PURE__ */ React__namespace.createElement(
+        core.Text,
+        {
+          className: classes.link,
+          component: "a",
+          href: "https://localcivics.notion.site/Help-Center-b52300f587b64fc0a61f512686e7626d",
+          target: "_blank"
+        },
+        "Help Center"
+      )))), /* @__PURE__ */ React__namespace.createElement(core.Container, { className: classes.afterFooter }, /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm" }, "\xA9 ", new Date().getFullYear(), " Local Civics. All rights reserved."), /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: 0, className: classes.social, position: "right", noWrap: true }, /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { component: "a", target: "_blank", href: "https://www.instagram.com/localcivics/", size: "lg" }, /* @__PURE__ */ React__namespace.createElement(icons.IconBrandInstagram, { size: 18, stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { component: "a", target: "_blank", href: "https://www.linkedin.com/company/localcivics", size: "lg" }, /* @__PURE__ */ React__namespace.createElement(icons.IconBrandLinkedin, { size: 18, stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { component: "a", target: "_blank", href: "https://www.facebook.com/localcivics/", size: "lg" }, /* @__PURE__ */ React__namespace.createElement(icons.IconBrandFacebook, { size: 18, stroke: 1.5 })))))),
+      styles: (theme) => ({
+        main: { backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0] }
+      })
+    },
+    /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, (props.loading || account.opened) && /* @__PURE__ */ React__namespace.createElement(core.Center, { style: { height: 400 } }, /* @__PURE__ */ React__namespace.createElement(core.Loader, null)), !props.loading && !account.opened && props.page),
+    /* @__PURE__ */ React__namespace.createElement(
+      SwitchAccount,
+      {
+        opened: account.opened,
+        account: account.account,
+        accounts: account.accounts,
+        onChange: account.onAccountChange,
+        onClose: () => account.setChangeModalOpen(false)
+      }
+    )
+  );
+};
+const useAccount = (account, accounts, onAccountChange) => {
+  const accountsKey = JSON.stringify(accounts);
+  const [changeModalOpen, setChangeModalOpen] = React.useState(false);
+  const [active, setActive] = React.useState(account);
+  React__namespace.useEffect(() => {
+    setActive(account);
+  }, [account, accountsKey]);
+  return {
+    opened: changeModalOpen,
+    account: active,
+    accounts,
+    setChangeModalOpen,
+    onAccountChange: (account2) => {
+      setActive(account2);
+      setChangeModalOpen(false);
+      onAccountChange(account2);
+    }
+  };
+};
+
+Object.defineProperty(exports, 'showNotification', {
+    enumerable: true,
+    get: function () { return notifications.showNotification; }
+});
+Object.defineProperty(exports, 'updateNotification', {
+    enumerable: true,
+    get: function () { return notifications.updateNotification; }
+});
+exports.AdminProvider = AdminProvider;
+exports.App = App;
+exports.Badge = Badge;
+exports.Badges = Badges;
+exports.Class = Class;
+exports.Classes = Classes;
+exports.Dashboard = Dashboard;
+exports.Home = Home;
+exports.Lesson = Lesson;
+exports.Lessons = Lessons;
+exports.Navbar = Navbar;
+exports.Student = Student;
+exports.SwitchAccount = SwitchAccount;
+//# sourceMappingURL=index.js.map