@nualang/nualang-ui-components 0.1.1334 → 0.1.1336

package/dist/Forms/CreateTopic/Steps/TopicSettings/TopicSettings.js

@@ -195,7 +195,7 @@ function TopicSettings({
               handleChange({
                 target: {
                   name: "voicePitch",
-                  value: null
+                  value: ""
                 }
               });
             }

package/dist/Tables/Progress/ProgressTable.js

@@ -8,7 +8,7 @@ import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { TableSortLabel, Chip } from "@mui/material";
+import { TableSortLabel, Chip, Grid } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
 import { green, lightGreen, red, grey, deepOrange, orange, yellow } from "@mui/material/colors";
@@ -17,7 +17,7 @@ import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { formatMemberCourseCompletions, formatMemberAssignmentCompletions } from "./utils";
 import DoneIcon from "@mui/icons-material/Done";
 import CloseIcon from "@mui/icons-material/Close";
-import RemoveIcon from '@mui/icons-material/Remove';
+import RemoveIcon from "@mui/icons-material/Remove";
 import HtmlTooltipComponent from "../../Misc/HtmlTooltipComponent/HtmlTooltipComponent";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
@@ -123,7 +123,8 @@ function DataCell({
   backgroundColor,
   memberActivityLink,
   type,
-  index
+  index,
+  submittedLate = false
 }) {
   const completedTotal = `${completed} of ${total}`;
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -147,7 +148,7 @@ function DataCell({
       backgroundColor: backgroundColor || theme.palette.divider,
       color: theme.palette.common.white
     }),
-    children: /*#__PURE__*/_jsx(HtmlTooltip, {
+    children: /*#__PURE__*/_jsxs(HtmlTooltip, {
       tabIndex: `${index + 1}`,
       open: tooltipOpen,
       disableHoverListener: !type,
@@ -182,7 +183,7 @@ function DataCell({
         })]
       }),
       enterDelay: 1000,
-      children: /*#__PURE__*/_jsx(Typography, {
+      children: [/*#__PURE__*/_jsx(Typography, {
         variant: "subtitle1",
         component: "div",
         sx: theme => ({
@@ -192,21 +193,50 @@ function DataCell({
           textDecoration: "none"
         }),
         children: data
-      })
+      }), submittedLate && /*#__PURE__*/_jsx(Chip, {
+        variant: "outlined",
+        sx: theme => ({
+          color: theme.palette.common.black,
+          fontWeight: "bold"
+        }),
+        size: "small",
+        label: t("late_submission")
+      })]
     })
   });
 }
 function ExerciseCell({
   icon,
-  backgroundColor
+  backgroundColor,
+  submittedLate = false,
+  daysLate = null,
+  t
 }) {
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     component: "td",
     sx: theme => ({
       backgroundColor: backgroundColor || theme.palette.divider,
       color: theme.palette.common.black
     }),
-    children: icon
+    children: [/*#__PURE__*/_jsx(Grid, {
+      container: true
+    }), /*#__PURE__*/_jsx(Grid, {
+      size: 12,
+      children: icon
+    }), submittedLate && /*#__PURE__*/_jsx(Grid, {
+      size: 12,
+      children: /*#__PURE__*/_jsx(Chip, {
+        variant: "outlined",
+        sx: theme => ({
+          color: theme.palette.common.black,
+          fontWeight: "bold"
+        }),
+        size: "small",
+        label: t("days_late", {
+          count: daysLate
+        })
+      })
+    })]
   });
 }
 function DataCellContainer({
@@ -216,7 +246,9 @@ function DataCellContainer({
   error,
   data,
   memberActivityLink,
-  index
+  index,
+  submittedLate = false,
+  daysLate = null
 }) {
   if (isLoading) {
     return /*#__PURE__*/_jsx(DataCell, {
@@ -245,7 +277,9 @@ function DataCellContainer({
       total: data && data.total ? data.total : 0,
       type: data && data.type ? data.type : "percent",
       memberActivityLink: memberActivityLink,
-      index: index
+      index: index,
+      submittedLate: submittedLate,
+      daysLate: daysLate
     });
   } else if (data.percentage === -1 || data.total === 0 && data.type === "correct") {
     return /*#__PURE__*/_jsx(DataCell, {
@@ -256,7 +290,9 @@ function DataCellContainer({
       total: 0,
       type: data && data.type ? data.type : "percent",
       memberActivityLink: memberActivityLink,
-      index: index
+      index: index,
+      submittedLate: submittedLate,
+      daysLate: daysLate
     });
   } else if (data.percentage >= 80) {
     return /*#__PURE__*/_jsx(DataCell, {
@@ -267,7 +303,9 @@ function DataCellContainer({
       total: data.total,
       type: data && data.type ? data.type : "percent",
       memberActivityLink: memberActivityLink,
-      index: index
+      index: index,
+      submittedLate: submittedLate,
+      daysLate: daysLate
     });
   } else if (data.percentage >= 60) {
     return /*#__PURE__*/_jsx(DataCell, {
@@ -278,7 +316,9 @@ function DataCellContainer({
       total: data.total,
       type: data && data.type ? data.type : "percent",
       memberActivityLink: memberActivityLink,
-      index: index
+      index: index,
+      submittedLate: submittedLate,
+      daysLate: daysLate
     });
   } else if (data.percentage >= 40) {
     return /*#__PURE__*/_jsx(DataCell, {
@@ -289,7 +329,9 @@ function DataCellContainer({
       total: data.total,
       type: data && data.type ? data.type : "percent",
       memberActivityLink: memberActivityLink,
-      index: index
+      index: index,
+      submittedLate: submittedLate,
+      daysLate: daysLate
     });
   } else if (data.percentage >= 20) {
     return /*#__PURE__*/_jsx(DataCell, {
@@ -300,7 +342,9 @@ function DataCellContainer({
       total: data.total,
       type: data && data.type ? data.type : "percent",
       memberActivityLink: memberActivityLink,
-      index: index
+      index: index,
+      submittedLate: submittedLate,
+      daysLate: daysLate
     });
   } else if (data.percentage >= 0) {
     return /*#__PURE__*/_jsx(DataCell, {
@@ -311,7 +355,9 @@ function DataCellContainer({
       total: data.total,
       type: data && data.type ? data.type : "percent",
       memberActivityLink: memberActivityLink,
-      index: index
+      index: index,
+      submittedLate: submittedLate,
+      daysLate: daysLate
     });
   }
   return /*#__PURE__*/_jsx(DataCell, {
@@ -322,7 +368,9 @@ function DataCellContainer({
     total: data.total,
     type: data && data.type ? data.type : "percent",
     memberActivityLink: memberActivityLink,
-    index: index
+    index: index,
+    submittedLate: submittedLate,
+    daysLate: daysLate
   });
 }
 function AssignmentCellData({
@@ -336,6 +384,12 @@ function AssignmentCellData({
   index
 }) {
   let cellData = null;
+  let submittedLate = false;
+  let daysLate = null;
+  if (data?.submittedLate.isLate === true) {
+    submittedLate = true;
+    daysLate = data.submittedLate.daysLate;
+  }
   if (data) {
     if (filter === "percentage_complete" && data.percentComplete) {
       cellData = data.percentComplete;
@@ -355,7 +409,9 @@ function AssignmentCellData({
     error: error,
     memberActivityLink: memberActivityLink,
     index: index,
-    isNotAssigned: isNotAssigned
+    isNotAssigned: isNotAssigned,
+    submittedLate: submittedLate,
+    daysLate: daysLate
   });
 }
 function CourseCellData({
@@ -430,6 +486,12 @@ function TopicCellData({
   index
 }) {
   let cellData = null;
+  let submittedLate = false;
+  let daysLate = null;
+  if (data?.submittedLate.isLate === true) {
+    submittedLate = true;
+    daysLate = data.submittedLate.daysLate;
+  }
   if (data) {
     if (filter === "percentage_complete" && data.percentComplete) {
       cellData = data.percentComplete;
@@ -448,7 +510,9 @@ function TopicCellData({
     isLoading: isLoading,
     error: error,
     memberActivityLink: memberActivityLink,
-    index: index
+    index: index,
+    submittedLate: submittedLate,
+    daysLate: daysLate
   });
 }
 function ExerciseCellData({
@@ -471,6 +535,12 @@ function ExerciseCellData({
   let type = null;
   let color;
   let memberActivityLink = null;
+  let submittedLate = false;
+  let daysLate = null;
+  if (data?.submittedLate.isLate === true) {
+    submittedLate = true;
+    daysLate = data.submittedLate.daysLate;
+  }
   if (isLoading) {
     return /*#__PURE__*/_jsx(DataCell, {
       t: t,
@@ -544,7 +614,9 @@ function ExerciseCellData({
     type: type,
     backgroundColor: color ?? (type === "completed" ? green[400] : red[400]),
     memberActivityLink: memberActivityLink,
-    index: index
+    index: index,
+    submittedLate: submittedLate,
+    daysLate: daysLate
   });
 }
 function RoleplayCellData({
@@ -627,8 +699,8 @@ function TableRow({
     error,
     isLoading
   } = memberCourseCompletionsQuery;
-  const tableData = useMemo(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data.Items) && memberCourseCompletionsQuery.data.Items.length ? formatMemberCourseCompletions(courses, memberCourseCompletionsQuery.data.Items, reportType === "assignments" && selectedAssignment ? selectedAssignment?.exercises : null, isChallengeModeStudent) : [], [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, reportType, selectedAssignment, isChallengeModeStudent]);
-  const assignmentsTableData = useMemo(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data.Items) && memberCourseCompletionsQuery.data.Items.length && assignments && assignments.length ? formatMemberAssignmentCompletions(assignments, courses, memberCourseCompletionsQuery.data.Items, isChallengeModeStudent) : [], [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, assignments, isChallengeModeStudent]);
+  const tableData = useMemo(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data.Items) && memberCourseCompletionsQuery.data.Items.length ? formatMemberCourseCompletions(courses, memberCourseCompletionsQuery.data.Items, reportType === "assignments" && selectedAssignment ? selectedAssignment?.exercises : null, isChallengeModeStudent, selectedAssignment, reportType) : [], [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, courses, reportType, selectedAssignment, isChallengeModeStudent]);
+  const assignmentsTableData = useMemo(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data.Items) && memberCourseCompletionsQuery.data.Items.length && assignments && assignments.length ? formatMemberAssignmentCompletions(assignments, courses, memberCourseCompletionsQuery.data.Items, isChallengeModeStudent) : [], [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, courses, assignments, isChallengeModeStudent]);
   let memberActivityLink = `/classrooms/${classroomId}/activity/member/${member.memberId}`;
   if (currentView === "course") {
     memberActivityLink = `${memberActivityLink}/${selectedCourse.courseId}`;

package/dist/Tables/Progress/utils.js

@@ -1,5 +1,13 @@
 import { calcCompletions, calcPercentageCompletion, getScoreValues } from "../../utils";
-export const formatMemberCourseCompletions = (courses = [], completions = [], assignmentExercises, isChallengeModeStudent = false) => {
+
+// Helper function to calculate how many days late a submission is
+const calculateDaysLate = (submissionTimestamp, dueDateMs) => {
+  const daysDifference = (submissionTimestamp - dueDateMs) / (1000 * 60 * 60 * 24);
+  if (daysDifference <= 0) return 0; // Not actually late
+  return Math.max(1, Math.ceil(daysDifference)); // Round up, minimum 1 day
+};
+export const formatMemberCourseCompletions = (courses = [], completions = [], assignmentExercises, isChallengeModeStudent = false, selectedAssignment = null, reportType = "course") => {
+  const dueDateMs = selectedAssignment?.dueDate ? new Date(selectedAssignment.dueDate).getTime() : null;
   const initialStatsObject = courses.reduce((obj, v) => {
     const scoreValues = getScoreValues("course", v.courseId, completions);
     obj[v.courseId] = {
@@ -60,11 +68,26 @@ export const formatMemberCourseCompletions = (courses = [], completions = [], as
         return topicObj;
       }, {});
       const formattedTopics = sectionVal.topics.reduce((topicObj, topicVal) => {
+        const topicCompletions = completions.filter(completion => completion.topicId === topicVal.topicId);
         topicObj[topicVal.topicId] = {
           percentComplete: topicVal.completion,
           percentCorrect: topicVal.percentCorrect,
           avgPronunciationScore: topicVal.avgPronunciationScore,
-          completions: completions.filter(completion => completion.topicId === topicVal.topicId)
+          completions: topicCompletions,
+          ...(selectedAssignment && reportType === "assignments" && {
+            submittedLate: (() => {
+              if (!dueDateMs) return {
+                isLate: false
+              };
+              const earliestCompletion = topicCompletions.reduce((earliest, c) => !earliest || c.createdAt < earliest.createdAt ? c : earliest, null);
+              return earliestCompletion && earliestCompletion.createdAt > dueDateMs ? {
+                isLate: true,
+                daysLate: calculateDaysLate(earliestCompletion.createdAt, dueDateMs)
+              } : {
+                isLate: false
+              };
+            })()
+          })
         };
         return topicObj;
       }, initialTopicsObject);
@@ -72,11 +95,38 @@ export const formatMemberCourseCompletions = (courses = [], completions = [], as
         percentComplete: sectionVal.completion,
         percentCorrect: sectionVal.percentCorrect,
         avgPronunciationScore: sectionVal.avgPronunciationScore,
-        topics: formattedTopics
+        topics: formattedTopics,
+        ...(selectedAssignment && reportType === "assignments" && {
+          submittedLate: (() => {
+            const lateTopics = Object.values(formattedTopics).filter(t => t.submittedLate?.isLate);
+            if (lateTopics.length === 0) return {
+              isLate: false
+            };
+            const maxDaysLate = Math.max(...lateTopics.map(topic => topic.submittedLate.daysLate));
+            return {
+              isLate: true,
+              daysLate: maxDaysLate
+            };
+          })()
+        })
       };
       return sectionObj;
     }, initialSectionsObject);
     previousValue[currentValue.courseId].sections = formattedSections;
+    if (selectedAssignment && reportType === "assignments") {
+      const lateSections = Object.values(formattedSections).filter(s => s.submittedLate?.isLate);
+      if (lateSections.length === 0) {
+        previousValue[currentValue.courseId].submittedLate = {
+          isLate: false
+        };
+      } else {
+        const maxDaysLate = Math.max(...lateSections.map(section => section.submittedLate.daysLate));
+        previousValue[currentValue.courseId].submittedLate = {
+          isLate: true,
+          daysLate: maxDaysLate
+        };
+      }
+    }
     return previousValue;
   }, initialStatsObject);
   return stats;
@@ -106,8 +156,21 @@ export const formatMemberAssignmentCompletions = (assignments = [], courses = []
         total: 0,
         sum: 0,
         percentage: 0
+      },
+      submittedLate: {
+        isLate: false
       }
     };
+    if (assignment.dueDate) {
+      const dueDateMs = new Date(assignment.dueDate).getTime();
+      const lateCompletion = assignmentCompletions.find(completion => completion.createdAt > dueDateMs);
+      if (lateCompletion) {
+        accumulator.submittedLate = {
+          isLate: true,
+          daysLate: calculateDaysLate(lateCompletion.createdAt, dueDateMs)
+        };
+      }
+    }
     Object.values(assignmentCourseCompletions).forEach(course => {
       if (course?.percentComplete) {
         accumulator.percentComplete.completed += course.percentComplete.completed || 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1334",
+  "version": "0.1.1336",
   "type": "module",
   "main": "dist/index.js",
   "files": [