@nualang/nualang-ui-components 0.1.1306 → 0.1.1308

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -1,12 +1,11 @@
 import { useMemo } from "react";
 import Typography from "@mui/material/Typography";
-import { Card, CardContent, Grid, Box, Divider, Button, LinearProgress, IconButton, Tooltip } from "@mui/material";
+import { Card, CardContent, Grid, Box, Divider, Button, IconButton, Tooltip } from "@mui/material";
 import PropTypes from "prop-types";
 import AssignmentExerciseSelector from "../AssignmentExerciseSelector/AssignmentExerciseSelector";
 import { courses as courseQuerys, ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
 import useConfirm from "../../hooks/useConfirm";
-import { Delete } from "@mui/icons-material";
-import { Edit } from "@mui/icons-material";
+import { Delete, Edit } from "@mui/icons-material";
 import dayjs from "dayjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function AssignmentCard({
@@ -41,6 +40,43 @@ export default function AssignmentCard({
       await deleteAssignment(classroomId, assignmentId);
     }
   };
+
+  // 🧠 Helper to format due or available text (adapted from MeetingPromptsList)
+  const formatAssignmentDueText = (availableDate, dueDate, t) => {
+    const now = dayjs();
+    const available = dayjs(availableDate);
+    const due = dayjs(dueDate);
+    const formattedDue = due.format("D MMM YYYY • h:mm A");
+    const formattedAvailable = available.format("D MMM YYYY • h:mm A");
+
+    // Case 1: Not yet available
+    if (available.isAfter(now)) {
+      const diffDays = available.startOf("day").diff(now.startOf("day"), "day");
+      let availableText = "";
+      if (diffDays === 0) {
+        availableText = t("available_today");
+      } else if (diffDays === 1) {
+        availableText = t("available_tomorrow");
+      } else {
+        availableText = `${t("available_in")} ${diffDays} ${t("days")}`;
+      }
+      return `${availableText} - ${formattedAvailable}`;
+    }
+
+    // Case 2: Available, now check due
+    const diffDays = due.startOf("day").diff(now.startOf("day"), "day");
+    let dueText = "";
+    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 `${dueText} - ${formattedDue}`;
+  };
   const {
     uniqueCourses
   } = useMemo(() => {
@@ -107,7 +143,10 @@ export default function AssignmentCard({
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "body1",
-              component: "div",
+              fontWeight: 600,
+              sx: {
+                color: "text.primary"
+              },
               children: assignment.title
             }), isNew && /*#__PURE__*/_jsx(Box, {
               ml: 2,
@@ -126,7 +165,7 @@ export default function AssignmentCard({
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "button",
             color: "text.secondary",
-            children: dayjs(assignment.scheduleDate).isAfter(dayjs()) ? `${t("available_from")} ${dayjs(assignment.scheduleDate).format("DD MMM YYYY • h:mm A")}` : `${t("due")} ${dayjs(assignment.dueDate).format("DD MMM YYYY • h:mm A")}`
+            children: formatAssignmentDueText(assignment.scheduleDate, assignment.dueDate, t)
           })
         }), isCreator && /*#__PURE__*/_jsxs(Grid, {
           children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -151,7 +190,8 @@ export default function AssignmentCard({
         mt: 2,
         children: [/*#__PURE__*/_jsx(Divider, {
           sx: {
-            marginBottom: 1.5
+            marginBottom: "12px",
+            marginTop: "12px"
           }
         }), /*#__PURE__*/_jsxs(Grid, {
           container: true,

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { Typography, Box, IconButton, Tooltip, Button, Skeleton } from "@mui/material";
+import { Typography, Box, IconButton, Tooltip, Button, Skeleton, Select, MenuItem, FormControl, InputLabel } from "@mui/material";
 import AssignmentCard from "../AssignmentCard/AssignmentCard";
 import Refresh from "@mui/icons-material/Refresh";
 import TeacherCreate from "../../img/teacher-create-2.svg";
@@ -31,6 +31,8 @@ const AssignmentCardsList = ({
   isChallengeModeStudent
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = useState(null);
+  const [filter, setFilter] = useState("all"); // Filter state
+
   useEffect(() => {
     const stored = localStorage.getItem("lastClickedExercise");
     if (stored) {
@@ -44,6 +46,38 @@ const AssignmentCardsList = ({
       }
     }
   }, []);
+  const now = new Date();
+  const filteredAssignments = assignments.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;
+      }
+    }
+    return true;
+  }).filter(assignment => {
+    if (filter === "all") return true;
+    if (filter === "scheduled") {
+      return assignment.scheduleDate && new Date(assignment.scheduleDate) > now;
+    }
+    if (filter === "pastDue") {
+      return assignment.dueDate && new Date(assignment.dueDate) < now;
+    }
+    if (filter === "dueNext") {
+      return assignment.dueDate && new Date(assignment.dueDate) >= now;
+    }
+    return true;
+  }).sort((a, b) => {
+    if (filter === "dueNext") {
+      return new Date(a.dueDate) - new Date(b.dueDate);
+    }
+    if (filter === "scheduled") {
+      return new Date(a.scheduleDate) - new Date(b.scheduleDate);
+    }
+    return new Date(b.createdAt) - new Date(a.createdAt);
+  });
   if (isLoadingAssignments) {
     return /*#__PURE__*/_jsxs(Box, {
       mb: 1,
@@ -216,14 +250,39 @@ const AssignmentCardsList = ({
     mb: 1,
     children: [/*#__PURE__*/_jsxs(Box, {
       display: "flex",
-      justifyContent: "space-between",
+      justifyContent: isCreator ? "space-between" : "flex-end",
       alignItems: "center",
       sx: {
-        mb: 2
+        mb: 3,
+        mt: "8px"
       },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h5",
-        children: t("assignments")
+      children: [isCreator && /*#__PURE__*/_jsxs(FormControl, {
+        size: "large",
+        sx: {
+          minWidth: 140,
+          marginTop: 1
+        },
+        children: [/*#__PURE__*/_jsx(InputLabel, {
+          children: t("view")
+        }), /*#__PURE__*/_jsxs(Select, {
+          value: filter,
+          onChange: e => setFilter(e.target.value),
+          label: t("view"),
+          autoWidth: true,
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            value: "all",
+            children: t("all")
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            value: "dueNext",
+            children: t("due_next")
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            value: "pastDue",
+            children: t("past_due")
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            value: "scheduled",
+            children: t("scheduled")
+          })]
+        })]
       }), /*#__PURE__*/_jsx(Tooltip, {
         placement: "left",
         title: t("refresh_assignments"),
@@ -231,17 +290,15 @@ const AssignmentCardsList = ({
           onClick: refreshAssignments,
           "aria-label": "refresh",
           size: "large",
-          children: /*#__PURE__*/_jsx(Refresh, {})
+          sx: {
+            size: "large"
+          },
+          children: /*#__PURE__*/_jsx(Refresh, {
+            fontSize: "inherit"
+          })
         })
       })]
-    }), assignments.filter(assignment => {
-      if (isCreator) return true;
-      if (Array.isArray(assignment.assignedStudents) && !assignment.assignedStudents.includes(memberId)) {
-        return false;
-      }
-      if (!assignment.scheduleDate) return true;
-      return new Date(assignment.scheduleDate) <= new Date();
-    }).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).map((assignment, index) => /*#__PURE__*/_jsx(AssignmentCard, {
+    }), filteredAssignments.map((assignment, index) => /*#__PURE__*/_jsx(AssignmentCard, {
       index: index,
       lastAssignmentFetch: lastAssignmentFetch,
       assignment: assignment,

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -565,7 +565,18 @@ export default function CreateAssignmentDialog({
                 sx: {
                   width: "45%"
                 },
-                format: "DD MMM YYYY HH:mm"
+                format: "DD MMM YYYY HH:mm",
+                slotProps: {
+                  popper: {
+                    placement: "left-start",
+                    modifiers: [{
+                      name: "preventOverflow",
+                      options: {
+                        boundary: "viewport"
+                      }
+                    }]
+                  }
+                }
               })
             }), /*#__PURE__*/_jsx(Typography, {
               variant: "h4",
@@ -585,7 +596,18 @@ export default function CreateAssignmentDialog({
                 sx: {
                   width: "45%"
                 },
-                format: "DD MMM YYYY HH:mm"
+                format: "DD MMM YYYY HH:mm",
+                slotProps: {
+                  popper: {
+                    placement: "left-start",
+                    modifiers: [{
+                      name: "preventOverflow",
+                      options: {
+                        boundary: "viewport"
+                      }
+                    }]
+                  }
+                }
               })
             })]
           })]

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Card, CardContent, CardActions, Typography, Avatar, Box, Button, TextField, Chip, Grid } from "@mui/material";
+import { Card, CardContent, CardActions, Typography, Avatar, Box, Button, TextField, Chip, Grid, IconButton, Tooltip } from "@mui/material";
 import { grey, green } from "@mui/material/colors";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
@@ -7,6 +7,12 @@ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { Formik } from "formik";
 import * as Yup from "yup";
 import RecordingDialog from "../../Dialogs/RecordingDialog/RecordingDialog";
+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 FeedbackCard({
   t = x => x,
@@ -27,6 +33,16 @@ export default function FeedbackCard({
   const [aiJustGenerated, setAiJustGenerated] = useState(false);
   const formikRef = useRef(null);
   const initialValuesRef = useRef(null);
+  const [openPDF, setOpenPDF] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [scale, setScale] = useState(1);
+  const rubricMap = {
+    1: level1Rubric,
+    2: level2Rubric,
+    3: level3Rubric,
+    4: level4Rubric
+  };
+  const pdfUrl = rubricMap[discussionData?.level] || level1Rubric;
   const selectedMembers = userData.filter(u => [discussionData?.meetingMembers || discussionData?.userIds].flat().includes(u?.memberId));
   const joinedMembers = discussionData?.joinedMembers || [];
   let attendedMembers = [];
@@ -105,6 +121,12 @@ export default function FeedbackCard({
     setAiJustGenerated(true);
     await onGenerateFeedback(discussionData);
   };
+  const handleOpenPDF = () => {
+    setOpenPDF(true);
+  };
+  const handleClosePDF = () => {
+    setOpenPDF(false);
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Formik, {
       innerRef: formikRef,
@@ -196,9 +218,24 @@ export default function FeedbackCard({
                     xs: 12,
                     md: 9.5
                   },
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle2",
-                    children: t("feedback")
+                  children: /*#__PURE__*/_jsxs(Box, {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    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, {})
+                      })
+                    })]
                   })
                 })]
               })
@@ -349,6 +386,15 @@ export default function FeedbackCard({
       },
       aiGrade: aiGrade,
       hasBadLanguage: discussionData?.hasBadLanguage || false
+    }), /*#__PURE__*/_jsx(PDFViewer, {
+      open: openPDF,
+      handleClose: handleClosePDF,
+      pdfUrl: pdfUrl,
+      pageNumber: pageNumber,
+      setPageNumber: setPageNumber,
+      scale: scale,
+      setScale: setScale,
+      t: t
     })]
   });
 }

package/dist/Cards/ScheduleCard/ScheduleCard.js

@@ -81,6 +81,7 @@ export default function ScheduleCard({
             gap: 2
           },
           children: /*#__PURE__*/_jsxs(Box, {
+            width: "100%",
             children: [/*#__PURE__*/_jsxs(Box, {
               sx: {
                 display: "flex",
@@ -119,14 +120,28 @@ export default function ScheduleCard({
                 },
                 children: teacherView ? t("view") : t("start")
               })]
-            }), scheduleListData?.meetingPrompt && /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              color: "text.secondary",
+            }), /*#__PURE__*/_jsx(Box, {
               sx: {
-                lineHeight: 1.6,
-                whiteSpace: "normal"
+                paddingTop: 1
               },
-              children: scheduleListData.meetingPrompt
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                fontWeight: 600,
+                children: scheduleListData.meetingTopic
+              })
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                paddingTop: 1
+              },
+              children: scheduleListData?.meetingPrompt && /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                sx: {
+                  lineHeight: 1.6,
+                  whiteSpace: "normal"
+                },
+                children: scheduleListData.meetingPrompt
+              })
             })]
           })
         })]

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -3,6 +3,7 @@ import { Dialog, DialogContent, IconButton, Box, Typography, AppBar, Toolbar, Ci
 import CloseIcon from "@mui/icons-material/Close";
 import { red, orange, green, grey } from "@mui/material/colors";
 import FeedbackCard from "../../Cards/FeedbackCard/FeedbackCard";
+import NualaHeadphonesBackground from "../../img/NualaHeadphonesBackground.svg";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function GroupFeedbackDialog({
   open = false,
@@ -23,7 +24,9 @@ export default function GroupFeedbackDialog({
   },
   conversation = {},
   handleCreateFeedback = () => {},
-  onFeedbackSubmitted = () => {}
+  onFeedbackSubmitted = () => {},
+  editBackgroundImages,
+  editMeetingImages
 }) {
   const discussionsInGroup = scheduleListData.filter(item => item.groupedId === groupedId);
   const submissionsForGroup = submissionsTableData.filter(item => item.groupedId === groupedId);
@@ -152,7 +155,27 @@ export default function GroupFeedbackDialog({
             mb: 3,
             gap: 4
           },
-          children: [/*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              maxWidth: "25%"
+            },
+            children: /*#__PURE__*/_jsx("img", {
+              src: editMeetingImages || editBackgroundImages || NualaHeadphonesBackground,
+              alt: "Meeting Image",
+              style: {
+                width: "100%",
+                maxWidth: "300px",
+                height: "auto",
+                aspectRatio: "16 / 9",
+                objectFit: "cover",
+                borderRadius: "8px"
+              }
+            })
+          }), /*#__PURE__*/_jsxs(Box, {
             sx: {
               flexBasis: "70%",
               maxWidth: "70%"

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

@@ -988,7 +988,7 @@ function Classroom({
     disabled: false,
     TabContent: /*#__PURE__*/_jsx(_Fragment, {
       children: isVideoChatEnabled && isVideoChatEnabledInSettings ? /*#__PURE__*/_jsxs(Box, {
-        py: 1,
+        pt: "8px",
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.grow
         }), /*#__PURE__*/_jsx(Tooltip, {
@@ -1000,7 +1000,8 @@ function Classroom({
               right: theme.spacing(),
               marginRight: theme.spacing(2),
               zIndex: 1,
-              size: "large"
+              size: "large",
+              marginTop: "5px"
             },
             size: "large",
             "aria-label": "Refresh",
@@ -1043,16 +1044,19 @@ function Classroom({
               handleArchiveSubmissions: handleArchiveSubmissions
             })
           })
-        }), !isCreator && discussions?.length > 0 && /*#__PURE__*/_jsx("div", {
-          id: "discussScheduled",
-          children: /*#__PURE__*/_jsx(ScheduleListCards, {
-            t: t,
-            getRecordings: getRecordings,
-            userData: classroomMembers,
-            joinMeeting: handleJoinMeeting,
-            loading: false,
-            getSchedules: getSchedules,
-            scheduleListData: discussions
+        }), !isCreator && discussions?.length > 0 && /*#__PURE__*/_jsx(Box, {
+          marginTop: "78px",
+          children: /*#__PURE__*/_jsx("div", {
+            id: "discussScheduled",
+            children: /*#__PURE__*/_jsx(ScheduleListCards, {
+              t: t,
+              getRecordings: getRecordings,
+              userData: classroomMembers,
+              joinMeeting: handleJoinMeeting,
+              loading: false,
+              getSchedules: getSchedules,
+              scheduleListData: discussions
+            })
           })
         }), !isCreator && recordingDiscussions?.length > 0 && /*#__PURE__*/_jsx("div", {
           id: "discussRecorded",
@@ -1484,7 +1488,7 @@ function Classroom({
     }), /*#__PURE__*/_jsx(ResponsiveTabs, {
       t: t,
       tabs: tabs,
-      fabs: isCreator && isVideoChatEnabled && isVideoChatEnabledInSettings && !isArchived ? courses?.length ? fabs : [[vchatFab]] : isCreator && courses?.length && !isArchived ? [[fabs[0][0], assignmentsFab]] : [],
+      fabs: isCreator && isVideoChatEnabled && isVideoChatEnabledInSettings && !isArchived ? courses?.length ? fabs : [[vchatFab, assignmentsFab]] : isCreator && courses?.length && !isArchived ? [[fabs[0][0], assignmentsFab]] : [],
       centered: true,
       scrollable: true,
       hasNewAssignments: hasNewAssignments,

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, Fragment } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "tss-react/mui";
-import { Typography, Box, List, Dialog, DialogContent, Card, CardActionArea, Button, ButtonGroup, IconButton, Tooltip, CircularProgress, Divider } from "@mui/material";
+import { Typography, Box, List, Dialog, DialogContent, Card, CardActionArea, Button, Select, FormControl, InputLabel, IconButton, Tooltip, CircularProgress, Divider, MenuItem } from "@mui/material";
 import { red, orange, green, grey } from "@mui/material/colors";
 import Styles from "../../utils/Styles";
 import ConfirmDeleteDiscussion from "../../Dialogs/ConfirmDeleteDiscussion/ConfirmDeleteDiscussion";
@@ -46,7 +46,7 @@ const MeetingPromptsList = withStyles(({
   const [isEditMeetingDialogOpen, setIsEditMeetingDialogOpen] = useState(false);
   const [groupedId, setGroupedId] = useState("");
   const [meetingMembers, setMeetingMembers] = useState([]);
-  const [filter, setFilter] = useState("active"); // New state for filter
+  const [filter, setFilter] = useState("all");
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [attendeesData, setAttendeesData] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -76,12 +76,30 @@ const MeetingPromptsList = withStyles(({
     acc[item.groupedId].push(item);
     return acc;
   }, {});
-  const filteredDiscussions = scheduleListData.filter(item => filter === "active" ? !item.archived : item.archived);
+  const now = dayjs();
+  const filteredDiscussions = scheduleListData.filter(item => {
+    const meetingDateTime = dayjs(`${item.meetingDate} ${item.meetingTime}`, "MM/DD/YYYY h:mm A");
+    if (filter === "archived") return item.archived;
+    if (item.archived) return false;
+    switch (filter) {
+      case "all":
+        return true;
+      case "dueNext":
+        return meetingDateTime.isSame(now, "day") || meetingDateTime.isAfter(now);
+      case "pastDue":
+        return meetingDateTime.isBefore(now, "day");
+      default:
+        return true;
+    }
+  });
   const uniqueGroupedIds = [...new Set(filteredDiscussions.map(item => item.groupedId))];
   const filteredScheduleListData = uniqueGroupedIds.map(id => filteredDiscussions.find(item => item.groupedId === id));
   const sortedScheduleListData = filteredScheduleListData.sort((a, b) => {
     const dateTimeA = new Date(`${a.meetingDate} ${a.meetingTime}`);
     const dateTimeB = new Date(`${b.meetingDate} ${b.meetingTime}`);
+    if (filter === "dueNext") {
+      return dateTimeA - dateTimeB;
+    }
     return dateTimeB - dateTimeA;
   });
   const groupedRecordings = submissionsTableData.reduce((acc, item) => {
@@ -123,7 +141,7 @@ const MeetingPromptsList = withStyles(({
     const diffDays = meetingDateTime.startOf("day").diff(now.startOf("day"), "day");
     let dueText = "";
     if (diffDays < 0) {
-      dueText = t("overdue");
+      dueText = t("past_due");
     } else if (diffDays === 0) {
       dueText = t("due_today");
     } else if (diffDays === 1) {
@@ -131,42 +149,36 @@ const MeetingPromptsList = withStyles(({
     } else {
       dueText = `${t("due_in")} ${diffDays} ${t("days")}`;
     }
-    return `${formattedDate} - ${dueText}`;
+    return `${dueText} - ${formattedDate}`;
   };
   return /*#__PURE__*/_jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        marginBottom: 2
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "headline",
-        color: "inherit",
-        fontSize: 24,
-        children: t("discussions")
-      })
-    }), /*#__PURE__*/_jsxs(ButtonGroup, {
+    children: [/*#__PURE__*/_jsxs(FormControl, {
+      size: "large",
       sx: {
-        marginTop: 2,
-        marginBottom: 1,
-        borderRadius: 0
+        minWidth: 140,
+        marginTop: "8px",
+        marginBottom: "16px"
       },
-      variant: "outlined",
-      children: [/*#__PURE__*/_jsx(Button, {
-        sx: {
-          borderRadius: 1
-        },
-        color: "primary",
-        variant: filter === "active" ? "contained" : "outlined",
-        onClick: () => setFilter("active"),
-        children: t("active")
-      }), /*#__PURE__*/_jsx(Button, {
-        sx: {
-          borderRadius: 1
-        },
-        color: "primary",
-        variant: filter === "archived" ? "contained" : "outlined",
-        onClick: () => setFilter("archived"),
-        children: t("archived")
+      children: [/*#__PURE__*/_jsx(InputLabel, {
+        children: t("view")
+      }), /*#__PURE__*/_jsxs(Select, {
+        value: filter,
+        onChange: e => setFilter(e.target.value),
+        label: t("view"),
+        autoWidth: true,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          value: "all",
+          children: t("all")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "dueNext",
+          children: t("due_next")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "pastDue",
+          children: t("past_due")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "archived",
+          children: t("archived")
+        })]
       })]
     }), /*#__PURE__*/_jsxs(List, {
       children: [sortedScheduleListData.slice(0, cardsToShow).map((discussion, i) => {
@@ -184,6 +196,7 @@ const MeetingPromptsList = withStyles(({
             component: "a",
             onClick: () => {
               setSelectedGroup(discussion);
+              setSelectedDiscussion(discussion);
               setGroupedId(discussion?.groupedId);
               openDialog();
             },
@@ -198,7 +211,7 @@ const MeetingPromptsList = withStyles(({
                   alignItems: "center"
                 },
                 children: [/*#__PURE__*/_jsx(Typography, {
-                  variant: "h6",
+                  variant: "body1",
                   fontWeight: 600,
                   sx: {
                     color: "text.primary"
@@ -210,13 +223,14 @@ const MeetingPromptsList = withStyles(({
                     alignItems: "center",
                     gap: 1
                   },
-                  children: filter === "active" && /*#__PURE__*/_jsxs(_Fragment, {
+                  children: filter !== "archived" && /*#__PURE__*/_jsxs(_Fragment, {
                     children: [/*#__PURE__*/_jsx(Typography, {
-                      variant: "body2",
+                      variant: "button",
                       color: "text.secondary",
                       sx: {
                         ml: 1.5,
-                        fontWeight: 500
+                        fontWeight: 500,
+                        mr: "16px"
                       },
                       children: formatMeetingDueText(discussion?.meetingDate, discussion?.meetingTime, t)
                     }), /*#__PURE__*/_jsx(Tooltip, {
@@ -253,7 +267,8 @@ const MeetingPromptsList = withStyles(({
                 })]
               }), /*#__PURE__*/_jsx(Divider, {
                 sx: {
-                  my: 1.5
+                  mt: "16px",
+                  mb: "10px"
                 }
               }), /*#__PURE__*/_jsxs(Box, {
                 sx: {
@@ -326,7 +341,7 @@ const MeetingPromptsList = withStyles(({
                         variant: "caption",
                         sx: {
                           mt: 1,
-                          fontWeight: 'bold',
+                          fontWeight: "bold",
                           color: ringColor,
                           textAlign: "center",
                           textTransform: "uppercase",
@@ -374,7 +389,9 @@ const MeetingPromptsList = withStyles(({
       playerRef: playerRef,
       conversation: conversation,
       handleCreateFeedback: handleCreateFeedback,
-      onFeedbackSubmitted: getRecordings
+      onFeedbackSubmitted: getRecordings,
+      editBackgroundImages: editBackgroundImages[0],
+      editMeetingImages: editMeetingImages[0]
     }), /*#__PURE__*/_jsx(Dialog, {
       role: "dialog",
       open: isRecordingDialogOpen,

package/dist/Tables/ScheduleListCards/ScheduleListCards.js

@@ -34,17 +34,7 @@ const ScheduleListCards = withStyles(({
     return dateTimeA - dateTimeB;
   }
   return /*#__PURE__*/_jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        marginBottom: 2
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "headline",
-        color: "inherit",
-        fontSize: 24,
-        children: t("scheduled")
-      })
-    }), loading ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [loading ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(LoadingCard, {}), /*#__PURE__*/_jsx(LoadingCard, {})]
     }) : futureMeetings && futureMeetings.length > 0 ? futureMeetings.sort(compare).slice(0, cardsToShow) // Modify mapping to display only the desired number of cards
     .map((row, i) => /*#__PURE__*/_jsx(ScheduleCard, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1306",
+  "version": "0.1.1308",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -21,7 +21,6 @@
     "@hookform/resolvers": "^3.6.0",
     "@json2csv/plainjs": "^7.0.1",
     "@nualang/avatars": "2.0.3",
-    "@nualang/nualang-api-and-queries": "^1.1.23",
     "@nualang/rivescript": "^2.2.2-alpha1",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.2",
@@ -74,7 +73,6 @@
     "react-markdown": "^8.0.7",
     "react-modal-promise": "^1.0.2",
     "react-papaparse": "^4.1.0",
-    "react-pdf": "^7.7.1",
     "react-player": "^3.3.2",
     "react-qrcode-logo": "^3.0.0",
     "react-refresh": "^0.17.0",
@@ -102,6 +100,7 @@
     "@mui/system": "^7.0.2",
     "@mui/x-date-pickers": "^7.28.3",
     "@nualang/eslint-config-nualang": "0.2.0-alpha-4",
+    "@nualang/nualang-api-and-queries": "^1.1.25",
     "@react-theming/storybook-addon": "^1.1.10",
     "@storybook/addon-docs": "^10.0.2",
     "@storybook/addon-links": "^10.0.2",
@@ -130,6 +129,7 @@
     "prettier": "^3.2.5",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-pdf": "^10.2.0",
     "react-router-dom": "^6.30.0",
     "rimraf": "^6.1.0",
     "storybook": "^10.0.2",