@nualang/nualang-ui-components 0.1.1314 → 0.1.1316

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -6,6 +6,8 @@ import Refresh from "@mui/icons-material/Refresh";
 import TeacherCreate from "../../img/teacher-create-2.svg";
 import Add from "@mui/icons-material/Add";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VISIBILITY_LEAD_MINUTES = 5; // how many minutes before scheduleDate it becomes visible to students
+
 const AssignmentCardsList = ({
   t = text => text,
   assignments = [],
@@ -31,8 +33,7 @@ const AssignmentCardsList = ({
   isChallengeModeStudent
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = useState(null);
-  const [filter, setFilter] = useState("all"); // Filter state
-
+  const [filter, setFilter] = useState("all");
   useEffect(() => {
     const stored = localStorage.getItem("lastClickedExercise");
     if (stored) {
@@ -47,20 +48,27 @@ const AssignmentCardsList = ({
     }
   }, []);
   const now = new Date();
-  const filteredAssignments = assignments.filter(assignment => {
+  const safeAssignments = Array.isArray(assignments) ? assignments : [];
+  const filteredAssignments = safeAssignments.filter(assignment => {
     if (!isCreator) {
       if (Array.isArray(assignment.assignedStudents) && !assignment.assignedStudents.includes(memberId)) {
         return false;
       }
-      if (assignment.scheduleDate && new Date(assignment.scheduleDate) > now) {
-        return false;
+      if (assignment.scheduleDate) {
+        const scheduleDateObj = new Date(assignment.scheduleDate);
+        const visibleFrom = new Date(scheduleDateObj.getTime() - VISIBILITY_LEAD_MINUTES * 60 * 1000);
+        if (visibleFrom > now) {
+          return false;
+        }
       }
     }
     return true;
   }).filter(assignment => {
     if (filter === "all") return true;
     if (filter === "scheduled") {
-      return assignment.scheduleDate && new Date(assignment.scheduleDate) > now;
+      if (!assignment.scheduleDate) return false;
+      const scheduleDateObj = new Date(assignment.scheduleDate);
+      return scheduleDateObj > now;
     }
     if (filter === "pastDue") {
       return assignment.dueDate && new Date(assignment.dueDate) < now;
@@ -71,12 +79,12 @@ const AssignmentCardsList = ({
     return true;
   }).sort((a, b) => {
     if (filter === "dueNext") {
-      return new Date(a.dueDate) - new Date(b.dueDate);
+      return new Date(a.dueDate || 0) - new Date(b.dueDate || 0);
     }
     if (filter === "scheduled") {
-      return new Date(a.scheduleDate) - new Date(b.scheduleDate);
+      return new Date(a.scheduleDate || 0) - new Date(b.scheduleDate || 0);
     }
-    return new Date(b.createdAt) - new Date(a.createdAt);
+    return new Date(b.createdAt || 0) - new Date(a.createdAt || 0);
   });
   if (isLoadingAssignments) {
     return /*#__PURE__*/_jsxs(Box, {
@@ -150,7 +158,7 @@ const AssignmentCardsList = ({
       }, idx))]
     });
   }
-  if (!assignments || assignments.length === 0) {
+  if (!safeAssignments.length || filteredAssignments.length === 0) {
     return /*#__PURE__*/_jsx(Box, {
       mb: 1,
       children: /*#__PURE__*/_jsxs(Box, {
@@ -290,9 +298,6 @@ const AssignmentCardsList = ({
           onClick: refreshAssignments,
           "aria-label": "refresh",
           size: "large",
-          sx: {
-            size: "large"
-          },
           children: /*#__PURE__*/_jsx(Refresh, {
             fontSize: "inherit"
           })
@@ -325,8 +330,24 @@ AssignmentCardsList.propTypes = {
   t: PropTypes.func,
   assignments: PropTypes.array,
   isCreator: PropTypes.bool,
-  onRefresh: PropTypes.func,
+  handleCreateAssignment: PropTypes.func,
+  getCourses: PropTypes.func,
+  getCourseSections: PropTypes.func,
+  getRoleplays: PropTypes.func,
+  deleteAssignment: PropTypes.func,
+  handleEditAssignment: PropTypes.func,
+  refreshAssignments: PropTypes.func,
+  username: PropTypes.string,
+  preferred_username: PropTypes.string,
+  progressHelpers: PropTypes.object,
+  fetchMemberCourseCompletions: PropTypes.func,
+  memberId: PropTypes.string,
+  handleViewProgress: PropTypes.func,
+  lastAssignmentFetch: PropTypes.any,
+  assignmentMembersById: PropTypes.object,
   isLoadingAssignments: PropTypes.bool,
-  assignmentMembersById: PropTypes.object
+  members: PropTypes.array,
+  courses: PropTypes.array,
+  isChallengeModeStudent: PropTypes.bool
 };
 export default AssignmentCardsList;

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -62,7 +62,7 @@ export default function CreateAssignmentDialog({
   const [submittedExercises, setSubmittedExercises] = useState(initialData.exercises ? initialData.exercises : []);
   const [members, setMembers] = useState([]);
   const [assignment, setAssignment] = useState({
-    classroomId: classroom?.length > 0 ? [classroom] : [],
+    classroomId: classroom && classroom.length > 0 ? [classroom] : [],
     assignedStudents,
     title: initialData.title ? initialData.title : undefined,
     instructions: initialData.instructions ? initialData.instructions : t("default_assignment_instructions"),
@@ -174,7 +174,12 @@ export default function CreateAssignmentDialog({
     let filteredCourses = selectedCourses.filter(course => submittedExercises.some(exercise => exercise.courseSectionTopicId?.split("|")[0] === course.courseId));
     setAssignment(prev => ({
       ...prev,
-      courses: filteredCourses
+      courses: filteredCourses.map(course => ({
+        courseId: course.courseId,
+        courseName: course.courseName,
+        description: course.description,
+        picture: course.picture
+      }))
     }));
     const selectedTopicIds = new Set(submittedExercises.map(ex => ex.courseSectionTopicId));
     const topicNames = Array.from(new Set(filteredCourses.flatMap(course => course.sections?.flatMap(section => section.topics?.flatMap(topic => {
@@ -212,10 +217,12 @@ export default function CreateAssignmentDialog({
     }));
   }, [members]);
   useEffect(() => {
-    setAssignment(prev => ({
-      ...prev,
-      classroomId: [classroom]
-    }));
+    if (classroom && classroom.length > 0 && !assignment.classroomId?.includes(classroom)) {
+      setAssignment(prev => ({
+        ...prev,
+        classroomId: [classroom]
+      }));
+    }
   }, [classroom]);
   const [isSelectExerciseOpen, setIsSelectExerciseOpen] = useState(false);
   const handleCloseSelectExercise = () => {

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -13,6 +13,7 @@ import level2Rubric from '../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf';
 import level3Rubric from '../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf';
 import level4Rubric from '../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf';
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function FeedbackCard({
   t = x => x,
@@ -25,7 +26,12 @@ export default function FeedbackCard({
   setSelectedRecording = () => {},
   s3Url = "",
   conversation = {},
-  existingFeedback = {}
+  existingFeedback = {},
+  playerRef = {
+    current: null
+  },
+  goToTimestamp = () => {},
+  startTimes = {}
 }) {
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [hasBeenEdited, setHasBeenEdited] = useState(false);
@@ -192,121 +198,139 @@ export default function FeedbackCard({
               boxShadow: 3,
               overflow: "hidden"
             },
-            children: [/*#__PURE__*/_jsx(Box, {
+            children: [aiJustGenerated ? /*#__PURE__*/_jsxs(Grid, {
               sx: {
-                px: 3,
-                pt: 2,
-                pb: 1,
-                fontWeight: 600,
-                color: "text.secondary"
+                ...(!aiJustGenerated && {
+                  display: "none"
+                })
               },
-              children: /*#__PURE__*/_jsxs(Grid, {
-                container: true,
-                alignItems: "center",
-                spacing: 3,
-                children: [/*#__PURE__*/_jsx(Grid, {
-                  size: {
-                    xs: 12,
-                    md: 2.5
-                  },
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle2",
-                    children: t("student")
-                  })
-                }), /*#__PURE__*/_jsx(Grid, {
-                  size: {
-                    xs: 12,
-                    md: 9.5
-                  },
-                  children: /*#__PURE__*/_jsxs(Box, {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center"
+              mx: 2,
+              size: 12,
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "h6",
+                sx: {
+                  mt: 2,
+                  mb: 2
+                },
+                children: t("generating_feedback")
+              }), /*#__PURE__*/_jsx(NualaCreating, {})]
+            }) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Box, {
+                sx: {
+                  px: 3,
+                  pt: 2,
+                  pb: 1,
+                  fontWeight: 600,
+                  color: "text.secondary"
+                },
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  container: true,
+                  alignItems: "center",
+                  spacing: 3,
+                  children: [/*#__PURE__*/_jsx(Grid, {
+                    size: {
+                      xs: 12,
+                      md: 2.5
                     },
-                    children: [/*#__PURE__*/_jsx(Typography, {
+                    children: /*#__PURE__*/_jsx(Typography, {
                       variant: "subtitle2",
-                      children: t("feedback")
-                    }), /*#__PURE__*/_jsx(Tooltip, {
-                      title: t("rubric_info_desc"),
-                      children: /*#__PURE__*/_jsx(IconButton, {
-                        onClick: handleOpenPDF,
-                        color: "primary",
-                        "aria-label": t("rubric_info"),
-                        size: "small",
-                        children: /*#__PURE__*/_jsx(HelpOutlineIcon, {})
-                      })
-                    })]
-                  })
-                })]
-              })
-            }), /*#__PURE__*/_jsx(CardContent, {
-              sx: {
-                px: 3,
-                pt: 1
-              },
-              children: [...selectedMembers].sort((a, b) => {
-                const aJoined = joinedMembers.includes(a.memberId);
-                const bJoined = joinedMembers.includes(b.memberId);
-                return aJoined === bJoined ? 0 : aJoined ? -1 : 1;
-              }).map(student => {
-                const isAbsent = hasSubmission && !joinedMembers.includes(student.memberId);
-                const disabled = !hasSubmission || isAbsent;
-                const studentFeedback = values.feedbackData[student.memberId] || {};
-                return /*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    py: 2
-                  },
-                  children: /*#__PURE__*/_jsxs(Grid, {
-                    container: true,
-                    alignItems: "flex-start",
-                    spacing: 3,
-                    children: [/*#__PURE__*/_jsx(Grid, {
-                      size: {
-                        xs: 12,
-                        md: 2.5
-                      },
-                      children: /*#__PURE__*/_jsxs(Box, {
+                      children: t("student")
+                    })
+                  }), /*#__PURE__*/_jsx(Grid, {
+                    size: {
+                      xs: 12,
+                      md: 9.5
+                    },
+                    children: /*#__PURE__*/_jsxs(Box, {
+                      sx: {
                         display: "flex",
-                        alignItems: "center",
-                        gap: 2,
-                        children: [/*#__PURE__*/_jsx(Avatar, {
-                          alt: student.username,
-                          src: student.userImage,
-                          sx: {
-                            width: 48,
-                            height: 48,
-                            filter: isAbsent ? "grayscale(100%)" : "none"
-                          }
-                        }), /*#__PURE__*/_jsx(Typography, {
-                          fontWeight: 600,
-                          sx: {
-                            color: isAbsent ? grey[500] : "text.primary"
-                          },
-                          children: student.username
-                        })]
-                      })
-                    }), /*#__PURE__*/_jsx(Grid, {
-                      size: {
-                        xs: 12,
-                        md: 9.5
+                        alignItems: "center"
                       },
-                      children: /*#__PURE__*/_jsx(TextField, {
-                        variant: "outlined",
-                        fullWidth: true,
-                        multiline: true,
-                        disabled: disabled,
-                        value: studentFeedback.feedbackText || "",
-                        onChange: e => {
-                          setFieldValue(`feedbackData.${student.memberId}.feedbackText`, e.target.value);
-                          setHasBeenEdited(true);
-                          setIsSubmitted(false);
+                      children: [/*#__PURE__*/_jsx(Typography, {
+                        variant: "subtitle2",
+                        children: t("feedback")
+                      }), /*#__PURE__*/_jsx(Tooltip, {
+                        title: t("rubric_info_desc"),
+                        children: /*#__PURE__*/_jsx(IconButton, {
+                          onClick: handleOpenPDF,
+                          color: "primary",
+                          "aria-label": t("rubric_info"),
+                          size: "small",
+                          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {})
+                        })
+                      })]
+                    })
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(CardContent, {
+                sx: {
+                  px: 3,
+                  pt: 1
+                },
+                children: [...selectedMembers].sort((a, b) => {
+                  const aJoined = joinedMembers.includes(a.memberId);
+                  const bJoined = joinedMembers.includes(b.memberId);
+                  return aJoined === bJoined ? 0 : aJoined ? -1 : 1;
+                }).map(student => {
+                  const isAbsent = hasSubmission && !joinedMembers.includes(student.memberId);
+                  const disabled = !hasSubmission || isAbsent;
+                  const studentFeedback = values.feedbackData[student.memberId] || {};
+                  return /*#__PURE__*/_jsx(Box, {
+                    sx: {
+                      py: 2
+                    },
+                    children: /*#__PURE__*/_jsxs(Grid, {
+                      container: true,
+                      alignItems: "flex-start",
+                      spacing: 3,
+                      children: [/*#__PURE__*/_jsx(Grid, {
+                        size: {
+                          xs: 12,
+                          md: 2.5
+                        },
+                        children: /*#__PURE__*/_jsxs(Box, {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 2,
+                          children: [/*#__PURE__*/_jsx(Avatar, {
+                            alt: student.username,
+                            src: student.userImage,
+                            sx: {
+                              width: 48,
+                              height: 48,
+                              filter: isAbsent ? "grayscale(100%)" : "none"
+                            }
+                          }), /*#__PURE__*/_jsx(Typography, {
+                            fontWeight: 600,
+                            sx: {
+                              color: isAbsent ? grey[500] : "text.primary"
+                            },
+                            children: student.username
+                          })]
+                        })
+                      }), /*#__PURE__*/_jsx(Grid, {
+                        size: {
+                          xs: 12,
+                          md: 9.5
                         },
-                        placeholder: t("Write your feedback here")
-                      })
-                    })]
-                  })
-                }, student.memberId);
-              })
+                        children: /*#__PURE__*/_jsx(TextField, {
+                          variant: "outlined",
+                          fullWidth: true,
+                          multiline: true,
+                          disabled: disabled,
+                          value: studentFeedback.feedbackText || "",
+                          onChange: e => {
+                            setFieldValue(`feedbackData.${student.memberId}.feedbackText`, e.target.value);
+                            setHasBeenEdited(true);
+                            setIsSubmitted(false);
+                          },
+                          placeholder: t("Write your feedback here")
+                        })
+                      })]
+                    })
+                  }, student.memberId);
+                })
+              })]
             }), /*#__PURE__*/_jsxs(CardActions, {
               sx: {
                 px: 3,
@@ -349,13 +373,13 @@ export default function FeedbackCard({
                 },
                 children: [/*#__PURE__*/_jsx(Button, {
                   variant: "outlined",
-                  disabled: !hasSubmission,
+                  disabled: !hasSubmission || aiJustGenerated,
                   onClick: handleOpenRecordingDialog,
                   children: t("view_recording")
                 }), /*#__PURE__*/_jsx(Button, {
                   variant: "contained",
                   color: "secondary",
-                  disabled: !hasSubmission,
+                  disabled: !hasSubmission || aiJustGenerated,
                   onClick: handleGenerateAI,
                   endIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
                   children: t("generate_feedback")
@@ -381,11 +405,11 @@ export default function FeedbackCard({
       attendeesData: attendeesInThisDiscussion,
       conversation: conversation,
       s3Url: s3Url,
-      playerRef: {
-        current: null
-      },
+      playerRef: playerRef,
       aiGrade: aiGrade,
-      hasBadLanguage: discussionData?.hasBadLanguage || false
+      hasBadLanguage: discussionData?.hasBadLanguage || false,
+      goToTimestamp: goToTimestamp,
+      videoStartTime: startTimes[0]
     }), /*#__PURE__*/_jsx(PDFViewer, {
       open: openPDF,
       handleClose: handleClosePDF,

package/dist/Cards/RecordingCard/RecordingCard.js

@@ -4,9 +4,15 @@ import Avatar from "@mui/material/Avatar";
 import AvatarGroup from "@mui/material/AvatarGroup";
 import Chip from "@mui/material/Chip";
 import Box from "@mui/material/Box";
-import { Card, CardActionArea, Divider, Button, Tooltip } from "@mui/material";
+import { Card, CardActionArea, Divider, Button, Tooltip, IconButton } from "@mui/material";
 import PropTypes from "prop-types";
 import dayjs from "dayjs";
+import PDFViewer from "../../Dialogs/PDFViewer/PDFViewer";
+import level1Rubric from '../../Dialogs/PDFViewer/rubrics/level1Rubric.pdf';
+import level2Rubric from '../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf';
+import level3Rubric from '../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf';
+import level4Rubric from '../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf';
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function RecordingCard({
   isTeacher = false,
@@ -16,6 +22,9 @@ export default function RecordingCard({
   t = x => x
 }) {
   const [promptExpanded, setPromptExpanded] = useState(false);
+  const [openPDF, setOpenPDF] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [scale, setScale] = useState(1);
   const selectedMembers = userData.filter(o1 => [recordingsListData?.userIds].flat().some(o2 => o1?.memberId === o2));
   const attendedMembers = selectedMembers.filter(attendee => recordingsListData?.joinedMembers?.includes(attendee?.memberId));
   const notAttendedMembers = selectedMembers.filter(attendee => !recordingsListData?.joinedMembers?.includes(attendee?.memberId));
@@ -28,6 +37,13 @@ export default function RecordingCard({
     if (diffDays < 0) dueText = t("past_due");else if (diffDays === 0) dueText = t("due_today");else if (diffDays === 1) dueText = t("due_tomorrow");else dueText = `${t("due_in")} ${diffDays} ${t("days")}`;
     return `${formattedDate} - ${dueText}`;
   };
+  const rubricMap = {
+    1: level1Rubric,
+    2: level2Rubric,
+    3: level3Rubric,
+    4: level4Rubric
+  };
+  const pdfUrl = rubricMap[recordingsListData?.level] || level1Rubric;
   const renderExpandableText = (text, expanded, setExpanded, maxChars = 150) => {
     if (!text) return null;
     const isLong = text.length > maxChars;
@@ -50,145 +66,177 @@ export default function RecordingCard({
       })]
     });
   };
-  return /*#__PURE__*/_jsx(Card, {
-    sx: {
-      display: "flex",
-      marginBottom: 2,
-      boxShadow: 3
-    },
-    children: /*#__PURE__*/_jsx(CardActionArea, {
-      component: "a",
-      onClick: handleView,
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          p: 2
-        },
-        children: [/*#__PURE__*/_jsxs(Box, {
+  const handleOpenPDF = () => {
+    setOpenPDF(true);
+  };
+  const handleClosePDF = () => {
+    setOpenPDF(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Card, {
+      sx: {
+        display: "flex",
+        marginBottom: 2,
+        boxShadow: 3
+      },
+      children: /*#__PURE__*/_jsx(CardActionArea, {
+        component: "a",
+        onClick: handleView,
+        children: /*#__PURE__*/_jsxs(Box, {
           sx: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center"
+            p: 2
           },
           children: [/*#__PURE__*/_jsxs(Box, {
             sx: {
               display: "flex",
-              alignItems: "center",
-              gap: 1
+              justifyContent: "space-between",
+              alignItems: "center"
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              fontWeight: 600,
+            children: [/*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                fontWeight: 600,
+                sx: {
+                  color: "text.primary"
+                },
+                children: recordingsListData?.meetingTopic
+              }), recordingsListData?.feedbackText && /*#__PURE__*/_jsx(Chip, {
+                label: t("submission_graded"),
+                color: "success",
+                size: "small"
+              })]
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              color: "text.secondary",
               sx: {
-                color: "text.primary"
+                ml: 1.5,
+                fontWeight: 500
               },
-              children: recordingsListData?.meetingTopic
-            }), recordingsListData?.feedbackText && /*#__PURE__*/_jsx(Chip, {
-              label: t("submission_graded"),
-              color: "success",
-              size: "small"
+              children: formatMeetingDueText(recordingsListData.timestamp, t)
             })]
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "body2",
-            color: "text.secondary",
+          }), /*#__PURE__*/_jsx(Divider, {
             sx: {
-              ml: 1.5,
-              fontWeight: 500
-            },
-            children: formatMeetingDueText(recordingsListData.timestamp, t)
-          })]
-        }), /*#__PURE__*/_jsx(Divider, {
-          sx: {
-            my: 1.5
-          }
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            mb: 1.5
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
+              my: 1.5
+            }
+          }), /*#__PURE__*/_jsxs(Box, {
             sx: {
               display: "flex",
+              justifyContent: "space-between",
               alignItems: "center",
-              gap: 1
+              mb: 1.5
             },
-            children: [/*#__PURE__*/_jsx(AvatarGroup, {
-              max: 4,
-              spacing: -3,
+            children: [/*#__PURE__*/_jsxs(Box, {
               sx: {
                 display: "flex",
-                "& .MuiAvatar-root": {
-                  width: 40,
-                  height: 40,
-                  fontSize: "1rem"
-                }
+                alignItems: "center",
+                gap: 1
               },
-              children: attendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
-                title: `${attendee?.username} - Present`,
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  alt: attendee?.username,
-                  src: attendee?.userImage
-                })
-              }, attendee?.memberId))
-            }), notAttendedMembers.length > 0 && /*#__PURE__*/_jsx(AvatarGroup, {
-              max: 4,
-              spacing: -3,
+              children: [/*#__PURE__*/_jsx(AvatarGroup, {
+                max: 4,
+                spacing: -3,
+                sx: {
+                  display: "flex",
+                  "& .MuiAvatar-root": {
+                    width: 40,
+                    height: 40,
+                    fontSize: "1rem"
+                  }
+                },
+                children: attendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
+                  title: `${attendee?.username} - Present`,
+                  children: /*#__PURE__*/_jsx(Avatar, {
+                    alt: attendee?.username,
+                    src: attendee?.userImage
+                  })
+                }, attendee?.memberId))
+              }), notAttendedMembers.length > 0 && /*#__PURE__*/_jsx(AvatarGroup, {
+                max: 4,
+                spacing: -3,
+                sx: {
+                  display: "flex",
+                  ml: 2,
+                  "& .MuiAvatar-root": {
+                    width: 40,
+                    height: 40,
+                    fontSize: "1rem",
+                    filter: "grayscale(100%)"
+                  }
+                },
+                children: notAttendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
+                  title: `${attendee?.username} - Not Present`,
+                  children: /*#__PURE__*/_jsx(Avatar, {
+                    alt: attendee?.username,
+                    src: attendee?.userImage
+                  })
+                }, attendee?.memberId))
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "contained",
+              color: "primary",
+              onClick: e => {
+                e.stopPropagation();
+                handleView();
+              },
+              sx: {
+                borderRadius: 2
+              },
+              children: t("view_submission")
+            })]
+          }), renderExpandableText(recordingsListData?.meetingPrompt, promptExpanded, setPromptExpanded), recordingsListData?.feedbackText && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Divider, {
+              sx: {
+                my: 1.5,
+                width: "100%"
+              }
+            }), /*#__PURE__*/_jsxs(Box, {
               sx: {
                 display: "flex",
-                ml: 2,
-                "& .MuiAvatar-root": {
-                  width: 40,
-                  height: 40,
-                  fontSize: "1rem",
-                  filter: "grayscale(100%)"
-                }
+                alignItems: "center"
               },
-              children: notAttendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
-                title: `${attendee?.username} - Not Present`,
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  alt: attendee?.username,
-                  src: attendee?.userImage
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "subtitle2",
+                fontWeight: 600,
+                children: t("feedback")
+              }), /*#__PURE__*/_jsx(Tooltip, {
+                title: t("rubric_info_desc"),
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  color: "primary",
+                  "aria-label": t("rubric_info"),
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                    handleOpenPDF();
+                  },
+                  children: /*#__PURE__*/_jsx(HelpOutlineIcon, {})
                 })
-              }, attendee?.memberId))
+              })]
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                fontStyle: "italic",
+                whiteSpace: "pre-line"
+              },
+              children: recordingsListData.feedbackText
             })]
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: "contained",
-            color: "primary",
-            onClick: e => {
-              e.stopPropagation();
-              handleView();
-            },
-            sx: {
-              borderRadius: 2
-            },
-            children: t("view_submission")
-          })]
-        }), renderExpandableText(recordingsListData?.meetingPrompt, promptExpanded, setPromptExpanded), recordingsListData?.feedbackText && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Divider, {
-            sx: {
-              my: 1.5,
-              width: "100%"
-            }
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle2",
-            fontWeight: 600,
-            sx: {
-              mb: 0.5
-            },
-            children: t("feedback")
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "body2",
-            color: "text.secondary",
-            sx: {
-              fontStyle: "italic",
-              whiteSpace: "pre-line"
-            },
-            children: recordingsListData.feedbackText
           })]
-        })]
+        })
       })
-    })
+    }), /*#__PURE__*/_jsx(PDFViewer, {
+      open: openPDF,
+      handleClose: handleClosePDF,
+      pdfUrl: pdfUrl,
+      pageNumber: pageNumber,
+      setPageNumber: setPageNumber,
+      scale: scale,
+      setScale: setScale,
+      t: t
+    })]
   });
 }
 RecordingCard.propTypes = {

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -26,7 +26,9 @@ export default function GroupFeedbackDialog({
   handleCreateFeedback = () => {},
   onFeedbackSubmitted = () => {},
   editBackgroundImages,
-  editMeetingImages
+  editMeetingImages,
+  goToTimestamp = () => {},
+  startTimes = {}
 }) {
   const discussionsInGroup = scheduleListData.filter(item => item.groupedId === groupedId);
   const submissionsForGroup = submissionsTableData.filter(item => item.groupedId === groupedId);
@@ -290,7 +292,9 @@ export default function GroupFeedbackDialog({
             selectedRecording: selectedRecording,
             s3Url: s3Url,
             playerRef: playerRef,
-            conversation: conversation
+            conversation: conversation,
+            goToTimestamp: goToTimestamp,
+            startTimes: startTimes
           }, discussion.meetingId || discussion.meetingID || index);
         })]
       })

package/dist/Dialogs/RecordingDialog/RecordingDialog.js

@@ -10,12 +10,32 @@ import { red } from "@mui/material/colors";
 import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const dateDifferenceInSeconds = (date1, date2) => {
+  const d1 = new Date(date1);
+  const d2 = new Date(date2);
+  return Math.abs((d2 - d1) / 1000);
+};
+const formatTimestamp = (timestamp, videoStartTime) => {
+  if (!timestamp && timestamp !== 0) return "00:00";
+  if (!videoStartTime) return "00:00";
+  let numberString = timestamp.toString();
+  numberString = numberString.substring(0, 10);
+  const formattedTime = Number(numberString);
+  const dateObj = new Date(formattedTime * 1000);
+  const isoString = dateObj.toISOString();
+  const seconds = dateDifferenceInSeconds(videoStartTime, isoString);
+  if (isNaN(seconds) || seconds < 0) return "00:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
 function TranscriptViewer({
   conversation = {},
   goToTimestamp = () => {},
   attendeesData,
   t = text => text,
-  loading = false
+  loading = false,
+  videoStartTime = null
 }) {
   return /*#__PURE__*/_jsx(Box, {
     sx: {
@@ -69,40 +89,66 @@ function TranscriptViewer({
         sx: theme => ({
           display: "flex",
           flexDirection: "column",
-          mb: 1,
+          mb: 1.5,
           cursor: "pointer",
-          p: 1,
-          borderRadius: 1,
+          p: 1.5,
+          borderRadius: 2,
+          transition: "all 0.2s ease-in-out",
+          border: "1px solid transparent",
           "&:hover": {
-            backgroundColor: theme.palette.mode === "dark" ? theme.palette.primary.main : "#f9f9f9"
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.primary.dark : theme.palette.primary.light + "15",
+            border: `1px solid ${theme.palette.primary.main}`,
+            transform: "translateX(4px)"
           }
         }),
         children: [/*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
-            mb: 0.5
+            mb: 0.5,
+            gap: 1
           },
           children: [/*#__PURE__*/_jsx(Avatar, {
             alt: sentence?.username,
             src: userImage,
             sx: {
-              width: 24,
-              height: 24,
-              mr: 1
+              width: 28,
+              height: 28
             }
           }), sentence?.user && /*#__PURE__*/_jsx(Typography, {
             variant: "subtitle2",
             fontWeight: "bold",
             sx: {
-              whiteSpace: "nowrap"
+              whiteSpace: "nowrap",
+              flex: 1
             },
             children: sentence.user
+          }), (sentence.start_time !== undefined || sentence.end_time !== undefined) && videoStartTime && /*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5,
+              px: 1,
+              py: 0.25,
+              backgroundColor: theme => theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.06)",
+              borderRadius: 1
+            },
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              sx: {
+                fontFamily: "monospace",
+                fontWeight: 500,
+                color: "text.secondary"
+              },
+              children: formatTimestamp(sentence.start_time, videoStartTime)
+            })
           })]
         }), /*#__PURE__*/_jsx(Typography, {
           variant: "body2",
           sx: {
-            ml: 4
+            ml: 4.5,
+            lineHeight: 1.6,
+            color: "text.primary"
           },
           children: sentence.text
         })]
@@ -117,7 +163,8 @@ TranscriptViewer.propTypes = {
   conversation: PropTypes.object,
   goToTimestamp: PropTypes.func,
   t: PropTypes.func,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  videoStartTime: PropTypes.string
 };
 export default function RecordingDialog({
   open,
@@ -129,7 +176,8 @@ export default function RecordingDialog({
   playerRef,
   conversation,
   attendeesData,
-  hasBadLanguage
+  hasBadLanguage,
+  videoStartTime
 }) {
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -227,7 +275,8 @@ export default function RecordingDialog({
             attendeesData: attendeesData,
             conversation: conversation,
             goToTimestamp: goToTimestamp,
-            loading: loading
+            loading: loading,
+            videoStartTime: videoStartTime
           })
         })]
       })
@@ -254,5 +303,6 @@ RecordingDialog.propTypes = {
   s3Url: PropTypes.string,
   playerRef: PropTypes.object,
   conversation: PropTypes.array,
-  handleCreateFeedback: PropTypes.func
+  handleCreateFeedback: PropTypes.func,
+  videoStartTime: PropTypes.string
 };

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -538,7 +538,8 @@ function Classroom({
     hasBadLanguage,
     handleArchiveSubmissions,
     isVideoChatEnabled,
-    isVideoChatEnabledInSettings
+    isVideoChatEnabledInSettings,
+    startTimes
   } = vchatProps;
   const isSmallScreen = useMediaQuery("(max-width:410px)");
   const {
@@ -1041,7 +1042,8 @@ function Classroom({
               setSelectedRecording: setSelectedRecording,
               meetingRecsData: meetingRecsData,
               hasBadLanguage: hasBadLanguage,
-              handleArchiveSubmissions: handleArchiveSubmissions
+              handleArchiveSubmissions: handleArchiveSubmissions,
+              startTimes: startTimes
             })
           })
         }), !isCreator && discussions?.length > 0 && /*#__PURE__*/_jsx(Box, {
@@ -1248,7 +1250,7 @@ function Classroom({
       }
     }
     return 0;
-  }, [isCreator.tabs?.length]); // only recompute if isCreator or tabs change
+  }, [isCreator, tabs?.length]); // only recompute if isCreator or tabs change
 
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -36,7 +36,8 @@ const MeetingPromptsList = withStyles(({
   setSelectedRecording,
   selectedRecording,
   getMeeting,
-  getRecordings
+  getRecordings,
+  startTimes = {}
 }) => {
   const [selectedGroup, setSelectedGroup] = useState({});
   const [isDialogOpen, setDialogOpen] = useState(false);
@@ -392,7 +393,9 @@ const MeetingPromptsList = withStyles(({
       handleCreateFeedback: handleCreateFeedback,
       onFeedbackSubmitted: getRecordings,
       editBackgroundImages: editBackgroundImages[0],
-      editMeetingImages: editMeetingImages[0]
+      editMeetingImages: editMeetingImages[0],
+      goToTimestamp: goToTimestamp,
+      startTimes: startTimes
     }), /*#__PURE__*/_jsx(Dialog, {
       role: "dialog",
       open: isRecordingDialogOpen,

package/package.json

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