l-min-components 1.7.1421 → 1.7.1422

package/src/components/reportsComponents/hooks/useRreportUtils.jsx

@@ -60,6 +60,28 @@ const quizResponses = ({ responses = [], type = "scripted" }) => {
   });
 };
 
+const getColor = (aiScore) => {
+  if (!aiScore) return;
+  let color = "";
+  if (aiScore <= 27) {
+    color = "rgba(249, 84, 84, 1)";
+  } else if (aiScore >= 28 && aiScore <= 45) {
+    color = "rgba(151, 71, 255, 1)";
+  } else if (aiScore >= 46 && aiScore <= 60) {
+    color = "rgba(219, 136, 13, 1)";
+  } else if (aiScore >= 61 && aiScore <= 74) {
+    color = "rgba(229, 173, 14, 1)";
+  } else if (aiScore >= 75 && aiScore <= 87) {
+    color = "rgba(13, 95, 219, 1)";
+  } else if (aiScore >= 88 && aiScore <= 94) {
+    color = "rgba(13, 125, 150, 1)";
+  } else if (aiScore >= 95) {
+    color = "rgba(85, 193, 0, 1)";
+  }
+
+  return color;
+};
+
 const dialogueResponses = ({
   responses = [],
   type = "scriped",
@@ -85,15 +107,26 @@ const dialogueResponses = ({
 
 const getTrabScriptData = (models) => {
   if (models?.length && models) {
-    return models
-      ?.find((item) => item?.id === "speech_analysis")
-      ?.words?.map((item) => ({
-        aiScore: item?.["Word Score"],
-        text: item?.wordText,
-      }));
+    const speechAnalysisModel = models.find(
+      (item) => item?.id === "speech_analysis"
+    );
+
+    if (speechAnalysisModel?.words) {
+      return speechAnalysisModel.words.map((item) => {
+        const aiScore = item?.["Word Score"] || 0;
+        let color = getColor(aiScore);
+
+        return {
+          aiScore: aiScore,
+          text: item?.wordText,
+          color: color,
+        };
+      });
+    }
   }
   return null;
 };
+
 const setupAnalysis = (data, audioData, score) => {
   if (!data || typeof data !== "object") return;
   const formatted = [];
@@ -187,6 +220,7 @@ const setupAnalysis = (data, audioData, score) => {
     data?.speech_analysis?.[0]?.model_data?.["Reference"]
   ) {
     const speechAnalysisData = data?.speech_analysis?.[0]?.model_data;
+    console.log(speechAnalysisData, "yyyy");
     const score = speechAnalysisData?.["General Score"] || 0;
 
     const words = Object.values(
@@ -294,6 +328,7 @@ const setupAnalysis = (data, audioData, score) => {
         id: idx + 1,
         wordText: word?.Word?.toLowerCase(),
         isGood: word?.["Word Score"] > 45,
+        color: getColor(word?.["Word Score"]),
         optionData,
       };
     });
@@ -570,6 +605,12 @@ const grammerCorrectParagraph = (data) => {
 
   return paragraph;
 };
+const formatNumber = (number) => {
+  if (!number && typeof number !== "number") return "0.00";
+
+  const formattedNumber = number?.toFixed(2);
+  return formattedNumber;
+};
 const useReportUtils = () => {
   return {
     renderCorrectedSentence,
@@ -584,6 +625,7 @@ const useReportUtils = () => {
     grammarFeekbackResult,
     grammarCorrectResult,
     grammerCorrectParagraph,
+    formatNumber,
   };
 };
 

package/src/components/reportsComponents/reportQuestions/components/modals/gradingModal.jsx

@@ -16,11 +16,11 @@ const GradingModal = ({
   const [selected, setSelected] = useState("manually");
   const [value, setValue] = useState(defaultScore || "");
 
-  const numberValue = Number(value || 0);
+  const numberValue = parseFloat(value || 0);
   const disable = selected === "manually" && (numberValue > 100 || !value);
 
-  const isNumbter = Number(aiValue) || 0;
-  const isSuggestionNumber = Number(suggestionValue) || 0;
+  const isNumbter = parseFloat(aiValue) || 0;
+  const isSuggestionNumber = parseFloat(suggestionValue) || 0;
 
   const handleSetValue = () => {
     setScore?.({

package/src/components/reportsComponents/reportQuestions/components/response.jsx

@@ -31,9 +31,7 @@ const Response = ({
     if (isAiWordFlow && typeof response !== "string") {
       const htmlString = response
         ?.map((item) => {
-          return item.aiScore > 45
-            ? `<span style="color: #30D468;">${item.text}</span>`
-            : `<span style="color: #F95454;">${item.text}</span>`;
+          return `<span style="color: ${item?.color};">${item?.text}</span>`;
         })
         .join(" ");
       return htmlString;
@@ -41,6 +39,7 @@ const Response = ({
     return response;
   };
   const htmlString = setupAiWordFlow();
+
   return (
     <ResponseContainer>
       {title && <h3>{title}</h3>}

package/src/components/reportsComponents/reportQuestions/components/style/response.style.jsx

@@ -21,6 +21,9 @@ export const ResponseContent = styled.div`
 export const ResponseAiWordFlow = styled.div`
   color: #4a4d4d;
   font-size: 16px;
+  &::first-letter {
+    text-transform: capitalize;
+  }
 `;
 
 export const FallbackResponse = styled(ResponseContent)`
@@ -40,5 +43,8 @@ export const FallbackResponse = styled(ResponseContent)`
     &.good-fallback {
       color: #30d468;
     }
+    &::first-letter {
+      text-transform: capitalize;
+    }
   }
 `;

package/src/components/reportsComponents/reportQuestions/contants.jsx

@@ -862,52 +862,45 @@ const reading = {
 };
 
 const natchPair = {
-  question_id: 3113,
-  question_activity_id: 8410,
+  question_id: 3316,
+  question_activity_id: 8636,
   position_index: 0,
-  title: "Try to match animals and the sound they make",
+  title: "Pair 1",
   type: "MATCH_PAIR",
   question_data: {
     type: "MATCH_PAIR",
     question_title: " ",
-    question_data: {
-      Cat: "Meow\n\n",
-      Cow: "Moo",
-      Dog: "Bark",
-      Goat: "Bleat",
-      Lion: "Roar",
-    },
+    question_data: { Boy: "Girl", Hello: "Word", James: "Doe" },
     no_of_attempts: 2,
-    instruction: "Try to match animals and the sound they make",
+    instruction: "Pair 1",
   },
   answer: {
-    session_id: "e0b8fb0cc6a0413e8a48af124c402965",
-    attempt_index: 1,
+    session_id: "52e7d900d7d34c7bba2c9fe385609049",
+    attempt_index: 8,
     token_claimed: 0,
     score: null,
     marked: false,
     expire_at: null,
-    created_at: "2025-07-12T11:35:09.718763Z",
+    created_at: "2025-07-21T13:48:18.454224Z",
     grading_date: null,
     data: {
       type: "MATCH_PAIR",
-      session_id: "1908e1c9f5ab488",
-      submited_datetime: "2025-07-09T16:23:56.644424Z",
+      session_id: "149bdd0fb30745a",
+      submited_datetime: "2025-07-20T18:43:25.848341Z",
       responses: {
-        1: { type: "MatchPair", value: "Bark" },
-        2: { type: "MatchPair", value: "" },
-        3: { type: "MatchPair", value: "Bleat" },
-        4: { type: "MatchPair", value: "" },
-        5: { type: "MatchPair", value: "Moo" },
+        Boy: { type: "MatchPair", value: "Doe" },
+        Hello: { type: "MatchPair", value: "Word" },
+        James: { type: "MatchPair", value: "Girl" },
       },
     },
     comments: null,
   },
   score: 0,
-  ai_score: 0,
+  ai_score: null,
   grading_data: {},
   grade_method: "MANUAL",
-  suggested_score: 0,
+  suggested_score: 33.3,
+  ai_score_available: true,
 };
 
 const quizScriptedWithImage = {

package/src/components/reportsComponents/reportQuestions/index.jsx

@@ -40,6 +40,7 @@ import FullAnalysis from "../fullAnalysis";
 import useApi from "./api";
 import FullPageLoader from "../../fullPageLoader";
 import { OutletContext } from "../..";
+import useReportUtils from "../hooks/useRreportUtils";
 
 /**
  * @param {Object} props
@@ -63,6 +64,7 @@ const ReportQuestions = ({
   const [toggle, setToggle] = useState(null);
   const { affiliateAccount } = useContext(OutletContext);
   const enterpriseId = affiliateAccount?.id;
+  const { formatNumber } = useReportUtils();
   const { handleGradeQuestion, gradeQuestionData } = useApi();
 
   const question = constants.questions.find(
@@ -124,11 +126,11 @@ const ReportQuestions = ({
       {gradeQuestionData?.loading && <FullPageLoader fixed hasBackground />}
       {toggleGrade && (
         <GradingModal
-          aiValue={data?.ai_score}
-          suggestionValue={data?.suggested_score}
+          aiValue={formatNumber(data?.ai_score)}
+          suggestionValue={formatNumber(data?.suggested_score)}
           noAi={noAi}
           setScore={handleScore}
-          defaultScore={intructorScore}
+          defaultScore={formatNumber(intructorScore)}
           showAIScore={showAIScore}
           onClose={() => {
             setToggleGrade(false);
@@ -147,7 +149,7 @@ const ReportQuestions = ({
         <ScoreHeader>
           {accountType === "personal" ? (
             <ScoreBadge>
-              Instructor’s score: <span>{parseInt(intructorScore || 0)}%</span>
+              Instructor’s score: <span>{formatNumber(intructorScore)}%</span>
             </ScoreBadge>
           ) : (
             <>
@@ -158,7 +160,7 @@ const ReportQuestions = ({
                     hidden: !noAi,
                   })}
                 >
-                  Score: <span>{parseInt(data?.suggested_score || 0)}%</span>
+                  Score: <span>{formatNumber(data?.suggested_score)}%</span>
                 </ScoreBadge>
               ) : (
                 showAIScore && (
@@ -168,7 +170,7 @@ const ReportQuestions = ({
                       hidden: noAi,
                     })}
                   >
-                    AI score: <span>{parseInt(data?.ai_score || 0)}%</span>
+                    AI score: <span>{formatNumber(data?.ai_score)}%</span>
                   </ScoreBadge>
                 )
               )}
@@ -181,7 +183,7 @@ const ReportQuestions = ({
                   }
                 >
                   Instructor’s score:{" "}
-                  <span>{parseInt(intructorScore || 0)}%</span>
+                  <span>{formatNumber(intructorScore)}%</span>
                 </ScoreBadge>
                 {(accountType === "instructor-personal" ||
                   accountType === "instructor-affiliate") && (

package/src/components/reportsComponents/reportQuestions/questions/matchPair.jsx

@@ -14,16 +14,14 @@ import ButtonComponent from "../../../button";
 const MatchPair = ({ data }) => {
   const [pairPreview, setPairPreview] = useState(null);
   const getMatchAndCorrectPair = () => {
-    if (data?.question_data?.question_data) {
-      const questionList = Object.entries(
-        data?.question_data?.question_data || {}
-      );
-      const answerList = Object.values(data?.answer?.data?.responses || {});
-
+    const responses = data?.question_data?.question_data;
+    if (responses) {
+      const questionList = Object.entries(responses || {});
+      const answerResponses = data?.answer?.data?.responses;
       const formattedList = questionList?.map((item, index) => {
         const match = item?.[0];
         const correct = item?.[1];
-        const responseValue = answerList?.[index]?.value;
+        const responseValue = answerResponses?.[match]?.value;
         return {
           question: match,
           answer: responseValue,
@@ -38,6 +36,7 @@ const MatchPair = ({ data }) => {
   };
 
   const matchPairList = getMatchAndCorrectPair();
+
   return (
     <>
       {pairPreview && (