@local-civics/mgmt-ui 0.1.259 → 0.1.262

package/dist/index.d.ts

@@ -191,6 +191,8 @@ type BadgeProps = {
     statusFilter?: BadgeStudentStatusFilter;
     onStatusFilterChange?: (filter: BadgeStudentStatusFilter) => void;
     onStudentClick?: (userId: string) => void;
+    tab?: string;
+    onTabChange?: (tab: string) => void;
     onBackClick: () => void;
     onClassChange: (classId: string) => void;
     onCopyLinkClick: () => void;
@@ -368,7 +370,7 @@ type StudentProps = {
     name: string;
     impactStatement: string;
     numberOfProblemsSolved: number;
-    percentageOfLessonsCompleted: number;
+    percentageOfLessonsCompleted?: number;
     numberOfLessonsCompleted: number;
     badges: Item$b[];
     lessons: Item$a[];
@@ -485,6 +487,8 @@ type LessonProps = {
     statusFilter?: LessonStudentStatusFilter;
     onStatusFilterChange?: (filter: LessonStudentStatusFilter) => void;
     onStudentClick?: (userId: string) => void;
+    tab?: string;
+    onTabChange?: (tab: string) => void;
     onBackClick: () => void;
     onClassChange: (classId: string) => void;
     onCopyLinkClick: () => void;
@@ -829,6 +833,8 @@ type PathwayProps = {
     breadcrumb?: PageHeaderBreadcrumbSegment[];
     linkState?: any;
     onStudentClick?: (userId: string) => void;
+    tab?: string;
+    onTabChange?: (tab: string) => void;
     onBackClick: () => void;
     onClassChange: (classId: string) => void;
     onCopyLinkClick: () => void;

package/dist/index.js

@@ -687,13 +687,18 @@ const classOptionLabels = (classes) => {
   return labels;
 };
 
-const TABS$4 = [
-  { label: "By lesson", value: "lessons" },
-  { label: "By student", value: "students" }
+const TABS$5 = [
+  { label: "By student", value: "students" },
+  { label: "By lesson", value: "lessons" }
 ];
 const Badge = (props) => {
   const classLabels = classOptionLabels(props.classes || []);
-  const [tab, setTab] = React.useState("lessons");
+  const [localTab, setLocalTab] = React.useState("students");
+  const tab = TABS$5.some((t) => t.value === props.tab) ? props.tab : localTab;
+  const setTab = (next) => {
+    setLocalTab(next);
+    props.onTabChange && props.onTabChange(next);
+  };
   const [search, setSearch] = React.useState("");
   const statusFilter = props.statusFilter || "all";
   const activityLoading = !!props.activityLoading;
@@ -744,7 +749,7 @@ const Badge = (props) => {
     },
     /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
     props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, classLabels[c.classId] || c.name))
-  )), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, !props.trial && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$4.map((t) => /* @__PURE__ */ React__namespace.createElement(
+  )), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, !props.trial && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$5.map((t) => /* @__PURE__ */ React__namespace.createElement(
     "button",
     {
       key: t.value,
@@ -1320,7 +1325,7 @@ function Table$7(props) {
   })));
 }
 
-const TABS$3 = [
+const TABS$4 = [
   { label: "Badges", value: "badges" },
   { label: "Lessons", value: "lessons" }
 ];
@@ -1377,7 +1382,7 @@ const Student = (props) => {
     }
   ), /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
     {
-      title: "PROBLEMS SOLVED",
+      title: "QUESTIONS ANSWERED",
       value: props.numberOfProblemsSolved
     },
     {
@@ -1388,7 +1393,7 @@ const Student = (props) => {
       title: "BADGE COMPLETION",
       value: numberOfBadgesCompleted
     }
-  ] }), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$3.map((t) => /* @__PURE__ */ React__namespace.createElement(
+  ] }), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$4.map((t) => /* @__PURE__ */ React__namespace.createElement(
     "button",
     {
       key: t.value,
@@ -1693,11 +1698,19 @@ function Stack$2(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "…" : "");
 
+const TABS$3 = [
+  { label: "By student", value: "students" },
+  { label: "By question", value: "question" }
+];
 const initialsFor = (name) => name.split(/[ -]/).map((n) => n.charAt(0)).join("").toUpperCase();
 const Lesson = (props) => {
   const classLabels = classOptionLabels(props.classes || []);
-  const [pickedTab, setTab] = React.useState(null);
-  const tab = pickedTab != null ? pickedTab : (props.questions || []).some((q) => q.chart) ? "question" : "students";
+  const [localTab, setLocalTab] = React.useState("students");
+  const tab = TABS$3.some((t) => t.value === props.tab) ? props.tab : localTab;
+  const setTab = (next) => {
+    setLocalTab(next);
+    props.onTabChange && props.onTabChange(next);
+  };
   const [search, setSearch] = React.useState("");
   const statusFilter = props.statusFilter || "all";
   const numberOfStudents = props.students.length;
@@ -1710,10 +1723,6 @@ const Lesson = (props) => {
     (s) => matchesStudentStatus(s, statusFilter) && (!searchLower || (s.name || "").toLowerCase().includes(searchLower))
   );
   const activityLoading = !!props.activityLoading;
-  const tabs = [
-    { label: "By question", value: "question" },
-    { label: "By student", value: "students" }
-  ];
   return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React__namespace.createElement(
     PageHeader,
     {
@@ -1754,7 +1763,7 @@ const Lesson = (props) => {
     },
     /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "All classes"),
     props.classes.map((c) => /* @__PURE__ */ React__namespace.createElement("option", { key: c.classId, value: c.classId }, classLabels[c.classId] || c.name))
-  )), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, tabs.map((t) => /* @__PURE__ */ React__namespace.createElement(
+  )), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS$3.map((t) => /* @__PURE__ */ React__namespace.createElement(
     "button",
     {
       key: t.value,
@@ -3225,13 +3234,18 @@ const CategoryNode = (props) => {
 };
 
 const TABS$2 = [
-  { label: "By Badge", value: "badges" },
-  { label: "By student", value: "students" }
+  { label: "By student", value: "students" },
+  { label: "By Badge", value: "badges" }
 ];
 const Pathway = (props) => {
   var _a, _b, _c;
   const classLabels = classOptionLabels(props.classes || []);
-  const [tab, setTab] = React.useState("badges");
+  const [localTab, setLocalTab] = React.useState("students");
+  const tab = TABS$2.some((t) => t.value === props.tab) ? props.tab : localTab;
+  const setTab = (next) => {
+    setLocalTab(next);
+    props.onTabChange && props.onTabChange(next);
+  };
   const [categoriesOpen, setCategoriesOpen] = React.useState(false);
   const [selectedCategoryId, setSelectedCategoryId] = React.useState(void 0);
   const numberOfStudents = props.students.length;