@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Tables/Progress/ProgressTable.js

@@ -1,882 +0,0 @@
-import { useState, useEffect, Fragment } from "react";
-import { DateTime } from "luxon";
-import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
-const {
-  useQueryClient
-} = ReactQuery;
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { TableSortLabel, Chip } from "@mui/material";
-import IconButton from "@mui/material/IconButton";
-import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import { styled } from "@mui/material/styles";
-import ProgressTableRow from "./ProgressTableRow";
-import { getComparator, stableSort } from "./sorting";
-import { formatMemberCourseCompletions, formatMemberAssignmentCompletions } from "./utils";
-import { exercises, roleplayGames, exerciseDisplayLabels } from "./constants";
-import { TableContainer, Table, TableHead, TableBody } from "./styledComponents";
-// TableContainer, Table, TableHead, TableBody, and HtmlTooltip moved to styledComponents
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function ProgressTable({
-  t = text => text,
-  classroomId,
-  courses = [],
-  members = [],
-  fetchMemberCourseCompletions = () => {},
-  currentView,
-  filter,
-  selectedCourse,
-  setSelectedCourse,
-  deleteCourseId,
-  deleteAssignmentId,
-  selectedSection,
-  setSelectedSection,
-  selectedTopic,
-  setSelectedTopic,
-  selectedRoleplay,
-  setSelectedRoleplay,
-  selectedAssignment,
-  setSelectedAssignment,
-  assignments,
-  hideSorting,
-  roleplays,
-  bots,
-  courseIds,
-  featureFlags,
-  reportType,
-  assignedCourseIds,
-  selectedPhraseList,
-  setSelectedPhraseList
-}) {
-  const phraseLists = selectedTopic?.phraseLists ?? [];
-  const selectedAssignmentTopics = (selectedAssignment?.exercises || [])?.map(e => e.courseSectionTopicId);
-  const currentCourseIds = reportType === "assignments" ? assignedCourseIds : courseIds;
-  const assignmentTopics = courses.flatMap(c => c.sections.flatMap(s => s.topics)).filter(t => selectedAssignmentTopics?.includes(`${t.courseSectionId}|${t.topicId}`));
-  const topics = reportType === "courses" && selectedCourse && selectedSection ? selectedCourse.sections[selectedCourse.sections.findIndex(s => s.sectionId === selectedSection.sectionId)].topics : [];
-  const tableTopics = reportType === "assignments" ? assignmentTopics : topics;
-  const assignmentExercises = reportType === "assignments" && selectedTopic ? (selectedAssignment?.exercises || []).filter(e => e.courseSectionTopicId === `${selectedTopic.courseSectionId}|${selectedTopic.topicId}`) : [];
-  const tableExercises = assignmentExercises && assignmentExercises.length ? exercises.filter(e => assignmentExercises.some(ae => ae.name === e)) : exercises;
-  const tableRoleplays = assignmentExercises && assignmentExercises.length ? roleplays.filter(r => assignmentExercises.some(ae => ae.roleplayId === r.roleplayId)) : roleplays;
-  const tableRoleplayGames = assignmentExercises && assignmentExercises.length && selectedRoleplay ? roleplayGames.filter(rg => assignmentExercises.some(ae => ae.roleplayId === selectedRoleplay.roleplayId && ae.name === `roleplay-${rg}`)) : roleplayGames;
-  const tableBots = assignmentExercises && assignmentExercises.length ? bots.filter(b => assignmentExercises.some(ae => ae.botId === b.botId)) : bots;
-  const tablePhraseLists = assignmentExercises && assignmentExercises.length ? phraseLists.filter(pl => assignmentExercises.some(ae => ae.phraseListId === pl.phraseListId)) : phraseLists;
-  const hasMeaningForSelectedPhraseList = selectedPhraseList?.phrases?.some(p => p.definitions?.length > 0) && !selectedPhraseList?.hiddenPhraseGroupGames?.meaning;
-  const allPhraseListExercises = ["translation", "listening", "pronunciation", ...(hasMeaningForSelectedPhraseList ? ["meaning", "meaning-listen-and-speak", "meaning-read-and-write"] : [])];
-  const assignmentPhraseListExercises = reportType === "assignments" && selectedPhraseList ? (selectedAssignment?.exercises || []).filter(e => e.phraseListId === selectedPhraseList.phraseListId) : [];
-  const tablePhraseListExercises = assignmentPhraseListExercises.length ? allPhraseListExercises.filter(e => assignmentPhraseListExercises.some(ae => ae.name === e)) : allPhraseListExercises;
-  const [sortDirection, setSortDirection] = useState("asc");
-  const [sortColumn, setSortColumn] = useState("student");
-  const [membersState, setMembersState] = useState([]);
-  const queryClient = useQueryClient();
-  useEffect(() => {
-    const opts = {
-      filter,
-      queryClient,
-      currentCourseIds,
-      currentView,
-      courses,
-      assignmentExercises,
-      selectedAssignment,
-      selectedCourse,
-      selectedSection,
-      reportType,
-      formatMemberCourseCompletions,
-      formatMemberAssignmentCompletions
-    };
-    setMembersState(stableSort(members, sortColumn, getComparator(sortDirection, opts))); // sort alphabetically by default
-  }, [filter, members]);
-  const handleSort = property => {
-    const isAsc = sortColumn === property && sortDirection === "asc";
-    setSortDirection(isAsc ? "desc" : "asc");
-    setSortColumn(property);
-    const opts = {
-      filter,
-      queryClient,
-      currentCourseIds,
-      currentView,
-      courses,
-      assignmentExercises,
-      selectedAssignment,
-      selectedCourse,
-      selectedSection,
-      reportType,
-      formatMemberCourseCompletions,
-      formatMemberAssignmentCompletions
-    };
-    const sorted = stableSort(members, property, getComparator(isAsc ? "desc" : "asc", opts));
-    setMembersState(sorted);
-  };
-
-  // Use shared HtmlTooltip for challenge bot tooltip
-
-  const ChallengeBotHtmlTooltip = styled(({
-    className,
-    ...props
-  }) => /*#__PURE__*/_jsx(Tooltip, {
-    ...props,
-    classes: {
-      popper: className
-    },
-    title: /*#__PURE__*/_jsxs(Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        style: {
-          fontWeight: "bold",
-          marginBottom: "8px"
-        },
-        children: t("challenge_mode")
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          marginBottom: "8px"
-        },
-        children: t("challenge_bot_desc")
-      })]
-    })
-  }))(({
-    theme
-  }) => ({
-    [`& .${tooltipClasses.tooltip}`]: {
-      padding: theme.spacing(2),
-      backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.primary,
-      fontSize: theme.typography.pxToRem(12),
-      border: `1px solid ${theme.palette.divider}`
-    },
-    [`& ul`]: {
-      listStyleType: "disc",
-      paddingLeft: theme.spacing(2),
-      margin: 0
-    },
-    [`& li`]: {
-      display: "list-item",
-      marginBottom: theme.spacing(0.5)
-    }
-  }));
-  return /*#__PURE__*/_jsx(TableContainer, {
-    children: /*#__PURE__*/_jsxs(Table, {
-      children: [/*#__PURE__*/_jsx(TableHead, {
-        children: /*#__PURE__*/_jsxs("tr", {
-          children: [/*#__PURE__*/_jsxs("th", {
-            scope: "col",
-            children: [reportType === "courses" && currentView === "all_courses" && /*#__PURE__*/_jsx(Box, {
-              sx: {
-                width: "100%",
-                justifyContent: "center"
-              },
-              children: /*#__PURE__*/_jsx(TableSortLabel, {
-                active: sortColumn === "student" && !hideSorting,
-                direction: sortDirection || "asc",
-                onClick: () => {
-                  handleSort("student");
-                },
-                disabled: hideSorting,
-                children: /*#__PURE__*/_jsx(Typography, {
-                  variant: "subtitle1",
-                  component: "div",
-                  sx: {
-                    fontWeight: "bold"
-                  },
-                  children: t("courses")
-                })
-              })
-            }), currentView === "course" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  // padding: `${theme.spacing(2)} !important`,
-                  // minWidth: `250px !important`,
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => deleteCourseId(),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsx(TableSortLabel, {
-                  active: sortColumn === "student" && !hideSorting,
-                  direction: sortDirection || "asc",
-                  onClick: () => {
-                    handleSort("student");
-                  },
-                  disabled: hideSorting,
-                  children: /*#__PURE__*/_jsxs(Box, {
-                    sx: {
-                      flex: "1 1 auto",
-                      textAlign: "left"
-                    },
-                    children: [/*#__PURE__*/_jsx(Typography, {
-                      variant: selectedCourse ? "caption" : "subtitle1",
-                      component: "div",
-                      sx: {
-                        fontWeight: "bold"
-                      },
-                      children: t("courses")
-                    }), /*#__PURE__*/_jsx(Typography, {
-                      variant: "subtitle1",
-                      component: "div",
-                      sx: {
-                        fontWeight: "bold"
-                      },
-                      children: selectedCourse.courseName
-                    })]
-                  })
-                })]
-              })
-            }), currentView === "section" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  // padding: `${theme.spacing(2)} !important`,
-                  // minWidth: `250px !important`,
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => setSelectedSection(null),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsx(TableSortLabel, {
-                  active: sortColumn === "student" && !hideSorting,
-                  direction: sortDirection || "asc",
-                  onClick: () => {
-                    handleSort("student");
-                  },
-                  disabled: hideSorting,
-                  children: /*#__PURE__*/_jsxs(Box, {
-                    sx: {
-                      flex: "1 1 auto",
-                      textAlign: "left"
-                    },
-                    children: [/*#__PURE__*/_jsxs(Typography, {
-                      variant: "caption",
-                      component: "div",
-                      sx: {
-                        fontWeight: "bold"
-                      },
-                      children: [t("courses"), " | ", selectedCourse.courseName]
-                    }), /*#__PURE__*/_jsx(Typography, {
-                      variant: "subtitle1",
-                      component: "div",
-                      sx: {
-                        fontWeight: "bold"
-                      },
-                      children: selectedSection.sectionName
-                    })]
-                  })
-                })]
-              })
-            }), currentView === "topic" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  // padding: `${theme.spacing(2)} !important`,
-                  // minWidth: `250px !important`,
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => setSelectedTopic(null),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    flex: "1 1 auto",
-                    textAlign: "left"
-                  },
-                  children: [/*#__PURE__*/_jsxs(Typography, {
-                    variant: "caption",
-                    component: "h3",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: [t("courses"), " | ", selectedCourse.courseName]
-                  }), /*#__PURE__*/_jsxs(Typography, {
-                    variant: "subtitle1",
-                    component: "div",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: [selectedSection.sectionName, " |", " ", selectedTopic.topicName]
-                  })]
-                })]
-              })
-            }), currentView === "roleplay" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  // padding: `${theme.spacing(2)} !important`,
-                  // minWidth: `250px !important`,
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => setSelectedRoleplay(null),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    flex: "1 1 auto",
-                    textAlign: "left"
-                  },
-                  children: [/*#__PURE__*/_jsxs(Typography, {
-                    variant: "caption",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: [selectedCourse.courseName, " |", " ", selectedSection.sectionName]
-                  }), /*#__PURE__*/_jsxs(Typography, {
-                    variant: "subtitle1",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: [selectedTopic.topicName, " |", " ", selectedRoleplay.roleplayName]
-                  })]
-                })]
-              })
-            }), reportType === "assignments" && currentView === "assignments" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsx(Box, {
-                sx: () => ({
-                  width: "100%",
-                  justifyContent: "center"
-                }),
-                children: /*#__PURE__*/_jsx(TableSortLabel, {
-                  active: sortColumn === "student" && !hideSorting,
-                  direction: sortDirection || "asc",
-                  onClick: () => {
-                    handleSort("student");
-                  },
-                  disabled: hideSorting,
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle1",
-                    component: "div",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: t("assignments")
-                  })
-                })
-              })
-            }), reportType === "assignments" && currentView === "assignment-topics" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  // padding: `${theme.spacing(2)} !important`,
-                  // minWidth: `250px !important`,
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => deleteAssignmentId(),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsx(TableSortLabel, {
-                  active: sortColumn === "student" && !hideSorting,
-                  direction: sortDirection || "asc",
-                  onClick: () => {
-                    handleSort("student");
-                  },
-                  disabled: hideSorting,
-                  children: /*#__PURE__*/_jsxs(Box, {
-                    sx: {
-                      flex: "1 1 auto",
-                      textAlign: "left"
-                    },
-                    children: [/*#__PURE__*/_jsx(Typography, {
-                      variant: "caption",
-                      component: "div",
-                      children: `${selectedAssignment?.assignedStudents.length}
-                              ${t("assigned")} | ${t("due_date")} ${DateTime.fromISO(selectedAssignment?.dueDate).toLocaleString(DateTime.DATE_MED)}`
-                    }), /*#__PURE__*/_jsx(Typography, {
-                      variant: "subtitle1",
-                      component: "div",
-                      sx: {
-                        fontWeight: "bold"
-                      },
-                      children: selectedAssignment?.title
-                    })]
-                  })
-                })]
-              })
-            }), reportType === "assignments" && currentView === "assignment-topic" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  // padding: `${theme.spacing(2)} !important`,
-                  // minWidth: `250px !important`,
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => setSelectedTopic(null),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    flex: "1 1 auto",
-                    textAlign: "left"
-                  },
-                  children: [/*#__PURE__*/_jsx(Typography, {
-                    variant: "caption",
-                    component: "h3",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: selectedAssignment?.title
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle1",
-                    component: "div",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: selectedTopic.topicName
-                  })]
-                })]
-              })
-            }), reportType === "assignments" && currentView === "assignment-roleplay" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  // padding: `${theme.spacing(2)} !important`,
-                  // minWidth: `250px !important`,
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => setSelectedRoleplay(null),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    flex: "1 1 auto",
-                    textAlign: "left"
-                  },
-                  children: [/*#__PURE__*/_jsxs(Typography, {
-                    variant: "caption",
-                    component: "h3",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: [selectedAssignment?.title, " |", " ", selectedTopic.topicName]
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle1",
-                    component: "div",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: selectedRoleplay.roleplayName
-                  })]
-                })]
-              })
-            }), currentView === "phrase-list" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => setSelectedPhraseList(null),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    flex: "1 1 auto",
-                    textAlign: "left"
-                  },
-                  children: [/*#__PURE__*/_jsxs(Typography, {
-                    variant: "caption",
-                    component: "h3",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: [t("courses"), " | ", selectedCourse.courseName, " |", " ", selectedSection.sectionName, " | ", selectedTopic.topicName]
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle1",
-                    component: "div",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: selectedPhraseList?.phraseListName
-                  })]
-                })]
-              })
-            }), reportType === "assignments" && currentView === "assignment-phrase-list" && /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: () => ({
-                  display: "flex",
-                  textAlign: "left",
-                  alignItems: "center"
-                }),
-                children: [/*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    minWidth: 56
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => setSelectedPhraseList(null),
-                    children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-                  })
-                }), /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    flex: "1 1 auto",
-                    textAlign: "left"
-                  },
-                  children: [/*#__PURE__*/_jsxs(Typography, {
-                    variant: "caption",
-                    component: "h3",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: [selectedAssignment?.title, " | ", selectedTopic.topicName]
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle1",
-                    component: "div",
-                    sx: {
-                      fontWeight: "bold"
-                    },
-                    children: selectedPhraseList?.phraseListName
-                  })]
-                })]
-              })
-            })]
-          }), reportType === "courses" && currentView === "all_courses" && courses.map((c, i) => /*#__PURE__*/_jsxs("th", {
-            scope: "col",
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                width: "100%",
-                justifyContent: "center"
-              },
-              children: /*#__PURE__*/_jsx(TableSortLabel, {
-                active: sortColumn === c.courseId,
-                direction: sortDirection || "asc",
-                onClick: () => {
-                  handleSort(c.courseId);
-                },
-                disabled: hideSorting,
-                children: /*#__PURE__*/_jsx(Typography, {
-                  variant: "subtitle1",
-                  component: "div",
-                  sx: {
-                    fontWeight: "bold",
-                    marginLeft: "20px"
-                  },
-                  children: c.courseName
-                }, `student-progress-courses-${i}`)
-              })
-            }), /*#__PURE__*/_jsx(DefaultButton, {
-              "aria-expanded": Boolean(currentView === "course"),
-              tabIndex: 0,
-              endIcon: /*#__PURE__*/_jsx(ArrowForwardIcon, {}),
-              size: "small",
-              onClick: () => setSelectedCourse(c),
-              sx: {
-                fontSize: "0.75rem",
-                "@media print": {
-                  display: "none"
-                }
-              },
-              children: t("view_course")
-            })]
-          }, i)), reportType === "courses" && currentView === "course" && selectedCourse.sections.map((s, i) => /*#__PURE__*/_jsxs("th", {
-            scope: "col",
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                width: "100%",
-                justifyContent: "center"
-              },
-              children: /*#__PURE__*/_jsx(TableSortLabel, {
-                active: sortColumn === s.sectionId,
-                direction: sortDirection || "asc",
-                onClick: () => {
-                  handleSort(s.sectionId);
-                },
-                disabled: hideSorting,
-                children: /*#__PURE__*/_jsx(Typography, {
-                  variant: "subtitle1",
-                  component: "div",
-                  sx: {
-                    fontWeight: "bold",
-                    marginLeft: "20px"
-                  },
-                  children: s.sectionName
-                }, `student-progress-courses-${i}`)
-              })
-            }), /*#__PURE__*/_jsx(DefaultButton, {
-              "aria-expanded": Boolean(currentView === "section"),
-              endIcon: /*#__PURE__*/_jsx(ArrowForwardIcon, {}),
-              size: "small",
-              onClick: () => setSelectedSection(s),
-              sx: {
-                fontSize: "0.75rem",
-                "@media print": {
-                  display: "none"
-                }
-              },
-              children: t("view_section")
-            })]
-          }, i)), (currentView === "section" || currentView === "assignment-topics") && tableTopics.map((tpc, i) => /*#__PURE__*/_jsxs("th", {
-            scope: "col",
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                width: "100%",
-                justifyContent: "center"
-              },
-              children: /*#__PURE__*/_jsx(TableSortLabel, {
-                active: sortColumn === tpc.topicId,
-                direction: sortDirection || "asc",
-                onClick: () => {
-                  if (currentView === "assignment-topics") {
-                    handleSort(`${tpc.courseSectionId}|${tpc.topicId}`);
-                  } else {
-                    handleSort(tpc.topicId);
-                  }
-                },
-                disabled: hideSorting,
-                children: /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    flex: "1 1 auto"
-                  },
-                  children: [reportType === "assignments" && /*#__PURE__*/_jsx(Typography, {
-                    variant: "caption",
-                    component: "div",
-                    sx: {
-                      marginLeft: "20px"
-                    },
-                    children: courses[courses.findIndex(c => c.courseId === tpc.courseSectionId.split("|")[0])].courseName
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle1",
-                    component: "div",
-                    sx: {
-                      fontWeight: "bold",
-                      marginLeft: "20px"
-                    },
-                    children: tpc.topicName
-                  })]
-                }, `student-progress-courses-${i}`)
-              })
-            }), /*#__PURE__*/_jsx(DefaultButton, {
-              "aria-expanded": Boolean(currentView === "topic"),
-              endIcon: /*#__PURE__*/_jsx(ArrowForwardIcon, {}),
-              size: "small",
-              onClick: () => setSelectedTopic(tpc),
-              sx: {
-                fontSize: "0.75rem",
-                "@media print": {
-                  display: "none"
-                }
-              },
-              children: t("view_topic")
-            })]
-          }, i)), (currentView === "topic" || currentView === "assignment-topic") && tablePhraseLists.map((phraseList, i) => /*#__PURE__*/_jsxs("th", {
-            scope: "col",
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle1",
-              component: "div",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: phraseList.phraseListName
-            }), /*#__PURE__*/_jsx(DefaultButton, {
-              endIcon: /*#__PURE__*/_jsx(ArrowForwardIcon, {}),
-              size: "small",
-              onClick: () => setSelectedPhraseList(phraseList),
-              sx: {
-                fontSize: "0.75rem",
-                "@media print": {
-                  display: "none"
-                }
-              },
-              children: t("view_phrase_list")
-            })]
-          }, i)), (currentView === "phrase-list" || currentView === "assignment-phrase-list") && tablePhraseListExercises.map((exercise, i) => /*#__PURE__*/_jsx("th", {
-            scope: "col",
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle1",
-              component: "div",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: exerciseDisplayLabels[exercise] || t(exercise)
-            })
-          }, i)), (currentView === "topic" || currentView === "assignment-topic") && tableRoleplays?.length > 0 && tableRoleplays.map((roleplay, i) => /*#__PURE__*/_jsxs("th", {
-            scope: "col",
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                width: "100%",
-                justifyContent: "center"
-              },
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "subtitle1",
-                component: "div",
-                sx: {
-                  fontWeight: "bold"
-                },
-                children: roleplay.roleplayName
-              })
-            }), /*#__PURE__*/_jsx(DefaultButton, {
-              "aria-expanded": Boolean(currentView === "roleplay"),
-              endIcon: /*#__PURE__*/_jsx(ArrowForwardIcon, {}),
-              size: "small",
-              onClick: () => setSelectedRoleplay(roleplay),
-              sx: {
-                fontSize: "0.75rem",
-                "@media print": {
-                  display: "none"
-                }
-              },
-              children: t("view_roleplay")
-            })]
-          }, i)), (currentView === "topic" || currentView === "assignment-topic") && tableBots?.length > 0 && tableBots.map((bot, i) => /*#__PURE__*/_jsx("th", {
-            scope: "col",
-            children: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: 0.5
-              },
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "subtitle1",
-                sx: {
-                  fontWeight: "bold"
-                },
-                children: bot.botName
-              }, `student-progress-exercises-name-${i}`), bot.isChallengeBot && /*#__PURE__*/_jsx(ChallengeBotHtmlTooltip, {
-                placement: "right",
-                children: /*#__PURE__*/_jsx(Chip, {
-                  label: t("challenge_bot"),
-                  size: "small",
-                  variant: "outlined",
-                  color: "primary",
-                  sx: {
-                    fontWeight: "normal"
-                  }
-                })
-              })]
-            })
-          }, i)), (currentView === "roleplay" || currentView === "assignment-roleplay") && tableRoleplayGames.map((roleplay, i) => /*#__PURE__*/_jsx("th", {
-            scope: "col",
-            children: /*#__PURE__*/_jsx(Typography, {
-              sx: {
-                fontWeight: "bold"
-              },
-              children: t(roleplay.replaceAll("-", "_"))
-            })
-          }, i)), currentView === "assignments" && assignments.map((assignment, i) => /*#__PURE__*/_jsxs("th", {
-            scope: "col",
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                width: "100%",
-                justifyContent: "center"
-              },
-              children: /*#__PURE__*/_jsx(TableSortLabel, {
-                active: sortColumn === assignment.assignmentId,
-                direction: sortDirection || "asc",
-                onClick: () => {
-                  handleSort(assignment.assignmentId);
-                },
-                disabled: hideSorting,
-                children: /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    flex: "1 1 auto"
-                  },
-                  children: [/*#__PURE__*/_jsx(Typography, {
-                    variant: "caption",
-                    component: "div",
-                    sx: {
-                      marginLeft: "20px"
-                    },
-                    children: `${DateTime.fromISO(assignment?.dueDate).toLocaleString(DateTime.DATE_MED)}`
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle1",
-                    component: "div",
-                    sx: {
-                      fontWeight: "bold",
-                      marginLeft: "20px"
-                    },
-                    children: assignment.title
-                  })]
-                })
-              })
-            }), /*#__PURE__*/_jsx(DefaultButton, {
-              "aria-expanded": Boolean(currentView === "assignments"),
-              tabIndex: 0,
-              endIcon: /*#__PURE__*/_jsx(ArrowForwardIcon, {}),
-              size: "small",
-              onClick: () => setSelectedAssignment(assignment),
-              sx: {
-                fontSize: "0.75rem",
-                "@media print": {
-                  display: "none"
-                }
-              },
-              children: t("view_assignment")
-            })]
-          }, i))]
-        })
-      }), /*#__PURE__*/_jsx(TableBody, {
-        children: membersState.length > 0 && membersState.map((member, i) => /*#__PURE__*/_jsx(ProgressTableRow, {
-          t: t,
-          classroomId: classroomId,
-          member: member,
-          courses: courses,
-          selectedCourse: selectedCourse,
-          selectedSection: selectedSection,
-          selectedTopic: selectedTopic,
-          selectedRoleplay: selectedRoleplay,
-          selectedPhraseList: selectedPhraseList,
-          phraseLists: tablePhraseLists,
-          selectedAssignment: selectedAssignment,
-          fetchMemberCourseCompletions: fetchMemberCourseCompletions,
-          currentView: currentView,
-          filter: filter,
-          index: i,
-          featureFlags: featureFlags,
-          reportType: reportType,
-          tableExercises: tableExercises,
-          tablePhraseListExercises: tablePhraseListExercises,
-          tableRoleplays: tableRoleplays,
-          tableRoleplayGames: tableRoleplayGames,
-          tableBots: tableBots,
-          tableTopics: tableTopics,
-          assignments: assignments,
-          courseIds: currentCourseIds
-        }, `student-progress-table-row-${i}`))
-      })]
-    })
-  });
-}
-export default ProgressTable;