@nualang/nualang-ui-components 0.1.1333 → 0.1.1335

package/dist/Chat/BottomBar/BottomBar.js

@@ -145,9 +145,8 @@ export default function BottomBar({
       placeholder: browserSupportsSpeechRecognition && handleRecord ? isSmallScreen ? t("bot_input_mobile_placeholder") : t("bot_input_placeholder") : placeholder,
       inputProps: {
         maxLength: isChallengeBot ? 600 : 200,
-        sx: theme => ({
+        sx: () => ({
           "&::placeholder": {
-            color: theme.palette.mode === "light" ? grey[200] : grey[800],
             opacity: 1
           }
         })

package/dist/Editors/Bot/Bot.js

@@ -729,7 +729,18 @@ function Bot({
               return !hidden ? /*#__PURE__*/_jsx(Tab, {
                 id: keyId,
                 label: label,
-                disabled: disabled
+                disabled: disabled,
+                sx: {
+                  color: "#fff !important",
+                  "&.Mui-selected": {
+                    color: "#fff !important"
+                  },
+                  "&:hover": {
+                    ...(theme.palette.mode === "light" && {
+                      backgroundColor: "rgba(144, 238, 144, 0.20) !important"
+                    })
+                  }
+                }
               }, keyId) : null;
             }), /*#__PURE__*/_jsx(Tooltip, {
               title: hidden ? t("show_menu") : t("hide_menu"),

package/dist/Editors/Roleplay/Roleplay.js

@@ -758,7 +758,18 @@ function Roleplay({
           }, i) => !hidden ? /*#__PURE__*/_jsx(Tab, {
             id: i,
             label: label,
-            disabled: disabled
+            disabled: disabled,
+            sx: {
+              color: "#fff !important",
+              "&.Mui-selected": {
+                color: "#fff !important"
+              },
+              "&:hover": {
+                ...(theme.palette.mode === "light" && {
+                  backgroundColor: "rgba(144, 238, 144, 0.20) !important"
+                })
+              }
+            }
           }, i) : null), /*#__PURE__*/_jsx(Tooltip, {
             title: hidden ? t("show_menu") : t("hide_menu"),
             children: /*#__PURE__*/_jsx(IconButton, {

package/dist/Forms/AppContact/AppContact.js

@@ -103,6 +103,7 @@ function AppContact({
             children: /*#__PURE__*/_jsx(TextField, {
               name: "jobTitle",
               value: jobTitle || "",
+              label: t("you_are_human_check"),
               onChange: handleChange,
               autoComplete: "off",
               tabIndex: -1,

package/dist/Navigation/ResponsiveTabs/ResponsiveTabs.js

@@ -97,26 +97,6 @@ function ResponsiveTabs({
     sx: {
       "@media print": {
         display: "none"
-      },
-      "& .MuiTab-root": {
-        transition: theme.transitions.create(["background-color", "color"], {
-          duration: theme.transitions.duration.shorter
-        }),
-        "&:hover": {
-          backgroundColor: theme.palette.action.hover
-        },
-        "&.Mui-selected": {
-          color: theme.palette.primary.main,
-          "&:hover": {
-            backgroundColor: theme.palette.primary.light + "20"
-          }
-        },
-        "&.Mui-focusVisible": {
-          backgroundColor: theme.palette.action.focus
-        }
-      },
-      "& .MuiTabs-indicator": {
-        height: 3
       }
     },
     children: tabs.map(({

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

@@ -1023,16 +1023,17 @@ export default function ViewCourse({
   const {
     classes
   } = useStyles();
+  const safeCourse = course || {};
   return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
-    children: [isLoading && Object.keys(course).length === 0 && /*#__PURE__*/_jsx(_Fragment, {
+    children: [isLoading && Object.keys(safeCourse).length === 0 && /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx(Course, {
         t: t,
         isLoading: isLoading,
         isStudent: isStudent,
         ...otherProps
       })
-    }), !isLoading && course && Object.keys(course).length && /*#__PURE__*/_jsx(_Fragment, {
+    }), !isLoading && course && Object.keys(safeCourse).length && /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx(Course, {
         t: t,
         isLoading: isLoading,
@@ -1043,7 +1044,7 @@ export default function ViewCourse({
         isStudent: isStudent,
         ...otherProps
       })
-    }), !isLoading && Object.keys(course).length === 0 && /*#__PURE__*/_jsx(CourseNotFound, {
+    }), !isLoading && Object.keys(safeCourse).length === 0 && /*#__PURE__*/_jsx(CourseNotFound, {
       t: t,
       placeholderImageUrl: placeholderImageUrl,
       handleSearch: handleSearch

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

@@ -1323,16 +1323,17 @@ export default function ViewTopic({
   const {
     classes
   } = useStyles();
+  const safeTopic = topic || {};
   return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
-    children: [isLoading && Object.keys(topic).length === 0 && /*#__PURE__*/_jsx(_Fragment, {
+    children: [isLoading && Object.keys(safeTopic).length === 0 && /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx(Topic, {
         t: t,
         isLoading: isLoading,
         courseSettings: courseSettings,
         ...otherProps
       })
-    }), !isLoading && topic && Object.keys(topic).length && /*#__PURE__*/_jsx(_Fragment, {
+    }), !isLoading && topic && Object.keys(safeTopic).length && /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx(Topic, {
         t: t,
         isLoading: isLoading,
@@ -1358,7 +1359,7 @@ export default function ViewTopic({
         isClassroomCreator: isClassroomCreator,
         ...otherProps
       })
-    }), !isLoading && Object.keys(topic).length === 0 && /*#__PURE__*/_jsx(TopicNotFound, {
+    }), !isLoading && Object.keys(safeTopic).length === 0 && /*#__PURE__*/_jsx(TopicNotFound, {
       t: t,
       isLoading: isLoading,
       handleViewCourse: handleViewCourse

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.1333",
+  "version": "0.1.1335",
   "type": "module",
   "main": "dist/index.js",
   "files": [