@nualang/nualang-ui-components 0.1.1305 → 0.1.1306

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -0,0 +1,365 @@
+import { useState, useEffect, useRef } from "react";
+import { Card, CardContent, CardActions, Typography, Avatar, Box, Button, TextField, Chip, Grid } from "@mui/material";
+import { grey, green } from "@mui/material/colors";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import RecordingDialog from "../../Dialogs/RecordingDialog/RecordingDialog";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function FeedbackCard({
+  t = x => x,
+  discussionData = {},
+  userData = [],
+  hasSubmission = false,
+  aiGrade = {},
+  onGenerateFeedback = () => {},
+  onSubmitFeedback = () => {},
+  setSelectedRecording = () => {},
+  s3Url = "",
+  conversation = {},
+  existingFeedback = {}
+}) {
+  const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
+  const [hasBeenEdited, setHasBeenEdited] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [aiJustGenerated, setAiJustGenerated] = useState(false);
+  const formikRef = useRef(null);
+  const initialValuesRef = useRef(null);
+  const selectedMembers = userData.filter(u => [discussionData?.meetingMembers || discussionData?.userIds].flat().includes(u?.memberId));
+  const joinedMembers = discussionData?.joinedMembers || [];
+  let attendedMembers = [];
+  let notAttendedMembers = [];
+  if (hasSubmission) {
+    attendedMembers = selectedMembers.filter(m => joinedMembers.includes(m?.memberId));
+    notAttendedMembers = selectedMembers.filter(m => !joinedMembers.includes(m?.memberId));
+  }
+  const hasFeedbackSubmitted = hasSubmission && attendedMembers.every(member => {
+    const feedback = existingFeedback[member.memberId];
+    return feedback && feedback.feedbackText && feedback.feedbackText.trim() !== "";
+  });
+  const getInitialValues = () => {
+    const feedbackData = {};
+    if (hasSubmission) {
+      attendedMembers.forEach(student => {
+        const existingStudentFeedback = existingFeedback[student.memberId];
+        feedbackData[student.memberId] = {
+          feedbackText: existingStudentFeedback?.feedbackText || ""
+        };
+      });
+      notAttendedMembers.forEach(student => {
+        feedbackData[student.memberId] = {
+          feedbackText: existingFeedback[student.memberId]?.feedbackText || t("not_present")
+        };
+      });
+    } else {
+      selectedMembers.forEach(student => {
+        feedbackData[student.memberId] = {
+          feedbackText: existingFeedback[student.memberId]?.feedbackText || ""
+        };
+      });
+    }
+    return {
+      feedbackData
+    };
+  };
+  const attendeesInThisDiscussion = userData.filter(user => [discussionData?.meetingMembers || discussionData?.userIds].flat().includes(user?.memberId));
+  const handleOpenRecordingDialog = () => {
+    if (hasSubmission) {
+      setSelectedRecording({
+        meetingId: discussionData?.meetingId,
+        extMeetingId: discussionData?.extMeetingId,
+        creator: discussionData?.creator || discussionData?.userId,
+        meetingCreator: discussionData?.meetingCreator
+      });
+      setIsRecordingDialogOpen(true);
+    }
+  };
+  useEffect(() => {
+    const initialVals = getInitialValues();
+    const previous = initialValuesRef.current;
+    const hasChanged = JSON.stringify(previous) !== JSON.stringify(initialVals);
+    if (hasChanged) {
+      initialValuesRef.current = initialVals;
+      setIsSubmitted(false);
+    }
+  }, [existingFeedback, hasSubmission, selectedMembers, attendedMembers, notAttendedMembers, t]);
+  useEffect(() => {
+    const formik = formikRef.current;
+    if (!formik) return;
+    if (!hasSubmission || !aiGrade || Object.keys(aiGrade).length === 0) return;
+    if (!aiJustGenerated) return;
+    userData.forEach(student => {
+      const keyVariants = [student.username, `${student.username}Student`, student.username?.replace(/\s+/g, "")];
+      const aiData = keyVariants.map(k => aiGrade?.[k]).find(v => v && typeof v === "object") || null;
+      if (aiData?.Feedback) {
+        formik.setFieldValue(`feedbackData.${student.memberId}.feedbackText`, aiData.Feedback);
+      }
+    });
+    setHasBeenEdited(true);
+    setIsSubmitted(false);
+    setAiJustGenerated(false);
+  }, [aiGrade, hasSubmission, userData, aiJustGenerated]);
+  const handleGenerateAI = async () => {
+    setAiJustGenerated(true);
+    await onGenerateFeedback(discussionData);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Formik, {
+      innerRef: formikRef,
+      initialValues: getInitialValues(),
+      validationSchema: getFeedbackValidationSchema(attendedMembers.map(m => m.memberId)),
+      onSubmit: async (values, {
+        setSubmitting
+      }) => {
+        setSubmitting(true);
+        try {
+          const allStudents = selectedMembers.map(m => m.memberId);
+          const feedbackDataWithAbsent = {
+            ...values.feedbackData
+          };
+          notAttendedMembers.forEach(student => {
+            feedbackDataWithAbsent[student.memberId] = {
+              feedbackText: t("not_present")
+            };
+          });
+          await onSubmitFeedback({
+            feedbackData: feedbackDataWithAbsent,
+            selectedAttendee: allStudents,
+            discussionData
+          });
+          initialValuesRef.current = JSON.parse(JSON.stringify(values));
+          setHasBeenEdited(false);
+          setIsSubmitted(true);
+        } catch (error) {
+          console.error("Error submitting feedback:", error);
+        } finally {
+          setSubmitting(false);
+        }
+      },
+      enableReinitialize: false,
+      children: ({
+        values,
+        handleSubmit,
+        setFieldValue,
+        isSubmitting
+      }) => {
+        const isFormValid = () => {
+          if (!hasSubmission) return false;
+          return attendedMembers.every(member => {
+            const feedback = values.feedbackData[member.memberId];
+            return feedback?.feedbackText && feedback.feedbackText.trim() !== "";
+          });
+        };
+        const hasChanges = () => {
+          if (!initialValuesRef.current) return false;
+          return attendedMembers.some(member => {
+            const current = values.feedbackData[member.memberId]?.feedbackText || "";
+            const initial = initialValuesRef.current.feedbackData[member.memberId]?.feedbackText || "";
+            return current !== initial;
+          });
+        };
+        const canSubmit = hasSubmission && !isSubmitting && isFormValid() && (hasChanges() || hasBeenEdited) && !isSubmitted;
+        return /*#__PURE__*/_jsx("form", {
+          onSubmit: handleSubmit,
+          children: /*#__PURE__*/_jsxs(Card, {
+            sx: {
+              mb: 3,
+              borderRadius: 3,
+              boxShadow: 3,
+              overflow: "hidden"
+            },
+            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, {
+                    variant: "subtitle2",
+                    children: t("student")
+                  })
+                }), /*#__PURE__*/_jsx(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 9.5
+                  },
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "subtitle2",
+                    children: t("feedback")
+                  })
+                })]
+              })
+            }), /*#__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
+                      },
+                      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,
+                py: 2,
+                justifyContent: "space-between",
+                alignItems: "center",
+                flexWrap: "wrap",
+                gap: 1.5
+              },
+              children: [/*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  gap: 1.5
+                },
+                children: [!hasSubmission && /*#__PURE__*/_jsx(Chip, {
+                  label: t("group_not_submitted"),
+                  color: "warning",
+                  variant: "filled",
+                  icon: /*#__PURE__*/_jsx(ErrorOutlineIcon, {}),
+                  sx: {
+                    fontWeight: 500,
+                    borderRadius: "20px"
+                  }
+                }), hasFeedbackSubmitted && /*#__PURE__*/_jsx(Chip, {
+                  label: t("feedback_submitted"),
+                  color: "success",
+                  variant: "filled",
+                  icon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+                  sx: {
+                    fontWeight: 500,
+                    borderRadius: "20px",
+                    bgcolor: green[600]
+                  }
+                })]
+              }), /*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  gap: 1.5,
+                  ml: "auto"
+                },
+                children: [/*#__PURE__*/_jsx(Button, {
+                  variant: "outlined",
+                  disabled: !hasSubmission,
+                  onClick: handleOpenRecordingDialog,
+                  children: t("view_recording")
+                }), /*#__PURE__*/_jsx(Button, {
+                  variant: "contained",
+                  color: "secondary",
+                  disabled: !hasSubmission,
+                  onClick: handleGenerateAI,
+                  endIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+                  children: t("generate_feedback")
+                }), /*#__PURE__*/_jsx(Button, {
+                  type: "submit",
+                  variant: "contained",
+                  disabled: !canSubmit,
+                  children: isSubmitting ? t("submitting") : t("submit_feedback")
+                })]
+              })]
+            })]
+          })
+        });
+      }
+    }), /*#__PURE__*/_jsx(RecordingDialog, {
+      t: t,
+      open: isRecordingDialogOpen,
+      handleClose: () => setIsRecordingDialogOpen(false),
+      meetingID: discussionData?.meetingID || discussionData?.meetingId,
+      meetingPrompt: discussionData?.meetingPrompt,
+      meetingTopic: discussionData?.meetingTopic,
+      isTeacher: true,
+      attendeesData: attendeesInThisDiscussion,
+      conversation: conversation,
+      s3Url: s3Url,
+      playerRef: {
+        current: null
+      },
+      aiGrade: aiGrade,
+      hasBadLanguage: discussionData?.hasBadLanguage || false
+    })]
+  });
+}
+const getFeedbackValidationSchema = attendedMemberIds => {
+  return Yup.object().shape({
+    feedbackData: Yup.object().test("all-attended-filled", "All attended students must have feedback", function (value) {
+      if (!attendedMemberIds || attendedMemberIds.length === 0) return true;
+      return attendedMemberIds.every(memberId => {
+        const feedback = value?.[memberId];
+        return feedback?.feedbackText && feedback.feedbackText.trim() !== "";
+      });
+    })
+  });
+};

package/dist/Cards/RecordingCard/RecordingCard.js

@@ -1,148 +1,190 @@
-import { Fragment } from "react";
+import { useState } from "react";
 import Typography from "@mui/material/Typography";
 import Avatar from "@mui/material/Avatar";
-import Tooltip from "@mui/material/Tooltip";
+import AvatarGroup from "@mui/material/AvatarGroup";
+import Chip from "@mui/material/Chip";
 import Box from "@mui/material/Box";
-import { Card, CardContent, CardActions, Button, Grid, Divider, Stack } from "@mui/material";
+import { Card, CardActionArea, Divider, Button, Tooltip } from "@mui/material";
 import PropTypes from "prop-types";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function RecordingCard({
   isTeacher = false,
   recordingsListData = {},
   handleView = () => {},
-  handleViewFeedback = () => {},
-  userData = {},
+  userData = [],
   t = x => x
 }) {
-  const selectedMembers = userData?.filter(o1 => [recordingsListData?.userIds].flat().some(o2 => o1?.memberId === o2));
-  function formatDateToMMDDYYYY(isoTimestamp) {
-    const date = new Date(isoTimestamp);
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    const year = date.getFullYear();
-    return `${month}/${day}/${year}`;
-  }
-  function formatDateTime(isoTimestamp) {
-    const date = new Date(isoTimestamp);
-    const hours = date.getHours();
-    const minutes = String(date.getMinutes()).padStart(2, "0");
-    const period = hours >= 12 ? "PM" : "AM";
-    const formattedHours = (hours % 12 === 0 ? 12 : hours % 12).toString().padStart(2, "0");
-    return `${formattedHours}:${minutes} ${period}`;
-  }
+  const [promptExpanded, setPromptExpanded] = useState(false);
+  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));
+  const formatMeetingDueText = (timestamp, t) => {
+    const meetingDateTime = dayjs(timestamp);
+    const now = dayjs();
+    const formattedDate = meetingDateTime.format("D MMM YYYY • h:mm A");
+    const diffDays = meetingDateTime.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 `${formattedDate} - ${dueText}`;
+  };
+  const renderExpandableText = (text, expanded, setExpanded, maxChars = 150) => {
+    if (!text) return null;
+    const isLong = text.length > maxChars;
+    const displayedText = expanded || !isLong ? text : text.substring(0, maxChars) + "...";
+    return /*#__PURE__*/_jsxs(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      sx: {
+        lineHeight: 1.6,
+        whiteSpace: "pre-line",
+        mb: 1
+      },
+      children: [displayedText, " ", isLong && /*#__PURE__*/_jsx(Button, {
+        size: "small",
+        onClick: e => {
+          e.stopPropagation();
+          setExpanded(!expanded);
+        },
+        children: expanded ? t("show_less") : t("show_more")
+      })]
+    });
+  };
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       display: "flex",
       marginBottom: 2,
       boxShadow: 3
     },
-    children: /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsx(Grid, {
-        size: 8,
-        children: /*#__PURE__*/_jsx(CardContent, {
-          children: /*#__PURE__*/_jsxs(Fragment, {
-            children: [/*#__PURE__*/_jsxs(Box, {
+    children: /*#__PURE__*/_jsx(CardActionArea, {
+      component: "a",
+      onClick: handleView,
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          p: 2
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
+          children: [/*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              fontWeight: 600,
               sx: {
-                display: "flex",
-                alignItems: "center"
+                color: "text.primary"
               },
-              children: [/*#__PURE__*/_jsx(Stack, {
-                direction: "row",
-                spacing: 2,
-                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__*/_jsxs(_Fragment, {
-                children: [/*#__PURE__*/_jsx(Divider, {
-                  orientation: "vertical",
-                  flexItem: true,
-                  sx: {
-                    marginLeft: 2,
-                    marginRight: 2
-                  }
-                }), /*#__PURE__*/_jsx(Stack, {
-                  direction: "row",
-                  spacing: 2,
-                  children: notAttendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
-                    title: `${attendee?.username} - Not Present`,
-                    children: /*#__PURE__*/_jsx(Avatar, {
-                      alt: attendee?.username,
-                      src: attendee?.userImage,
-                      sx: {
-                        filter: "grayscale(100%)"
-                      }
-                    })
-                  }, attendee?.memberId))
-                })]
-              })]
-            }), /*#__PURE__*/_jsx(Box, {
+              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: {
+              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, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            },
+            children: [/*#__PURE__*/_jsx(AvatarGroup, {
+              max: 4,
               sx: {
-                paddingTop: 1
+                display: "flex",
+                "& .MuiAvatar-root": {
+                  width: 40,
+                  height: 40,
+                  fontSize: "1rem"
+                }
               },
-              children: /*#__PURE__*/_jsx(Typography, {
-                fontWeight: "bold",
-                children: recordingsListData.meetingTopic
-              })
-            }), /*#__PURE__*/_jsx(Box, {
+              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,
               sx: {
-                paddingTop: 1
+                display: "flex",
+                ml: 2,
+                "& .MuiAvatar-root": {
+                  width: 40,
+                  height: 40,
+                  fontSize: "1rem",
+                  filter: "grayscale(100%)"
+                }
               },
-              children: /*#__PURE__*/_jsx(Typography, {
-                sx: {
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  width: "100%"
-                },
-                children: recordingsListData.meetingPrompt
-              })
-            }), /*#__PURE__*/_jsxs(Typography, {
-              children: [formatDateToMMDDYYYY(recordingsListData.timestamp), " \u2022", " ", formatDateTime(recordingsListData.timestamp)]
+              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(Grid, {
-        sx: {
-          display: "flex",
-          justifyContent: "center"
-        },
-        size: 2,
-        children: /*#__PURE__*/_jsx(CardActions, {
-          children: !isTeacher && recordingsListData?.gradingOption && /*#__PURE__*/_jsx(Button, {
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
             color: "primary",
-            onClick: handleViewFeedback,
-            "aria-label": `Feedback, Recorded Discussion: ${recordingsListData.meetingTopic}`,
+            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(Grid, {
-        sx: {
-          display: "flex",
-          justifyContent: "center",
-          width: "20px",
-          textOverflow: "ellipsis"
-        },
-        size: 2,
-        children: /*#__PURE__*/_jsx(CardActions, {
-          children: /*#__PURE__*/_jsx(Button, {
-            color: "primary",
-            onClick: handleView,
-            "aria-label": `View, Recorded Discussion: ${recordingsListData.meetingTopic}`,
-            children: t("view")
-          })
-        })
-      })]
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            sx: {
+              fontStyle: "italic"
+            },
+            children: recordingsListData.feedbackText
+          })]
+        })]
+      })
     })
   });
 }
@@ -151,6 +193,5 @@ RecordingCard.propTypes = {
   recordingsListData: PropTypes.object,
   userData: PropTypes.object,
   handleView: PropTypes.func,
-  t: PropTypes.func,
-  handleViewFeedback: PropTypes.func
+  t: PropTypes.func
 };