@nualang/nualang-ui-components 0.1.1380 → 0.1.1382

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -36,6 +36,8 @@ function Course({
   isReadWriteModeStudent
 }) {
   const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split("|") : [];
+  const assignmentExercises = assignment?.exercises;
+  const filteredSelectedExercises = useMemo(() => (assignmentExercises ?? selectedExercises)?.filter(exercise => exercise?.roleplayId || exercise?.courseSectionTopicId?.split("|")[0] === course?.courseId), [assignmentExercises, selectedExercises, course?.courseId]);
   const [open, setOpen] = useState(false);
   useEffect(() => {
     if (lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment?.assignmentId}`) || numOfIds.length === 5 && lastClickedExerciseId.split("|")[3] === assignment?.assignmentId)) {
@@ -58,21 +60,13 @@ function Course({
     enabled: !!course.courseId && isDialogOpen
   });
   useEffect(() => {
-    assignment?.exercises?.forEach(exercise => {
+    filteredSelectedExercises?.forEach(exercise => {
       if (exercise.courseSectionTopicId) {
         const sectionId = exercise.courseSectionTopicId.split("|")[1];
         setSelectedSectionIds(prev => [...prev, sectionId]);
       }
     });
-  }, [selectedExercises]);
-  useEffect(() => {
-    selectedExercises?.forEach(exercise => {
-      if (exercise.courseSectionTopicId) {
-        const sectionId = exercise.courseSectionTopicId.split("|")[1];
-        setSelectedSectionIds(prev => [...prev, sectionId]);
-      }
-    });
-  }, [selectedExercises]);
+  }, [filteredSelectedExercises]);
   const courseSections = useMemo(() => sectionsQuery.isSuccess && Array.isArray(sectionsQuery.data.Items) && sectionsQuery.data.Items.length ? sectionsQuery.data.Items : [], [sectionsQuery.data, sectionsQuery.isSuccess]);
   const isCourseEmpty = courseSections.length === 0 && !sectionsQuery.isLoading ? true : false;
   useEffect(() => {
@@ -82,18 +76,18 @@ function Course({
   }, [courseSections, selectedSectionIds, viewOnly]);
   useEffect(() => {
     const assignedSectionIds = new Set();
-    assignment?.exercises?.forEach(exercise => {
+    assignmentExercises?.forEach(exercise => {
       if (exercise.courseSectionTopicId) {
         const sectionId = exercise.courseSectionTopicId.split("|")[1];
         assignedSectionIds.add(sectionId);
       }
     });
-    if (courseSections && memberCourseCompletions && selectedExercises) {
-      const sectionsWithProgress = calcCompletions(courseSections.filter(section => assignedSectionIds.has(section.sectionId)), memberCourseCompletions, selectedExercises, isChallengeModeStudent, isReadWriteModeStudent);
+    if (courseSections && memberCourseCompletions && filteredSelectedExercises) {
+      const sectionsWithProgress = calcCompletions(courseSections.filter(section => assignedSectionIds.has(section.sectionId)), memberCourseCompletions, filteredSelectedExercises, isChallengeModeStudent, isReadWriteModeStudent);
       const percentCompletion = calcPercentageCompletion(sectionsWithProgress);
       setCourseSectionCompletion(percentCompletion);
     }
-  }, [courseSections, memberCourseCompletions, selectedExercises, isChallengeModeStudent, isReadWriteModeStudent]);
+  }, [courseSections, memberCourseCompletions, filteredSelectedExercises, isChallengeModeStudent, isReadWriteModeStudent, assignmentExercises]);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: useCase === "assignment-select" ? /*#__PURE__*/_jsxs(List, {
       disablePadding: true,
@@ -167,7 +161,7 @@ function Course({
             setIsExerciseSelected: setIsExerciseSelected,
             getRoleplays: getRoleplays,
             handleSelectExercise: handleSelectExercise,
-            selectedExercises: selectedExercises,
+            selectedExercises: filteredSelectedExercises,
             useCase: useCase,
             assignment: assignment,
             handleStartExercise: handleStartExercise,
@@ -255,7 +249,7 @@ function AssignmentCourseSelection({
       isExerciseSelected: isExerciseSelected,
       setIsExerciseSelected: setIsExerciseSelected,
       handleSelectExercise: handleSelectExercise,
-      selectedExercises: assignment ? assignment.exercises?.filter(exercise => exercise?.roleplayId || exercise?.courseSectionTopicId?.split("|")[0] === course?.courseId) : selectedExercises?.filter(exercise => exercise?.roleplayId || exercise?.courseSectionTopicId?.split("|")[0] === course?.courseId),
+      selectedExercises: selectedExercises,
       useCase: useCase,
       assignment: assignment,
       handleStartExercise: handleStartExercise,

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -13,7 +13,7 @@ import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
 import AssignmentRoleplaySelection from "../AssignmentRoleplaySelection/AssignmentRoleplaySelection";
 import { CardInfoSectionItem } from "../../Cards/CardElements";
 import { getCourseSectionTopicProgress } from "@nualang/nualang-api-and-queries/APIs/Progress";
-import { progress as progressQuerys, courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
+import { progress as progressQuerys } from "@nualang/nualang-api-and-queries/Queries";
 import { useNavigate, useParams } from "react-router";
 import { ProgressBadge, InProgressBadge } from "../../Lists/Exercises/Exercises";
 import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
@@ -384,25 +384,14 @@ function Topic({
   handleRemoveExercise,
   isPreview,
   isChallengeModeStudent,
+  phraseLists: rawPhraseLists = [],
   ...otherProps
 }) {
   const theme = useTheme();
   const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
   const topicRef = useRef(null);
   const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split("|") : [];
-  const phraseListsQuery = courseQuerys.useCourseSectionTopicPhraseLists(undefined, {
-    courseId,
-    sectionId,
-    topicId,
-    filters: {
-      includePhrases: "true"
-    }
-  }, {
-    enabled: !!courseId && !!sectionId && !!topicId
-  });
-  const phraseLists = phraseListsQuery.isSuccess && phraseListsQuery.data && Array.isArray(phraseListsQuery.data.Items) ? phraseListsQuery.data.Items.filter(pl => pl.phrases && pl.phrases.length > 0) : [];
-
-  // Define a single variable for clarity
+  const phraseLists = rawPhraseLists.filter(pl => pl.phrases && pl.phrases.length > 0);
   const matchesLastClickedExercise = lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) && numOfIds[2] === topicId || numOfIds.length === 5 && numOfIds[3] === assignment.assignmentId && numOfIds[2] === topicId);
   const [isExerciseListOpen, setExerciseListOpen] = useState(false);
   useEffect(() => {

package/dist/Lists/Exercises/Exercises.js

@@ -934,7 +934,6 @@ function Exercises(props) {
     t = text => text,
     isLoading,
     phrases = [],
-    phraseLists = [],
     completions = [],
     roleplays = [],
     bots = [],
@@ -974,7 +973,8 @@ function Exercises(props) {
     updatePhraseLists,
     courseSettings,
     parentClassroom,
-    isChallengeModeStudent
+    isChallengeModeStudent,
+    topicInfo
   } = props;
   const params = useParams();
   const {
@@ -1033,10 +1033,10 @@ function Exercises(props) {
   // ── phraseLists drag state ──
   const [phraseListsArray, setPhraseListsArray] = useState([]);
   useEffect(() => {
-    if (phraseLists && Array.isArray(phraseLists)) {
-      setPhraseListsArray([...phraseLists].sort((a, b) => (a.idx || 0) - (b.idx || 0)));
+    if (topicInfo?.phraseLists && Array.isArray(topicInfo.phraseLists)) {
+      setPhraseListsArray([...topicInfo.phraseLists].sort((a, b) => (a.idx || 0) - (b.idx || 0)));
     }
-  }, [JSON.stringify(phraseLists)]);
+  }, [JSON.stringify(topicInfo?.phraseLists)]);
   const onDropPhraseList = () => {
     if (updatePhraseLists) updatePhraseLists(phraseListsArray);
   };

package/dist/Screens/Courses/ViewCourse/ViewTopic/ViewTopic.js

@@ -430,7 +430,6 @@ function Topic({
   isClassroomCreator,
   isVideoChatEnabled,
   isVideoChatEnabledInSettings,
-  phraseLists = [],
   handleCreatePhraseList,
   handleUpdatePhraseList,
   handleDeletePhraseList,
@@ -718,7 +717,6 @@ function Topic({
         isMember: isMember,
         isChallengeModeStudent: isChallengeModeStudent,
         phrases: phrases,
-        phraseLists: phraseLists,
         completions: completions,
         roleplays: roleplays,
         bots: bots,

package/dist/Tables/Progress/Progress.js

@@ -28,7 +28,6 @@ function Progress({
   memberId,
   username,
   getCourseSections = () => {},
-  getCourseSectionTopicPhraseLists = () => {},
   submissions,
   courseIds,
   featureFlags,
@@ -43,8 +42,7 @@ function Progress({
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const {
     useQueryClient,
-    useQueries,
-    useQuery
+    useQueries
   } = ReactQuery;
   const queryClient = useQueryClient();
   const [selectedAssignment, setSelectedAssignment] = useState(null);
@@ -55,35 +53,11 @@ function Progress({
   const [selectedPhraseList, setSelectedPhraseList] = useState(null);
   const [roleplays, setRoleplays] = useState([]);
   const [bots, setBots] = useState([]);
-  const [phraseLists, setPhraseLists] = useState([]);
   const reportFilters = ["percentage_complete", "correct_answer_percentage", "avg_pronunciation_score"];
   const [filter, setFilter] = useState(reportFilters[0]);
   const reportTypes = useMemo(() => isVideoChatEnabled ? ["courses", "assignments", "discuss"] : ["courses", "assignments"], [isVideoChatEnabled]);
   const availableReportTypes = useMemo(() => memberId ? ["courses", "assignments"] : reportTypes, [memberId, reportTypes]);
   const [reportType, setReportType] = useState(availableReportTypes[0]);
-  useEffect(() => {
-    if (selectedTopic) {
-      setRoleplays(selectedTopic?.roleplays);
-      setBots(selectedTopic?.bots);
-    } else {
-      setSelectedPhraseList(null);
-      setPhraseLists([]);
-    }
-  }, [selectedTopic]);
-  const selectedTopicCoords = selectedTopic ? [...selectedTopic.courseSectionId.split("|"), selectedTopic.topicId] : [];
-  const topicPhraseListsQuery = useQuery({
-    queryKey: ["courseSectionTopicPhraseLists", ...selectedTopicCoords],
-    queryFn: () => {
-      const [courseId, sectionId] = selectedTopic.courseSectionId.split("|");
-      return getCourseSectionTopicPhraseLists(courseId, sectionId, selectedTopic.topicId);
-    },
-    enabled: !!selectedTopic
-  });
-  useEffect(() => {
-    if (topicPhraseListsQuery.isSuccess && topicPhraseListsQuery.data?.Items) {
-      setPhraseLists(topicPhraseListsQuery.data.Items);
-    }
-  }, [topicPhraseListsQuery.data, topicPhraseListsQuery.isSuccess]);
   const currentCourses = reportType === "assignments" ? assignedCourses : courses;
   const courseSectionsQueries = useQueries({
     queries: (currentCourses || []).map(({
@@ -112,6 +86,15 @@ function Progress({
       return [];
     }
   }, [currentCourses, courseSectionsQueriesIsLoading]);
+  useEffect(() => {
+    if (selectedTopic) {
+      setSelectedPhraseList(null);
+      setRoleplays(selectedTopic?.roleplays);
+      setBots(selectedTopic?.bots);
+    } else {
+      setSelectedPhraseList(null);
+    }
+  }, [selectedTopic, coursesWithSections]);
   const deleteCourseId = () => {
     if ("URLSearchParams" in window) {
       const searchParams = searchStringToObj(window.location.search);
@@ -147,8 +130,7 @@ function Progress({
     selectedRoleplay,
     setSelectedRoleplay,
     selectedPhraseList,
-    setSelectedPhraseList,
-    phraseLists
+    setSelectedPhraseList
   });
   const [selectedMembers, setSelectedMembers] = useState([]);
   const assignedStudents = assignmentMembersById && assignmentMembersById[selectedAssignment?.assignmentId] || [];
@@ -417,7 +399,6 @@ function Progress({
         setSelectedRoleplay: setSelectedRoleplay,
         selectedPhraseList: selectedPhraseList,
         setSelectedPhraseList: setSelectedPhraseList,
-        phraseLists: phraseLists,
         selectedAssignment: selectedAssignment,
         setSelectedAssignment: setSelectedAssignment,
         assignments: assignments,
@@ -497,7 +478,6 @@ function Progress({
       setSelectedRoleplay: setSelectedRoleplay,
       selectedPhraseList: selectedPhraseList,
       setSelectedPhraseList: setSelectedPhraseList,
-      phraseLists: phraseLists,
       selectedAssignment: selectedAssignment,
       setSelectedAssignment: setSelectedAssignment,
       assignments: assignments,

package/dist/Tables/Progress/ProgressList.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import PropTypes from "prop-types";
 import { Link as RouterLink } from "react-router";
 import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
@@ -450,26 +450,26 @@ function MemberListItem({
   bots,
   selectedRoleplay,
   setSelectedRoleplay,
-  phraseLists,
   selectedPhraseList,
   setSelectedPhraseList
 }) {
+  const phraseLists = selectedTopic?.phraseLists ?? [];
   const {
     memberId
   } = member;
   const courseIds = courses.map(c => c.courseId).toString();
-  const {
-    data = {},
-    error,
-    isLoading
-  } = useQuery({
+  const memberCourseCompletionsQuery = useQuery({
     queryKey: ["memberCourseProgress", memberId, courseIds],
     queryFn: async () => {
-      const memberCourseCompletions = await fetchMemberCourseCompletions(memberId, courseIds);
-      return formatMemberCourseCompletions(courses, memberCourseCompletions.Items);
+      return fetchMemberCourseCompletions(memberId, courseIds);
     },
     staleTime: 500000
   });
+  const {
+    error,
+    isLoading
+  } = memberCourseCompletionsQuery;
+  const data = useMemo(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data?.Items) ? formatMemberCourseCompletions(courses, memberCourseCompletionsQuery.data.Items, null, false, null, "course", false) : {}, [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, courses]);
   let memberActivityLink = `/classrooms/${classroomId}/activity/member/${member.memberId}`;
   if (currentView === "course") {
     memberActivityLink = `${memberActivityLink}/${selectedCourse.courseId}`;
@@ -482,7 +482,8 @@ function MemberListItem({
   const handleClick = () => {
     setOpen(!open);
   };
-  const exercisesArray = exercises;
+  const hasMeaningForSelectedPhraseList = selectedPhraseList?.phrases?.some(p => p.definitions?.length > 0) && !selectedPhraseList?.hiddenPhraseGroupGames?.meaning;
+  const exercisesArray = [...exercises, ...(hasMeaningForSelectedPhraseList ? ["meaning"] : [])];
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(ListItem, {
       secondaryAction: /*#__PURE__*/_jsx(IconButton, {
@@ -563,7 +564,8 @@ function MemberListItem({
         }, `student-progress-data-cell-${i}`);
       }), currentView === "topic" && phraseLists.map((phraseList, i) => {
         const topicData = getTopicData(data, selectedTopic, selectedCourse, selectedSection);
-        const phraseListExercises = ["translation", "listening", "pronunciation"];
+        const hasMeaning = phraseList?.phrases?.some(p => p.definitions?.length > 0) && !phraseList?.hiddenPhraseGroupGames?.meaning;
+        const phraseListExercises = ["translation", "listening", "pronunciation", ...(hasMeaning ? ["meaning"] : [])];
         const completedCount = phraseListExercises.filter(exercise => topicData?.completions?.some(c => c.exercise === exercise && (c.phraseListId === phraseList.phraseListId || !c.phraseListId && phraseList.phraseListId?.startsWith('leg-')))).length;
         return /*#__PURE__*/_jsx(MenuItem, {
           children: /*#__PURE__*/_jsx(ListItem, {
@@ -655,7 +657,6 @@ function ProgressList({
   setSelectedRoleplay,
   selectedPhraseList,
   setSelectedPhraseList,
-  phraseLists = [],
   roleplays,
   bots,
   deleteCourseId
@@ -900,7 +901,6 @@ function ProgressList({
       bots: bots,
       selectedRoleplay: selectedRoleplay,
       setSelectedRoleplay: setSelectedRoleplay,
-      phraseLists: phraseLists,
       selectedPhraseList: selectedPhraseList,
       setSelectedPhraseList: setSelectedPhraseList
     }, `student-progress-list-item-${i}`))

package/dist/Tables/Progress/ProgressTable.js

@@ -48,10 +48,10 @@ function ProgressTable({
   featureFlags,
   reportType,
   assignedCourseIds,
-  phraseLists = [],
   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}`));
@@ -62,6 +62,11 @@ function ProgressTable({
   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"] : [])];
+  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([]);
@@ -695,7 +700,7 @@ function ProgressTable({
               },
               children: t("view_topic")
             })]
-          }, i)), (currentView === "topic" || currentView === "assignment-topic") && phraseLists.map((phraseList, i) => /*#__PURE__*/_jsxs("th", {
+          }, i)), (currentView === "topic" || currentView === "assignment-topic") && tablePhraseLists.map((phraseList, i) => /*#__PURE__*/_jsxs("th", {
             scope: "col",
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "subtitle1",
@@ -716,7 +721,7 @@ function ProgressTable({
               },
               children: t("view_phrase_list")
             })]
-          }, i)), (currentView === "phrase-list" || currentView === "assignment-phrase-list") && ["translation", "listening", "pronunciation"].map((exercise, i) => /*#__PURE__*/_jsx("th", {
+          }, i)), (currentView === "phrase-list" || currentView === "assignment-phrase-list") && tablePhraseListExercises.map((exercise, i) => /*#__PURE__*/_jsx("th", {
             scope: "col",
             children: /*#__PURE__*/_jsx(Typography, {
               variant: "subtitle1",
@@ -851,7 +856,7 @@ function ProgressTable({
           selectedTopic: selectedTopic,
           selectedRoleplay: selectedRoleplay,
           selectedPhraseList: selectedPhraseList,
-          phraseLists: phraseLists,
+          phraseLists: tablePhraseLists,
           selectedAssignment: selectedAssignment,
           fetchMemberCourseCompletions: fetchMemberCourseCompletions,
           currentView: currentView,
@@ -860,6 +865,7 @@ function ProgressTable({
           featureFlags: featureFlags,
           reportType: reportType,
           tableExercises: tableExercises,
+          tablePhraseListExercises: tablePhraseListExercises,
           tableRoleplays: tableRoleplays,
           tableRoleplayGames: tableRoleplayGames,
           tableBots: tableBots,

package/dist/Tables/Progress/ProgressTableRow.js

@@ -33,6 +33,7 @@ export default function ProgressTableRow(props) {
     featureFlags,
     reportType,
     tableExercises = [],
+    tablePhraseListExercises = [],
     tableRoleplays = [],
     tableBots = [],
     tableRoleplayGames = [],
@@ -49,7 +50,7 @@ export default function ProgressTableRow(props) {
   } = member;
   const isChallengeModeStudent = assignedLabels?.isChallengeModeStudent;
   const isReadWriteModeStudent = assignedLabels?.isReadWriteModeStudent;
-  const assignmentDueDateMs = selectedAssignment?.dueDate ? new Date(selectedAssignment.dueDate).getTime() : null;
+  const assignmentDueDateMs = reportType === "assignments" && selectedAssignment?.dueDate ? new Date(selectedAssignment.dueDate).getTime() : null;
   const memberCourseCompletionsQuery = useQuery({
     queryKey: ["memberCourseProgress", memberId, courseIds],
     queryFn: async () => {
@@ -201,6 +202,7 @@ export default function ProgressTableRow(props) {
       index: i
     }, `topic-cell-${i}`)), (currentView === "topic" || currentView === "assignment-topic") && phraseLists.map((phraseList, i) => {
       const topicData = getTopicData(data, selectedTopic, selectedCourse, selectedSection);
+      const hasMeaning = phraseList?.phrases?.some(p => p.definitions?.length > 0) && !phraseList?.hiddenPhraseGroupGames?.meaning;
       return /*#__PURE__*/_jsx(PhraseListCellData, {
         t: t,
         data: topicData,
@@ -208,9 +210,10 @@ export default function ProgressTableRow(props) {
         isLoading: isLoading,
         error: error,
         index: i,
-        assignmentDueDateMs: assignmentDueDateMs
+        assignmentDueDateMs: assignmentDueDateMs,
+        hasMeaning: hasMeaning
       }, `phrase-list-cell-${i}`);
-    }), (currentView === "phrase-list" || currentView === "assignment-phrase-list") && ["translation", "listening", "pronunciation"].map((exercise, i) => {
+    }), (currentView === "phrase-list" || currentView === "assignment-phrase-list") && tablePhraseListExercises.map((exercise, i) => {
       const topicData = getTopicData(data, selectedTopic, selectedCourse, selectedSection);
       return /*#__PURE__*/_jsx(ExerciseCellData, {
         t: t,

package/dist/Tables/Progress/cells/index.js

@@ -485,7 +485,8 @@ export function PhraseListCellData({
   isLoading,
   error,
   index,
-  assignmentDueDateMs = null
+  assignmentDueDateMs = null,
+  hasMeaning = false
 }) {
   if (isLoading) return /*#__PURE__*/_jsx(DataCell, {
     t: t,
@@ -497,7 +498,7 @@ export function PhraseListCellData({
     data: "A problem has occurred.",
     index: index
   });
-  const phraseListExercises = ["translation", "listening", "pronunciation"];
+  const phraseListExercises = ["translation", "listening", "pronunciation", ...(hasMeaning ? ["meaning"] : [])];
   const phraseListCompletions = data?.completions?.filter(c => phraseListExercises.includes(c.exercise) && (c.phraseListId === phraseListId || !c.phraseListId && phraseListId?.startsWith('leg-'))) ?? [];
   const completedCount = phraseListExercises.filter(exercise => phraseListCompletions.some(c => c.exercise === exercise)).length;
   const total = phraseListExercises.length;

package/dist/Tables/Progress/useProgressUrlParams.js

@@ -43,8 +43,7 @@ export default function useProgressUrlParams(opts) {
     selectedRoleplay,
     setSelectedRoleplay,
     selectedPhraseList,
-    setSelectedPhraseList,
-    phraseLists
+    setSelectedPhraseList
   } = opts;
 
   // Track if we've already initialized from URL to prevent re-initialization
@@ -97,8 +96,8 @@ export default function useProgressUrlParams(opts) {
                 }
               }
               const phraseListId = searchParams.phraseListId;
-              if (phraseListId && !selectedPhraseList && phraseLists && phraseLists.length) {
-                const phraseList = phraseLists.find(p => p.phraseListId === phraseListId);
+              if (phraseListId && !selectedPhraseList) {
+                const phraseList = topic?.phraseLists?.find(p => p.phraseListId === phraseListId);
                 if (phraseList) setSelectedPhraseList(phraseList);
               }
             }

package/dist/hooks/useExerciseState.js

@@ -1718,6 +1718,7 @@ export default function useExerciseState({
       exerciseCompletion.answerAttempts = newAnswerAttempts && Array.isArray(newAnswerAttempts) ? newAnswerAttempts : answerAttempts;
       exerciseCompletion.unansweredPhrases = unansweredPhrases && Array.isArray(unansweredPhrases) ? unansweredPhrases : questions;
       exerciseCompletion.remainingQuestions = remainingQuestions;
+      if (phraseListId) exerciseCompletion.phraseListId = phraseListId;
       setQuestions(phrases.slice());
     }
     handleComplete(exerciseCompletion);

package/dist/utils/index.js

@@ -135,7 +135,7 @@ export const calcTopicCompletions = (topic, completions = [], isSectionHidden, a
   let isPhrases;
   let completedExerciseCount = 0;
   let totalExercises = 0;
-  if (topic.phrases && topic.phrases.length > 0) {
+  if (topic.phrases && topic.phrases.length > 0 && !topic.phraseLists?.length) {
     isPhrases = true;
   }
   if (isSectionHidden || topic.isTopicHidden) {
@@ -149,6 +149,7 @@ export const calcTopicCompletions = (topic, completions = [], isSectionHidden, a
     isListeningHidden = true;
     isTranslationHidden = true;
     assignmentExercises.forEach(e => {
+      if (e.phraseListId) return;
       if (e.name === "pronunciation") {
         isPronunciationHidden = false;
       }
@@ -189,12 +190,14 @@ export const calcTopicCompletions = (topic, completions = [], isSectionHidden, a
       totalExercises++;
     }
   }
-  const completedPronunciation = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "pronunciation").length : 0;
-  const completedTranslation = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "translation").length : 0;
-  const completedListening = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "listening").length : 0;
-  completedExerciseCount += !isPronunciationHidden && completedPronunciation > 0 ? 1 : 0;
-  completedExerciseCount += !isTranslationHidden && completedTranslation > 0 ? 1 : 0;
-  completedExerciseCount += !isListeningHidden && completedListening > 0 ? 1 : 0;
+  const completedPronunciation = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "pronunciation" && !c.phraseListId).length : 0;
+  const completedTranslation = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "translation" && !c.phraseListId).length : 0;
+  const completedListening = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "listening" && !c.phraseListId).length : 0;
+  if (isPhrases) {
+    completedExerciseCount += !isPronunciationHidden && completedPronunciation > 0 ? 1 : 0;
+    completedExerciseCount += !isTranslationHidden && completedTranslation > 0 ? 1 : 0;
+    completedExerciseCount += !isListeningHidden && completedListening > 0 ? 1 : 0;
+  }
   let completedRoleplays = 0;
   let completedGames = 0;
   let totalNumberOfGames = 0;
@@ -295,6 +298,48 @@ export const calcTopicCompletions = (topic, completions = [], isSectionHidden, a
       completedCount
     };
   });
+  if (!assignmentExercises && topic.phraseLists?.length > 0) {
+    topic.phraseLists.forEach(phraseList => {
+      if (phraseList.isPhraseListHidden) return;
+      const hasMeaning = phraseList?.phrases?.some(p => p.definitions?.length > 0) && !phraseList?.hiddenPhraseGroupGames?.meaning;
+      const exerciseNames = ["translation", "listening", "pronunciation", ...(hasMeaning ? ["meaning"] : [])];
+      exerciseNames.forEach(exerciseName => {
+        totalExercises++;
+        const isCompleted = Array.isArray(completions) && completions.some(c => c.phraseListId === phraseList.phraseListId && c.exercise === exerciseName && c.topicId === topic.topicId);
+        if (isCompleted) completedExerciseCount++;
+      });
+    });
+  }
+  if (assignmentExercises) {
+    const phraseListExercises = assignmentExercises.filter(e => e.phraseListId);
+    const phraseListMap = {};
+    phraseListExercises.forEach(e => {
+      if (!phraseListMap[e.phraseListId]) phraseListMap[e.phraseListId] = [];
+      if (e.name) phraseListMap[e.phraseListId].push(e.name);
+    });
+    if (topic.phraseLists?.length > 0) {
+      Object.keys(phraseListMap).forEach(phraseListId => {
+        if (!phraseListMap[phraseListId].includes("meaning")) {
+          const pl = topic.phraseLists?.find(p => p.phraseListId === phraseListId);
+          const hasMeaning = pl?.phrases?.some(p => p.definitions?.length > 0) && !pl?.hiddenPhraseGroupGames?.meaning;
+          if (hasMeaning) phraseListMap[phraseListId].push("meaning");
+        }
+      });
+    }
+    Object.entries(phraseListMap).forEach(([phraseListId, exerciseNames]) => {
+      if (exerciseNames.length === 0) {
+        totalExercises++;
+        const isCompleted = Array.isArray(completions) && completions.some(c => c.phraseListId === phraseListId && c.topicId === topic.topicId);
+        if (isCompleted) completedExerciseCount++;
+        return;
+      }
+      exerciseNames.forEach(exerciseName => {
+        totalExercises++;
+        const isCompleted = Array.isArray(completions) && completions.some(c => c.phraseListId === phraseListId && c.exercise === exerciseName && c.topicId === topic.topicId);
+        if (isCompleted) completedExerciseCount++;
+      });
+    });
+  }
   const scoreValues = getScoreValues("topic", topic.topicId, completions);
   return {
     ...topic,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1380",
+  "version": "0.1.1382",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -101,7 +101,7 @@
     "@mui/system": "^7.0.2",
     "@mui/x-date-pickers": "^8.27.2",
     "@nualang/eslint-config-nualang": "0.2.0-alpha-5",
-    "@nualang/nualang-api-and-queries": "^1.1.38",
+    "@nualang/nualang-api-and-queries": "^1.1.42",
     "@react-theming/storybook-addon": "^1.1.10",
     "@storybook/addon-docs": "^10.0.2",
     "@storybook/addon-links": "^10.0.2",
@@ -134,7 +134,7 @@
     "react-dom": "^19.2.4",
     "react-pdf": "^10.2.0",
     "react-router": "^7.12.0",
-    "rimraf": "^6.1.0",
+    "rimraf": "^6.1.3",
     "storybook": "^10.0.2",
     "vitest": "^4.0.18",
     "zx": "^8.8.5"