@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/results/renderers/review-speaking-map.js

@@ -1 +1,226 @@
-function e(e){return e&&"object"==typeof e&&!Array.isArray(e)?e:{}}function r(e,r){const t=e[r];return"string"==typeof t?t:""}function t(e,r){const t=e[r];return"number"==typeof t&&Number.isFinite(t)?t:null}function i(t,i,n){if("READ_DISPLAYED_CONTENT"===t)return r(i,"referenceText");if("SPONTANEOUS_QA"===t)return r(i,"questionText");if("SPEAKING_CUE_CARD"===t)return r(i,"cueCardHtml");if("LISTEN_AND_SPEAK_QUESTION_LIST"===t){const r=Array.isArray(n.questions)?n.questions:[],t=i.activeQuestionId,o=r.find(r=>e(r).id===t);return o&&"string"==typeof e(o).text?String(e(o).text):r.map(r=>e(r).text).filter(e=>"string"==typeof e&&e.length>0).join("\n")}return"LISTEN_AND_SPEAK_IMAGE_GROUP"===t||"LISTEN_AND_SPEAK_ANSWER"===t||"LISTEN_AND_SPEAK_COMPARE_IMAGES"===t||"LISTEN_AND_SPEAK_WITH_STORY_IMAGES"===t||"LISTEN_AND_SPEAK_INFO_EXCHANGE"===t||"LISTEN_AND_SPEAK_ODD_ONE_OUT"===t?"":r(i,"question")||r(i,"title")}function n(t,i,n){if("LISTEN_AND_SPEAK_IMAGE_GROUP"===t){const r=Array.isArray(n.images)?n.images:[],t=i.activeImageId,o=r.find(r=>e(r).id===t),a=o?e(o).url:void 0;if("string"==typeof a&&a)return a;const s=r[0]?e(r[0]).url:void 0;return"string"==typeof s?s:""}if("LISTEN_AND_SPEAK_COMPARE_IMAGES"===t)return r(n,"candidateImageUrl")||r(n,"examinerImageUrl");if("LISTEN_AND_SPEAK_WITH_STORY_IMAGES"===t){const e=Array.isArray(i.images)?i.images:[];return"string"==typeof e[0]?e[0]:""}if("LISTEN_AND_SPEAK_ODD_ONE_OUT"===t){const r=Array.isArray(n.images)?n.images:[],t=Array.isArray(i.images)?i.images:[],o=i.activeImageId;if(o&&r.length>0){const t=r.find(r=>e(r).id===o),i=t?e(t).url:void 0;if("string"==typeof i&&i)return i}if(r.length>0){const t=e(r[0]).url;return"string"==typeof t?t:""}return t.length>0&&"string"==typeof t[0]?t[0]:""}return r(i,"backgroundImageUrl")||r(i,"imageUrl")}export function mapSpeakingReviewItems(o,a,s,c){return o.map(o=>{const u=o,y=e(o.content),A=e(s[o.id]),d=e(A.aiAssessment),g=e(d.pronunciation),_=e(A.llmAssessment),f=e(A.classification),l=e(u.correct_answer),p=function(r){const t=r;let i=t.questionGroup?.payload;if("string"==typeof i)try{i=JSON.parse(i)}catch{i={}}return e(i)}(o),S=e(_.feedback),m="string"==typeof S.vi&&S.vi||"string"==typeof S.en&&S.en||"",E="LISTEN_AND_SPEAK_COMPARE_IMAGES"===a?{candidateImageUrl:r(p,"candidateImageUrl"),examinerImageUrl:r(p,"examinerImageUrl")}:void 0,I="LISTEN_AND_SPEAK_WITH_STORY_IMAGES"===a?(Array.isArray(y.images)?y.images:[]).filter(e=>"string"==typeof e):void 0,N="LISTEN_AND_SPEAK_ODD_ONE_OUT"===a?function(r,t){return{groupImages:(Array.isArray(t.images)?t.images:[]).map((r,t)=>{const i=e(r);return{id:"string"==typeof i.id?i.id:String(t),url:"string"==typeof i.url?i.url:"",label:"string"==typeof i.label?i.label:"string"==typeof i.id?i.id:String(t+1)}}),contentImages:(Array.isArray(r.images)?r.images:[]).filter(e=>"string"==typeof e),activeId:"string"==typeof r.activeImageId?r.activeImageId:void 0}}(y,p):void 0,T="LISTEN_AND_SPEAK_INFO_EXCHANGE"===a?function(r){const t=Array.isArray(r.candidateFields)?r.candidateFields.map(r=>{const t=e(r);return{key:"string"==typeof t.key?t.key:"",value:"string"==typeof t.value?t.value:void 0,answer:"string"==typeof t.answer?t.answer:void 0}}):[],i=Array.isArray(r.examinerFields)?r.examinerFields.map(r=>{const t=e(r);return{key:"string"==typeof t.key?t.key:"",value:"string"==typeof t.value?t.value:void 0,answer:"string"==typeof t.answer?t.answer:void 0}}):[];return{title:"string"==typeof r.title?r.title:"",imageUrl:"string"==typeof r.imageUrl?r.imageUrl:"",candidateFields:t,examinerFields:i}}(p):void 0,v=Array.isArray(g.wordErrors)?g.wordErrors.map(r=>{const t=e(r);return{word:"string"==typeof t.word?t.word:"",errorType:"string"==typeof t.errorType?t.errorType:void 0,accuracyScore:"number"==typeof t.accuracyScore?t.accuracyScore:void 0}}):[],O=Array.isArray(l.expectedAnswers)?l.expectedAnswers.filter(e=>"string"==typeof e):[];return{questionId:o.id,questionNumber:o.question_number,questionType:a,promptText:i(a,y,p),promptAudioKey:r(y,"audioUrl")||r(y,"audio")||r(y,"questionAudio"),promptImageKey:n(a,y,p),studentAudioKey:r(A,"audioKey")||r(A,"answer"),score:"number"==typeof u.score?u.score:null,maxScore:Number(u.total_points||0),isCorrect:c[o.id]??null,expectedAnswers:O,recognizedText:r(g,"recognizedText"),pronunciationScore:t(g,"pronunciationScore"),accuracyScore:t(g,"accuracyScore"),fluencyScore:t(g,"fluencyScore"),prosodyScore:t(g,"prosodyScore"),completenessScore:t(g,"completenessScore"),wordErrors:v,weightedScore:t(d,"weightedScore"),contentScore:t(_,"contentScore"),feedbackEn:m,classificationTitle:r(f,"title"),classificationTag:r(f,"tag"),compareImages:E,storyImages:I,oddOneOutImages:N,infoExchange:T}})}
+/**
+ * Map review questions into SpeakingReviewItem for ReviewSpeakingRenderer.
+ * Source: oe-exam-fe ReviewQuestionRenderer speaking cases.
+ */
+function asRecord(value) {
+    return value && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : {};
+}
+function parseGroupPayload(question) {
+    const extended = question;
+    let payload = extended.questionGroup?.payload;
+    if (typeof payload === 'string') {
+        try {
+            payload = JSON.parse(payload);
+        }
+        catch {
+            payload = {};
+        }
+    }
+    return asRecord(payload);
+}
+function readString(record, key) {
+    const value = record[key];
+    return typeof value === 'string' ? value : '';
+}
+function readNumber(record, key) {
+    const value = record[key];
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function resolvePromptText(questionType, questionContent, groupPayload) {
+    if (questionType === 'READ_DISPLAYED_CONTENT') {
+        return readString(questionContent, 'referenceText');
+    }
+    if (questionType === 'SPONTANEOUS_QA') {
+        return readString(questionContent, 'questionText');
+    }
+    if (questionType === 'SPEAKING_CUE_CARD') {
+        return readString(questionContent, 'cueCardHtml');
+    }
+    if (questionType === 'LISTEN_AND_SPEAK_QUESTION_LIST') {
+        const items = Array.isArray(groupPayload.questions) ? groupPayload.questions : [];
+        const activeId = questionContent.activeQuestionId;
+        const found = items.find((item) => asRecord(item).id === activeId);
+        if (found && typeof asRecord(found).text === 'string') {
+            return String(asRecord(found).text);
+        }
+        return items
+            .map((item) => asRecord(item).text)
+            .filter((text) => typeof text === 'string' && text.length > 0)
+            .join('\n');
+    }
+    if (questionType === 'LISTEN_AND_SPEAK_IMAGE_GROUP' ||
+        questionType === 'LISTEN_AND_SPEAK_ANSWER' ||
+        questionType === 'LISTEN_AND_SPEAK_COMPARE_IMAGES' ||
+        questionType === 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' ||
+        questionType === 'LISTEN_AND_SPEAK_INFO_EXCHANGE' ||
+        questionType === 'LISTEN_AND_SPEAK_ODD_ONE_OUT') {
+        return '';
+    }
+    return readString(questionContent, 'question') || readString(questionContent, 'title');
+}
+function resolvePromptImageKey(questionType, questionContent, groupPayload) {
+    if (questionType === 'LISTEN_AND_SPEAK_IMAGE_GROUP') {
+        const images = Array.isArray(groupPayload.images) ? groupPayload.images : [];
+        const activeId = questionContent.activeImageId;
+        const found = images.find((item) => asRecord(item).id === activeId);
+        const foundUrl = found ? asRecord(found).url : undefined;
+        if (typeof foundUrl === 'string' && foundUrl)
+            return foundUrl;
+        const firstUrl = images[0] ? asRecord(images[0]).url : undefined;
+        return typeof firstUrl === 'string' ? firstUrl : '';
+    }
+    if (questionType === 'LISTEN_AND_SPEAK_COMPARE_IMAGES') {
+        return (readString(groupPayload, 'candidateImageUrl') ||
+            readString(groupPayload, 'examinerImageUrl'));
+    }
+    if (questionType === 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES') {
+        const images = Array.isArray(questionContent.images) ? questionContent.images : [];
+        return typeof images[0] === 'string' ? images[0] : '';
+    }
+    if (questionType === 'LISTEN_AND_SPEAK_ODD_ONE_OUT') {
+        const groupImages = Array.isArray(groupPayload.images) ? groupPayload.images : [];
+        const contentImages = Array.isArray(questionContent.images) ? questionContent.images : [];
+        const activeId = questionContent.activeImageId;
+        if (activeId && groupImages.length > 0) {
+            const found = groupImages.find((item) => asRecord(item).id === activeId);
+            const foundUrl = found ? asRecord(found).url : undefined;
+            if (typeof foundUrl === 'string' && foundUrl)
+                return foundUrl;
+        }
+        if (groupImages.length > 0) {
+            const firstUrl = asRecord(groupImages[0]).url;
+            return typeof firstUrl === 'string' ? firstUrl : '';
+        }
+        if (contentImages.length > 0 && typeof contentImages[0] === 'string') {
+            return contentImages[0];
+        }
+        return '';
+    }
+    return (readString(questionContent, 'backgroundImageUrl') ||
+        readString(questionContent, 'imageUrl'));
+}
+function mapOddOneOutImages(questionContent, groupPayload) {
+    const groupImages = (Array.isArray(groupPayload.images) ? groupPayload.images : []).map((item, index) => {
+        const record = asRecord(item);
+        return {
+            id: typeof record.id === 'string' ? record.id : String(index),
+            url: typeof record.url === 'string' ? record.url : '',
+            label: typeof record.label === 'string'
+                ? record.label
+                : typeof record.id === 'string'
+                    ? record.id
+                    : String(index + 1),
+        };
+    });
+    const contentImages = (Array.isArray(questionContent.images) ? questionContent.images : []).filter((item) => typeof item === 'string');
+    const activeId = typeof questionContent.activeImageId === 'string'
+        ? questionContent.activeImageId
+        : undefined;
+    return { groupImages, contentImages, activeId };
+}
+function mapInfoExchange(groupPayload) {
+    const candidateFields = Array.isArray(groupPayload.candidateFields)
+        ? groupPayload.candidateFields.map((item) => {
+            const record = asRecord(item);
+            return {
+                key: typeof record.key === 'string' ? record.key : '',
+                value: typeof record.value === 'string' ? record.value : undefined,
+                answer: typeof record.answer === 'string' ? record.answer : undefined,
+            };
+        })
+        : [];
+    const examinerFields = Array.isArray(groupPayload.examinerFields)
+        ? groupPayload.examinerFields.map((item) => {
+            const record = asRecord(item);
+            return {
+                key: typeof record.key === 'string' ? record.key : '',
+                value: typeof record.value === 'string' ? record.value : undefined,
+                answer: typeof record.answer === 'string' ? record.answer : undefined,
+            };
+        })
+        : [];
+    return {
+        title: typeof groupPayload.title === 'string' ? groupPayload.title : '',
+        imageUrl: typeof groupPayload.imageUrl === 'string' ? groupPayload.imageUrl : '',
+        candidateFields,
+        examinerFields,
+    };
+}
+export function mapSpeakingReviewItems(questions, questionType, answers, isCorrectMap) {
+    return questions.map((question) => {
+        const rawQuestion = question;
+        const questionContent = asRecord(question.content);
+        const studentAnswer = asRecord(answers[question.id]);
+        const aiAssessment = asRecord(studentAnswer.aiAssessment);
+        const pronunciation = asRecord(aiAssessment.pronunciation);
+        const llmAssessment = asRecord(studentAnswer.llmAssessment);
+        const classification = asRecord(studentAnswer.classification);
+        const correctAnswer = asRecord(rawQuestion.correct_answer);
+        const groupPayload = parseGroupPayload(question);
+        const feedback = asRecord(llmAssessment.feedback);
+        const feedbackEn = (typeof feedback.vi === 'string' && feedback.vi) ||
+            (typeof feedback.en === 'string' && feedback.en) ||
+            '';
+        const compareImages = questionType === 'LISTEN_AND_SPEAK_COMPARE_IMAGES'
+            ? {
+                candidateImageUrl: readString(groupPayload, 'candidateImageUrl'),
+                examinerImageUrl: readString(groupPayload, 'examinerImageUrl'),
+            }
+            : undefined;
+        const storyImages = questionType === 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES'
+            ? (Array.isArray(questionContent.images) ? questionContent.images : []).filter((item) => typeof item === 'string')
+            : undefined;
+        const oddOneOutImages = questionType === 'LISTEN_AND_SPEAK_ODD_ONE_OUT'
+            ? mapOddOneOutImages(questionContent, groupPayload)
+            : undefined;
+        const infoExchange = questionType === 'LISTEN_AND_SPEAK_INFO_EXCHANGE'
+            ? mapInfoExchange(groupPayload)
+            : undefined;
+        const wordErrors = Array.isArray(pronunciation.wordErrors)
+            ? pronunciation.wordErrors.map((item) => {
+                const record = asRecord(item);
+                return {
+                    word: typeof record.word === 'string' ? record.word : '',
+                    errorType: typeof record.errorType === 'string' ? record.errorType : undefined,
+                    accuracyScore: typeof record.accuracyScore === 'number' ? record.accuracyScore : undefined,
+                };
+            })
+            : [];
+        const expectedAnswers = Array.isArray(correctAnswer.expectedAnswers)
+            ? correctAnswer.expectedAnswers.filter((item) => typeof item === 'string')
+            : [];
+        return {
+            questionId: question.id,
+            questionNumber: question.question_number,
+            questionType,
+            promptText: resolvePromptText(questionType, questionContent, groupPayload),
+            promptAudioKey: readString(questionContent, 'audioUrl') ||
+                readString(questionContent, 'audio') ||
+                readString(questionContent, 'questionAudio'),
+            promptImageKey: resolvePromptImageKey(questionType, questionContent, groupPayload),
+            studentAudioKey: readString(studentAnswer, 'audioKey') || readString(studentAnswer, 'answer'),
+            score: typeof rawQuestion.score === 'number' ? rawQuestion.score : null,
+            maxScore: Number(rawQuestion.total_points || 0),
+            isCorrect: isCorrectMap[question.id] ?? null,
+            expectedAnswers,
+            recognizedText: readString(pronunciation, 'recognizedText'),
+            pronunciationScore: readNumber(pronunciation, 'pronunciationScore'),
+            accuracyScore: readNumber(pronunciation, 'accuracyScore'),
+            fluencyScore: readNumber(pronunciation, 'fluencyScore'),
+            prosodyScore: readNumber(pronunciation, 'prosodyScore'),
+            completenessScore: readNumber(pronunciation, 'completenessScore'),
+            wordErrors,
+            weightedScore: readNumber(aiAssessment, 'weightedScore'),
+            contentScore: readNumber(llmAssessment, 'contentScore'),
+            feedbackEn,
+            classificationTitle: readString(classification, 'title'),
+            classificationTag: readString(classification, 'tag'),
+            compareImages,
+            storyImages,
+            oddOneOutImages,
+            infoExchange,
+        };
+    });
+}

package/dist/components/results/renderers/review-spontaneous-qa-group.d.ts

@@ -0,0 +1,4 @@
+import type { ExamTakingQuestion } from '../../../api/exam-taking';
+import type { SpeakingReviewItem } from './ReviewSpeakingRenderer.types';
+export declare function getSpontaneousQaGroupInstruction(parent: ExamTakingQuestion | undefined, fallback?: string): string | undefined;
+export declare function mapSpontaneousQaGroupReviewItems(parent: ExamTakingQuestion, studentAnswer: unknown): SpeakingReviewItem[];

package/dist/components/results/renderers/review-spontaneous-qa-group.js

@@ -0,0 +1,74 @@
+import { flattenSpontaneousQaGroupContent } from '../../questions/types/spontaneous-qa-group/flatten';
+const PASS_RATIO = 0.5;
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function readString(value) {
+    return typeof value === 'string' ? value : '';
+}
+function readNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function readWordErrors(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.map((item) => {
+        const record = asRecord(item);
+        return {
+            word: readString(record.word),
+            errorType: typeof record.errorType === 'string' ? record.errorType : undefined,
+            accuracyScore: readNumber(record.accuracyScore) ?? undefined,
+        };
+    });
+}
+export function getSpontaneousQaGroupInstruction(parent, fallback) {
+    const content = asRecord(parent?.content);
+    const meta = asRecord(content.meta);
+    const instruction = readString(meta.instruction);
+    return instruction || fallback;
+}
+export function mapSpontaneousQaGroupReviewItems(parent, studentAnswer) {
+    const answer = asRecord(studentAnswer);
+    const audioKeys = Array.isArray(answer.audioKeys) ? answer.audioKeys : [];
+    const itemAssessments = Array.isArray(answer.itemAssessments) ? answer.itemAssessments : [];
+    return flattenSpontaneousQaGroupContent(parent.content).map((child) => {
+        const assessment = asRecord(itemAssessments[child.flattenIndex]);
+        const aiAssessment = asRecord(assessment.aiAssessment);
+        const pronunciation = asRecord(aiAssessment.pronunciation);
+        const llmAssessment = asRecord(assessment.llmAssessment);
+        const feedback = asRecord(llmAssessment.feedback);
+        const partLabel = [child.partTitle, child.topic].filter(Boolean).join(' — ');
+        const score = readNumber(assessment.score);
+        const maxScore = readNumber(assessment.maxScore) ?? child.points;
+        const audioKey = audioKeys[child.flattenIndex];
+        return {
+            questionId: `${parent.id}-item-${child.flattenIndex}`,
+            questionNumber: child.flattenIndex + 1,
+            questionType: 'SPONTANEOUS_QA_GROUP',
+            promptText: partLabel ? `${partLabel}\n${child.questionText}` : child.questionText,
+            promptAudioKey: child.audioUrl,
+            promptImageKey: '',
+            studentAudioKey: typeof audioKey === 'string' ? audioKey : '',
+            score,
+            maxScore,
+            isCorrect: score === null ? null : maxScore > 0 ? score >= maxScore * PASS_RATIO : false,
+            expectedAnswers: child.expectedAnswers,
+            recognizedText: readString(pronunciation.recognizedText),
+            pronunciationScore: readNumber(pronunciation.pronunciationScore),
+            accuracyScore: readNumber(pronunciation.accuracyScore),
+            fluencyScore: readNumber(pronunciation.fluencyScore),
+            prosodyScore: readNumber(pronunciation.prosodyScore),
+            completenessScore: readNumber(pronunciation.completenessScore),
+            wordErrors: readWordErrors(pronunciation.wordErrors),
+            weightedScore: readNumber(aiAssessment.weightedScore),
+            contentScore: readNumber(llmAssessment.contentScore),
+            feedbackEn: readString(feedback.vi) || readString(feedback.en),
+            classificationTitle: '',
+            classificationTag: '',
+        };
+    });
+}

package/dist/components/results/report/BadgeTitle.js

@@ -1 +1,5 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";export function BadgeTitle({number:r,title:s}){return t("div",{className:"absolute left-3 top-[-20px] z-10 flex items-center sm:left-5 sm:top-[-22px]",children:[e("div",{className:"relative z-[2] flex h-9 w-9 items-center justify-center rounded-full border-[3px] border-white bg-[radial-gradient(circle,_#2b78c5_0%,_#0054A6_100%)] text-lg font-extrabold text-white shadow-[0_2px_8px_rgba(0,0,0,0.2)] sm:h-11 sm:w-11 sm:text-xl",children:r}),e("div",{className:"ml-[-18px] rounded-r-[20px] bg-[linear-gradient(90deg,#0054A6_0%,#00AEEF_100%)] px-6 py-1.5 pl-7 text-sm font-bold text-white shadow-[2px_2px_5px_rgba(0,0,0,0.1)] [clip-path:polygon(0%_0%,90%_0%,100%_100%,0%_100%)] sm:ml-[-22px] sm:rounded-r-[25px] sm:px-10 sm:py-2 sm:pl-9 sm:text-base",children:s})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BadgeTitle({ number, title }) {
+    return (_jsxs("div", { className: "absolute left-3 top-[-20px] z-10 flex items-center sm:left-5 sm:top-[-22px]", children: [_jsx("div", { className: "relative z-[2] flex h-9 w-9 items-center justify-center rounded-full border-[3px] border-white bg-[radial-gradient(circle,_#2b78c5_0%,_#0054A6_100%)] text-lg font-extrabold text-white shadow-[0_2px_8px_rgba(0,0,0,0.2)] sm:h-11 sm:w-11 sm:text-xl", children: number }), _jsx("div", { className: "ml-[-18px] rounded-r-[20px] bg-[linear-gradient(90deg,#0054A6_0%,#00AEEF_100%)] px-6 py-1.5 pl-7 text-sm font-bold text-white shadow-[2px_2px_5px_rgba(0,0,0,0.1)] [clip-path:polygon(0%_0%,90%_0%,100%_100%,0%_100%)] sm:ml-[-22px] sm:rounded-r-[25px] sm:px-10 sm:py-2 sm:pl-9 sm:text-base", children: title })] }));
+}

package/dist/components/results/report/ExamSkillRow.js

@@ -1 +1,20 @@
-"use client";import{jsx as e,jsxs as t,Fragment as s}from"react/jsx-runtime";import{cn as x}from"../../../shared/lib/utils";import{formatScore as l}from"../utils/review-score.utils";export function ExamSkillRow({icon:r,label:a,score:m,maxScore:d,barClass:i}){if(null==d)return null;const n=d>0?d:0,p=0===n,c=m??0,o=n>0?Math.max(0,Math.min(100,c/n*100)):0,h=l(c,1),b=l(n,0);return t("div",{className:x("mb-2 flex items-center rounded-full border border-[#eef4fb] bg-white px-3 py-2 shadow-[0_1px_0_rgba(255,255,255,0.9)] last:mb-0 sm:mb-3 sm:px-4 sm:py-3",p&&"opacity-70 bg-slate-50 border-slate-200"),children:[e("div",{className:x("flex h-[48px] w-[48px] shrink-0 items-center justify-center rounded-full bg-white xs:h-[52px] xs:w-[52px] sm:h-[58px] sm:w-[58px]",p?"shadow-none border border-slate-100":"shadow-[0_4px_12px_rgba(15,23,42,0.08)]"),children:e("div",{className:x("flex h-[36px] w-[36px] items-center justify-center rounded-full text-white xs:h-[38px] xs:w-[38px] sm:h-[42px] sm:w-[42px]",p?"bg-slate-300":i),children:e(r,{className:"h-5 w-5 text-white"})})}),t("div",{className:"ml-2 mr-2 min-w-0 flex-1 border-r border-dashed border-[#d9e0ea] pr-2 xs:ml-3 xs:mr-3 xs:pr-3 sm:pr-4",children:[e("h4",{className:x("truncate text-[13px] font-extrabold uppercase leading-5 xs:text-[14px] sm:text-[15px]",p?"text-slate-400":"text-[#0054A6]"),children:a}),e("span",{className:x("mt-0.5 block truncate text-[10px] xs:text-[10.5px] sm:mt-1 sm:text-[11px]",p?"text-slate-400":"text-[#8b97a8]"),children:p?"Không áp dụng":"Kỹ năng"})]}),e("div",{className:x("w-[60px] shrink-0 text-[16px] font-extrabold xs:w-[70px] xs:text-[17px] sm:w-20 sm:text-xl",p?"text-slate-400":"text-[#0054A6]"),children:p?"—":t(s,{children:[h," ",t("small",{className:"text-[11px] font-semibold text-[#c5ced8] xs:text-[11.5px] sm:text-[13px]",children:["/",b]})]})}),e("div",{className:"ml-2 h-[10px] flex-1 overflow-hidden rounded-full bg-[#edf0f4] xs:ml-2.5 sm:ml-3 sm:h-[11px]",children:!p&&e("div",{className:x("h-full rounded-full",i),style:{width:`${o}%`}})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../../../shared/lib/utils';
+import { formatScore } from '../utils/review-score.utils';
+/**
+ * Single skill score row for the general exam report (Reading / Listening / …).
+ */
+export function ExamSkillRow({ icon: Icon, label, score, maxScore, barClass, }) {
+    if (maxScore == null)
+        return null;
+    const safeMaxScore = maxScore > 0 ? maxScore : 0;
+    const isNotApplicable = safeMaxScore === 0;
+    const displayScore = score ?? 0;
+    const percentage = safeMaxScore > 0 ? Math.max(0, Math.min(100, (displayScore / safeMaxScore) * 100)) : 0;
+    const scoreText = formatScore(displayScore, 1);
+    const maxScoreText = formatScore(safeMaxScore, 0);
+    return (_jsxs("div", { className: cn('mb-2 flex items-center rounded-full border border-[#eef4fb] bg-white px-3 py-2 shadow-[0_1px_0_rgba(255,255,255,0.9)] last:mb-0 sm:mb-3 sm:px-4 sm:py-3', isNotApplicable && 'opacity-70 bg-slate-50 border-slate-200'), children: [_jsx("div", { className: cn('flex h-[48px] w-[48px] shrink-0 items-center justify-center rounded-full bg-white xs:h-[52px] xs:w-[52px] sm:h-[58px] sm:w-[58px]', isNotApplicable
+                    ? 'shadow-none border border-slate-100'
+                    : 'shadow-[0_4px_12px_rgba(15,23,42,0.08)]'), children: _jsx("div", { className: cn('flex h-[36px] w-[36px] items-center justify-center rounded-full text-white xs:h-[38px] xs:w-[38px] sm:h-[42px] sm:w-[42px]', isNotApplicable ? 'bg-slate-300' : barClass), children: _jsx(Icon, { className: "h-5 w-5 text-white" }) }) }), _jsxs("div", { className: "ml-2 mr-2 min-w-0 flex-1 border-r border-dashed border-[#d9e0ea] pr-2 xs:ml-3 xs:mr-3 xs:pr-3 sm:pr-4", children: [_jsx("h4", { className: cn('truncate text-[13px] font-extrabold uppercase leading-5 xs:text-[14px] sm:text-[15px]', isNotApplicable ? 'text-slate-400' : 'text-[#0054A6]'), children: label }), _jsx("span", { className: cn('mt-0.5 block truncate text-[10px] xs:text-[10.5px] sm:mt-1 sm:text-[11px]', isNotApplicable ? 'text-slate-400' : 'text-[#8b97a8]'), children: isNotApplicable ? 'Không áp dụng' : 'Kỹ năng' })] }), _jsx("div", { className: cn('w-[60px] shrink-0 text-[16px] font-extrabold xs:w-[70px] xs:text-[17px] sm:w-20 sm:text-xl', isNotApplicable ? 'text-slate-400' : 'text-[#0054A6]'), children: isNotApplicable ? ('—') : (_jsxs(_Fragment, { children: [scoreText, ' ', _jsxs("small", { className: "text-[11px] font-semibold text-[#c5ced8] xs:text-[11.5px] sm:text-[13px]", children: ["/", maxScoreText] })] })) }), _jsx("div", { className: "ml-2 h-[10px] flex-1 overflow-hidden rounded-full bg-[#edf0f4] xs:ml-2.5 sm:ml-3 sm:h-[11px]", children: !isNotApplicable && (_jsx("div", { className: cn('h-full rounded-full', barClass), style: { width: `${percentage}%` } })) })] }));
+}

package/dist/components/results/report/OceanEduExamReport.js

@@ -1 +1,58 @@
-"use client";import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import{useEffect as a,useState as l}from"react";import{BookOpen as n,CalendarDays as x,Headphones as r,IdCard as i,MapPin as m,Mic as c,PenTool as d,Sparkles as o,User as p}from"lucide-react";import{formatScore as h,formatTotalScore as g,getScoreLabel as f,getScoreMessage as b,getScoreStroke as u}from"../utils/review-score.utils";import w from"./assets/logo-ocean.png";import N from"./assets/penguin-main.png";import v from"./assets/penguin-small.png";import F from"./assets/dofu2.png";import{BadgeTitle as E}from"./BadgeTitle";import{ExamSkillRow as y}from"./ExamSkillRow";import{InfoRow as A}from"./SpeakingReportShared";import{resolveAssetUrl as S}from"./speaking-report.utils";export function OceanEduExamReport({studentName:k,studentCode:j,branchName:_,examDateText:T,totalScore:C,maxScore:R,isPendingGrading:H,examSubTitle:M,examTitle:Q,readingScore:I,maxReadingScore:L,listeningScore:U,maxListeningScore:D,writingScore:P,maxWritingScore:G,speakingScore:O,maxSpeakingScore:B,overallAssessmentSlot:K,reviewUrl:q,assetBaseUrl:W,children:z}){const V=f(C,R,H),X=b(C,R,H),J=u(C,R,H),[Y,Z]=l(null),[$,ee]=l(null),te=Q?.toLowerCase().includes("placement test")||M?.toLowerCase().includes("placement test"),se=q??("undefined"!=typeof window?window.location.href:""),ae=S(w,W,"logo-ocean.png"),le=S(N,W,"penguin-main.png"),ne=S(v,W,"penguin-small.png"),xe=S(F,W,"dofu2.png");a(()=>{"undefined"!=typeof window&&import("qrcode").then(e=>{e.default.toDataURL(se,{margin:1,color:{dark:"#0054A6",light:"#ffffff"}}).then(Z).catch(()=>{}),e.default.toDataURL(window.location.origin,{margin:1,color:{dark:"#0054A6",light:"#ffffff"}}).then(ee).catch(()=>{})}).catch(()=>{})},[se]);const re=null!=L||null!=D||null!=G||null!=B;return e("div",{className:"mx-auto w-full max-w-[1120px] py-4 sm:px-4 sm:py-6 md:px-6",children:s("div",{className:"result-exam-container space-y-6",children:[s("div",{className:"overflow-hidden rounded-[12px] bg-white px-3 py-3 shadow-[0_20px_50px_rgba(0,0,0,0.15)] xs:px-4 xs:py-4 sm:rounded-[25px] sm:px-5 sm:py-5 md:rounded-[30px] md:px-8 md:py-6",children:[e("header",{className:"mb-6 md:mb-7",children:s("div",{className:"flex flex-col items-center gap-3 sm:gap-4 md:grid md:grid-cols-[auto_1fr_auto] md:items-center",children:[e("div",{className:"flex items-center justify-center md:justify-start",children:e("img",{src:ae,alt:"Ocean Edu",width:180,className:"h-auto w-[90px] object-contain xs:w-[120px] sm:w-[150px] md:w-[160px] lg:w-[180px]"})}),s("div",{className:"min-w-0 text-center",children:[e("h2",{className:"m-0 text-[16px] font-bold leading-tight text-[#0054A6] xs:text-[20px] sm:text-[22px] md:text-[24px] lg:text-[28px]",children:"PHIẾU KẾT QUẢ"}),e("h1",{className:"mt-1 text-[32px] font-black leading-[0.95] tracking-[-0.5px] text-[#0054A6] xs:text-[40px] sm:text-[40px] md:text-[48px] md:tracking-[-1px] lg:text-[64px]",children:s(t,te?{children:["PLACEMENT ",e("span",{className:"text-[#00AEEF]",children:"TEST"})]}:{children:["EXAM ",e("span",{className:"text-[#00AEEF]",children:"REPORT"})]})}),e("p",{className:"mx-auto mt-1.5 max-w-[520px] text-[12px] font-semibold leading-snug text-[#0054A6] xs:text-[16px] sm:text-sm md:mt-2 md:text-[16px]",children:"Đánh giá năng lực tiếng Anh toàn diện"})]}),e("div",{className:"flex items-center justify-center md:justify-end",children:Y?s("div",{className:"flex flex-col items-center",children:[e("a",{href:se||"#",target:"_blank",rel:"noopener noreferrer",className:"block transition-transform hover:scale-105",children:e("img",{src:Y,alt:"QR Code",className:"h-[80px] w-[80px] rounded-lg border-2 border-[#00AEEF] bg-white p-1 shadow-sm xs:h-[100px] xs:w-[100px] md:h-[120px] md:w-[120px]"})}),e("span",{className:"mt-1.5 text-[9px] font-bold text-[#00AEEF] xs:text-[11px]",children:"Quét hoặc nhấn QR để xem online"})]}):e("img",{src:le,alt:"Mascot",width:250,height:220,className:"h-auto w-[80px] object-contain xs:w-[120px] sm:w-[120px] md:w-[160px] lg:w-[220px]"})})]})}),s("section",{className:"relative mb-10 rounded-[20px] border-2 border-[#00AEEF] px-4 pb-5 pt-10 sm:px-5 sm:pb-6 sm:pt-11 md:px-8",children:[e(E,{number:"1",title:"THÔNG TIN HỌC VIÊN"}),s("div",{className:"flex flex-col items-center justify-between gap-6 md:flex-row md:items-center",children:[s("div",{className:"space-y-3 self-stretch sm:space-y-4",children:[e(A,{icon:p,label:"Họ tên học viên",value:k}),e(A,{icon:i,label:"Mã học viên",value:j||"Đang cập nhật"}),e(A,{icon:m,label:"Chi nhánh",value:_||M||"Ocean Edu"}),e(A,{icon:x,label:"Ngày đánh giá",value:T})]}),e("div",{className:"flex h-[100px] w-[200px] items-center justify-center overflow-hidden rounded-[80px] border-[4px] border-white bg-[linear-gradient(135deg,#EAF6FF_0%,#CFEFFF_45%,#9DDCFF_100%)] shadow-[0_10px_24px_rgba(0,174,239,0.18)] outline outline-2 outline-[#00AEEF] xs:h-[120px] xs:w-[240px] sm:h-[130px] sm:w-[260px] md:h-[150px] md:w-[280px] md:rounded-[100px] md:border-[6px]",children:e("img",{src:xe,alt:"Avatar",width:120,height:120,className:"h-auto w-[40%] scale-[1.2] object-contain md:scale-[1.4]"})})]})]}),s("section",{className:"relative rounded-[20px] border-2 border-[#00AEEF] px-5 pb-6 pt-11 md:px-8",children:[e(E,{number:"2",title:"KẾT QUẢ"}),s("div",{className:"grid gap-6 sm:gap-8 md:grid-cols-[1fr_1.3fr] md:gap-10",children:[s("div",{className:"flex flex-col items-center justify-center border-b border-dashed border-[#ccc] pb-6 text-center sm:pb-8 md:border-b-0 md:border-r md:pb-0 md:pr-8",children:[e("div",{className:"text-[13px] font-extrabold text-[#0054A6] xs:text-[14px] sm:text-[15px]",children:"ĐIỂM TỔNG"}),s("div",{className:"relative mx-auto my-4 flex h-[160px] w-[160px] items-center justify-center rounded-full xs:h-[180px] xs:w-[180px] sm:my-5 sm:h-[200px] sm:w-[200px]",style:{background:J},children:[e("div",{className:"absolute h-[136px] w-[136px] rounded-full bg-white xs:h-[153px] xs:w-[153px] sm:h-[170px] sm:w-[170px]"}),s("div",{className:"relative z-[2] text-center",children:[e("div",{className:"text-[44px] font-black leading-none text-[#0054A6] xs:text-[50px] sm:text-[54px] md:text-[80px]",children:H?"—":g(C)}),s("div",{className:"text-[18px] font-semibold text-[#aaa] xs:text-[20px] sm:text-[22px]",children:["/ ",h(R,0)]})]})]}),e("div",{className:"mt-2 text-[20px] font-extrabold text-[#2ecc71] xs:text-[22px] sm:text-[24px] md:text-[26px]",children:V}),s("div",{className:"mx-auto mt-4 flex w-full max-w-[600px] items-end gap-3 rounded-[20px] border border-[#e1efff] bg-[#F4F9FF] p-3 text-left sm:mt-6 sm:gap-4 sm:p-4",children:[e("img",{src:ne,alt:"Mascot Mini",width:95,height:95,className:"h-auto w-[60px] shrink-0 object-contain xs:w-[80px] sm:w-[90px] md:w-[95px]"}),s("p",{className:"m-0 text-[12px] leading-[1.5] text-[#666] xs:text-[13px]",children:[X,e(o,{className:"ml-1 inline h-4 w-4 text-[#FFD700]"})]})]})]}),s("div",{className:"flex flex-col justify-center rounded-[20px] border border-[#ddecff] bg-[#F4F9FF] p-4 sm:p-5",children:[e("div",{className:"mb-4 text-center text-[16px] font-extrabold text-[#0054A6] xs:text-[18px] sm:mb-5 sm:text-[20px]",children:"ĐIỂM THÀNH PHẦN"}),s("div",{className:"flex flex-col",children:[null!=L&&e(y,{icon:n,label:"Reading",score:I,maxScore:L,barClass:"bg-[#FF9800]"}),null!=D&&e(y,{icon:r,label:"Listening",score:U,maxScore:D,barClass:"bg-[#2196F3]"}),null!=G&&e(y,{icon:d,label:"Writing",score:P,maxScore:G,barClass:"bg-[#9C27B0]"}),null!=B&&e(y,{icon:c,label:"Speaking",score:O,maxScore:B,barClass:"bg-[#4CAF50]"}),!re&&e("div",{className:"py-4 text-center text-sm italic text-slate-500",children:"Không có điểm thành phần"})]})]})]})]}),K,s("footer",{className:"mt-5 grid gap-3 sm:mt-6 sm:gap-4 md:grid-cols-[1fr_1.5fr] md:gap-6",children:[s("div",{className:"flex items-center gap-3 rounded-[20px] bg-[#F4F9FF] p-4 xs:gap-4 sm:gap-5 sm:p-[18px]",children:[$&&e("a",{href:"/",target:"_blank",rel:"noopener noreferrer",className:"block shrink-0 transition-transform hover:scale-105",children:e("img",{src:$,alt:"Home QR",width:110,height:110,className:"w-[80px] rounded-[12px] bg-white object-contain p-[6px] shadow-[0_2px_8px_rgba(0,0,0,0.08)] xs:w-[95px] sm:w-[110px]"})}),s("div",{children:[e("h5",{className:"m-0 text-[14px] font-extrabold text-[#0054A6] xs:text-[15px] sm:text-base",children:"GỢI Ý PHÁT TRIỂN"}),e("p",{className:"mt-1 text-[11px] font-medium text-[#666] xs:text-[11.5px] sm:text-xs",children:"Quét mã QR để nhận bài luyện tập phù hợp với kết quả của bạn!"})]})]}),s("div",{className:"relative flex items-center justify-center rounded-[20px] border-l-[5px] border-[#00AEEF] bg-[#F4F9FF] p-4 text-[13px] font-bold italic leading-[1.4] text-[#0054A6] xs:text-[14px] sm:p-[18px] sm:text-[15px]",children:[e("span",{className:"absolute left-2 top-1 text-xl text-[#00AEEF]/20 xs:left-3 xs:top-2 xs:text-2xl",children:'"'}),"Hãy biến mỗi lần luyện tập thành một bước tiến tới thành công!",e("span",{className:"absolute bottom-1 right-2 text-xl text-[#00AEEF]/20 xs:bottom-2 xs:right-3 xs:text-2xl",children:'"'})]})]})]}),z?e("section",{className:"space-y-6",children:z}):null]})})}
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { BookOpen, CalendarDays, Headphones, IdCard, MapPin, Mic, PenTool, Sparkles, User, } from 'lucide-react';
+import { formatScore, formatTotalScore, getScoreLabel, getScoreMessage, getScoreStroke, } from '../utils/review-score.utils';
+import logoOcean from './assets/logo-ocean.png';
+import penguinMain from './assets/penguin-main.png';
+import penguinSmall from './assets/penguin-small.png';
+import dofu2 from './assets/dofu2.png';
+import { BadgeTitle } from './BadgeTitle';
+import { ExamSkillRow } from './ExamSkillRow';
+import { InfoRow } from './SpeakingReportShared';
+import { resolveAssetUrl } from './speaking-report.utils';
+/**
+ * General (non-speaking) Ocean Edu exam result report shell.
+ * Source: oe-exam-fe/.../review/components/OceanEduExamReport.tsx
+ */
+export function OceanEduExamReport({ studentName, studentCode, branchName, examDateText, totalScore, maxScore, isPendingGrading, examSubTitle, examTitle, readingScore, maxReadingScore, listeningScore, maxListeningScore, writingScore, maxWritingScore, speakingScore, maxSpeakingScore, overallAssessmentSlot, reviewUrl, assetBaseUrl, children, }) {
+    const scoreLabel = getScoreLabel(totalScore, maxScore, isPendingGrading);
+    const scoreMessage = getScoreMessage(totalScore, maxScore, isPendingGrading);
+    const scoreStroke = getScoreStroke(totalScore, maxScore, isPendingGrading);
+    const [qrDataUrl, setQrDataUrl] = useState(null);
+    const [homeQrDataUrl, setHomeQrDataUrl] = useState(null);
+    const isPlacementTest = examTitle?.toLowerCase().includes('placement test') ||
+        examSubTitle?.toLowerCase().includes('placement test');
+    const qrTargetUrl = reviewUrl ?? (typeof window !== 'undefined' ? window.location.href : '');
+    const logoSrc = resolveAssetUrl(logoOcean, assetBaseUrl, 'logo-ocean.png');
+    const penguinMainSrc = resolveAssetUrl(penguinMain, assetBaseUrl, 'penguin-main.png');
+    const penguinSmallSrc = resolveAssetUrl(penguinSmall, assetBaseUrl, 'penguin-small.png');
+    const dofu2Src = resolveAssetUrl(dofu2, assetBaseUrl, 'dofu2.png');
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        import('qrcode')
+            .then((QRCode) => {
+            QRCode.default
+                .toDataURL(qrTargetUrl, {
+                margin: 1,
+                color: { dark: '#0054A6', light: '#ffffff' },
+            })
+                .then(setQrDataUrl)
+                .catch(() => { });
+            QRCode.default
+                .toDataURL(window.location.origin, {
+                margin: 1,
+                color: { dark: '#0054A6', light: '#ffffff' },
+            })
+                .then(setHomeQrDataUrl)
+                .catch(() => { });
+        })
+            .catch(() => { });
+    }, [qrTargetUrl]);
+    const hasAnySkillScore = maxReadingScore != null ||
+        maxListeningScore != null ||
+        maxWritingScore != null ||
+        maxSpeakingScore != null;
+    return (_jsx("div", { className: "mx-auto w-full max-w-[1120px] py-4 sm:px-4 sm:py-6 md:px-6", children: _jsxs("div", { className: "result-exam-container space-y-6", children: [_jsxs("div", { className: "overflow-hidden rounded-[12px] bg-white px-3 py-3 shadow-[0_20px_50px_rgba(0,0,0,0.15)] xs:px-4 xs:py-4 sm:rounded-[25px] sm:px-5 sm:py-5 md:rounded-[30px] md:px-8 md:py-6", children: [_jsx("header", { className: "mb-6 md:mb-7", children: _jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4 md:grid md:grid-cols-[auto_1fr_auto] md:items-center", children: [_jsx("div", { className: "flex items-center justify-center md:justify-start", children: _jsx("img", { src: logoSrc, alt: "Ocean Edu", width: 180, className: "h-auto w-[90px] object-contain xs:w-[120px] sm:w-[150px] md:w-[160px] lg:w-[180px]" }) }), _jsxs("div", { className: "min-w-0 text-center", children: [_jsx("h2", { className: "m-0 text-[16px] font-bold leading-tight text-[#0054A6] xs:text-[20px] sm:text-[22px] md:text-[24px] lg:text-[28px]", children: "PHI\u1EBEU K\u1EBET QU\u1EA2" }), _jsx("h1", { className: "mt-1 text-[32px] font-black leading-[0.95] tracking-[-0.5px] text-[#0054A6] xs:text-[40px] sm:text-[40px] md:text-[48px] md:tracking-[-1px] lg:text-[64px]", children: isPlacementTest ? (_jsxs(_Fragment, { children: ["PLACEMENT ", _jsx("span", { className: "text-[#00AEEF]", children: "TEST" })] })) : (_jsxs(_Fragment, { children: ["EXAM ", _jsx("span", { className: "text-[#00AEEF]", children: "REPORT" })] })) }), _jsx("p", { className: "mx-auto mt-1.5 max-w-[520px] text-[12px] font-semibold leading-snug text-[#0054A6] xs:text-[16px] sm:text-sm md:mt-2 md:text-[16px]", children: "\u0110\u00E1nh gi\u00E1 n\u0103ng l\u1EF1c ti\u1EBFng Anh to\u00E0n di\u1EC7n" })] }), _jsx("div", { className: "flex items-center justify-center md:justify-end", children: qrDataUrl ? (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("a", { href: qrTargetUrl || '#', target: "_blank", rel: "noopener noreferrer", className: "block transition-transform hover:scale-105", children: _jsx("img", { src: qrDataUrl, alt: "QR Code", className: "h-[80px] w-[80px] rounded-lg border-2 border-[#00AEEF] bg-white p-1 shadow-sm xs:h-[100px] xs:w-[100px] md:h-[120px] md:w-[120px]" }) }), _jsx("span", { className: "mt-1.5 text-[9px] font-bold text-[#00AEEF] xs:text-[11px]", children: "Qu\u00E9t ho\u1EB7c nh\u1EA5n QR \u0111\u1EC3 xem online" })] })) : (_jsx("img", { src: penguinMainSrc, alt: "Mascot", width: 250, height: 220, className: "h-auto w-[80px] object-contain xs:w-[120px] sm:w-[120px] md:w-[160px] lg:w-[220px]" })) })] }) }), _jsxs("section", { className: "relative mb-10 rounded-[20px] border-2 border-[#00AEEF] px-4 pb-5 pt-10 sm:px-5 sm:pb-6 sm:pt-11 md:px-8", children: [_jsx(BadgeTitle, { number: "1", title: "TH\u00D4NG TIN H\u1ECCC VI\u00CAN" }), _jsxs("div", { className: "flex flex-col items-center justify-between gap-6 md:flex-row md:items-center", children: [_jsxs("div", { className: "space-y-3 self-stretch sm:space-y-4", children: [_jsx(InfoRow, { icon: User, label: "H\u1ECD t\u00EAn h\u1ECDc vi\u00EAn", value: studentName }), _jsx(InfoRow, { icon: IdCard, label: "M\u00E3 h\u1ECDc vi\u00EAn", value: studentCode || 'Đang cập nhật' }), _jsx(InfoRow, { icon: MapPin, label: "Chi nh\u00E1nh", value: branchName || examSubTitle || 'Ocean Edu' }), _jsx(InfoRow, { icon: CalendarDays, label: "Ng\u00E0y \u0111\u00E1nh gi\u00E1", value: examDateText })] }), _jsx("div", { className: "flex h-[100px] w-[200px] items-center justify-center overflow-hidden rounded-[80px] border-[4px] border-white bg-[linear-gradient(135deg,#EAF6FF_0%,#CFEFFF_45%,#9DDCFF_100%)] shadow-[0_10px_24px_rgba(0,174,239,0.18)] outline outline-2 outline-[#00AEEF] xs:h-[120px] xs:w-[240px] sm:h-[130px] sm:w-[260px] md:h-[150px] md:w-[280px] md:rounded-[100px] md:border-[6px]", children: _jsx("img", { src: dofu2Src, alt: "Avatar", width: 120, height: 120, className: "h-auto w-[40%] scale-[1.2] object-contain md:scale-[1.4]" }) })] })] }), _jsxs("section", { className: "relative rounded-[20px] border-2 border-[#00AEEF] px-5 pb-6 pt-11 md:px-8", children: [_jsx(BadgeTitle, { number: "2", title: "K\u1EBET QU\u1EA2" }), _jsxs("div", { className: "grid gap-6 sm:gap-8 md:grid-cols-[1fr_1.3fr] md:gap-10", children: [_jsxs("div", { className: "flex flex-col items-center justify-center border-b border-dashed border-[#ccc] pb-6 text-center sm:pb-8 md:border-b-0 md:border-r md:pb-0 md:pr-8", children: [_jsx("div", { className: "text-[13px] font-extrabold text-[#0054A6] xs:text-[14px] sm:text-[15px]", children: "\u0110I\u1EC2M T\u1ED4NG" }), _jsxs("div", { className: "relative mx-auto my-4 flex h-[160px] w-[160px] items-center justify-center rounded-full xs:h-[180px] xs:w-[180px] sm:my-5 sm:h-[200px] sm:w-[200px]", style: { background: scoreStroke }, children: [_jsx("div", { className: "absolute h-[136px] w-[136px] rounded-full bg-white xs:h-[153px] xs:w-[153px] sm:h-[170px] sm:w-[170px]" }), _jsxs("div", { className: "relative z-[2] text-center", children: [_jsx("div", { className: "text-[44px] font-black leading-none text-[#0054A6] xs:text-[50px] sm:text-[54px] md:text-[80px]", children: isPendingGrading ? '—' : formatTotalScore(totalScore) }), _jsxs("div", { className: "text-[18px] font-semibold text-[#aaa] xs:text-[20px] sm:text-[22px]", children: ["/ ", formatScore(maxScore, 0)] })] })] }), _jsx("div", { className: "mt-2 text-[20px] font-extrabold text-[#2ecc71] xs:text-[22px] sm:text-[24px] md:text-[26px]", children: scoreLabel }), _jsxs("div", { className: "mx-auto mt-4 flex w-full max-w-[600px] items-end gap-3 rounded-[20px] border border-[#e1efff] bg-[#F4F9FF] p-3 text-left sm:mt-6 sm:gap-4 sm:p-4", children: [_jsx("img", { src: penguinSmallSrc, alt: "Mascot Mini", width: 95, height: 95, className: "h-auto w-[60px] shrink-0 object-contain xs:w-[80px] sm:w-[90px] md:w-[95px]" }), _jsxs("p", { className: "m-0 text-[12px] leading-[1.5] text-[#666] xs:text-[13px]", children: [scoreMessage, _jsx(Sparkles, { className: "ml-1 inline h-4 w-4 text-[#FFD700]" })] })] })] }), _jsxs("div", { className: "flex flex-col justify-center rounded-[20px] border border-[#ddecff] bg-[#F4F9FF] p-4 sm:p-5", children: [_jsx("div", { className: "mb-4 text-center text-[16px] font-extrabold text-[#0054A6] xs:text-[18px] sm:mb-5 sm:text-[20px]", children: "\u0110I\u1EC2M TH\u00C0NH PH\u1EA6N" }), _jsxs("div", { className: "flex flex-col", children: [maxReadingScore != null && (_jsx(ExamSkillRow, { icon: BookOpen, label: "Reading", score: readingScore, maxScore: maxReadingScore, barClass: "bg-[#FF9800]" })), maxListeningScore != null && (_jsx(ExamSkillRow, { icon: Headphones, label: "Listening", score: listeningScore, maxScore: maxListeningScore, barClass: "bg-[#2196F3]" })), maxWritingScore != null && (_jsx(ExamSkillRow, { icon: PenTool, label: "Writing", score: writingScore, maxScore: maxWritingScore, barClass: "bg-[#9C27B0]" })), maxSpeakingScore != null && (_jsx(ExamSkillRow, { icon: Mic, label: "Speaking", score: speakingScore, maxScore: maxSpeakingScore, barClass: "bg-[#4CAF50]" })), !hasAnySkillScore && (_jsx("div", { className: "py-4 text-center text-sm italic text-slate-500", children: "Kh\u00F4ng c\u00F3 \u0111i\u1EC3m th\u00E0nh ph\u1EA7n" }))] })] })] })] }), overallAssessmentSlot, _jsxs("footer", { className: "mt-5 grid gap-3 sm:mt-6 sm:gap-4 md:grid-cols-[1fr_1.5fr] md:gap-6", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-[20px] bg-[#F4F9FF] p-4 xs:gap-4 sm:gap-5 sm:p-[18px]", children: [homeQrDataUrl && (_jsx("a", { href: "/", target: "_blank", rel: "noopener noreferrer", className: "block shrink-0 transition-transform hover:scale-105", children: _jsx("img", { src: homeQrDataUrl, alt: "Home QR", width: 110, height: 110, className: "w-[80px] rounded-[12px] bg-white object-contain p-[6px] shadow-[0_2px_8px_rgba(0,0,0,0.08)] xs:w-[95px] sm:w-[110px]" }) })), _jsxs("div", { children: [_jsx("h5", { className: "m-0 text-[14px] font-extrabold text-[#0054A6] xs:text-[15px] sm:text-base", children: "G\u1EE2I \u00DD PH\u00C1T TRI\u1EC2N" }), _jsx("p", { className: "mt-1 text-[11px] font-medium text-[#666] xs:text-[11.5px] sm:text-xs", children: "Qu\u00E9t m\u00E3 QR \u0111\u1EC3 nh\u1EADn b\u00E0i luy\u1EC7n t\u1EADp ph\u00F9 h\u1EE3p v\u1EDBi k\u1EBFt qu\u1EA3 c\u1EE7a b\u1EA1n!" })] })] }), _jsxs("div", { className: "relative flex items-center justify-center rounded-[20px] border-l-[5px] border-[#00AEEF] bg-[#F4F9FF] p-4 text-[13px] font-bold italic leading-[1.4] text-[#0054A6] xs:text-[14px] sm:p-[18px] sm:text-[15px]", children: [_jsx("span", { className: "absolute left-2 top-1 text-xl text-[#00AEEF]/20 xs:left-3 xs:top-2 xs:text-2xl", children: "\"" }), "H\u00E3y bi\u1EBFn m\u1ED7i l\u1EA7n luy\u1EC7n t\u1EADp th\u00E0nh m\u1ED9t b\u01B0\u1EDBc ti\u1EBFn t\u1EDBi th\u00E0nh c\u00F4ng!", _jsx("span", { className: "absolute bottom-1 right-2 text-xl text-[#00AEEF]/20 xs:bottom-2 xs:right-3 xs:text-2xl", children: "\"" })] })] })] }), children ? _jsx("section", { className: "space-y-6", children: children }) : null] }) }));
+}

package/dist/components/results/report/OceanEduSpeakingReport.js

@@ -1 +1,62 @@
-"use client";import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import{useEffect as a,useState as x}from"react";import{CalendarDays as r,GraduationCap as m,IdCard as n,MapPin as i,Sparkles as d,User as l}from"lucide-react";import{cn as p}from"../../../shared/lib/utils";import{buildSkillMetrics as c,deriveFeedback as o,deriveSkillScores as h,deriveSummaryPoints as g,getScoreLabel as f}from"../utils/speaking-summary";import b from"./assets/logo-ocean.png";import u from"./assets/penguin-main.png";import w from"./assets/penguin-small.png";import N from"./assets/dofu2.png";import v from"./assets/dofu4.png";import{BadgeTitle as F}from"./BadgeTitle";import{SpeakingPartSection as A}from"./SpeakingReportParts";import{InfoRow as E,SkillRow as y}from"./SpeakingReportShared";import{SpeakingRubricSection as k}from"./SpeakingRubricSection";import{formatScore as T,formatTotalScore as _,getScoreStroke as j,resolveAssetUrl as S,withUi as R}from"./speaking-report.utils";export function OceanEduSpeakingReport({reviewData:I,studentName:H,studentCode:C,branchName:P,examDateText:Q,examTitle:D,showDetailedResults:G,reviewUrl:U,speakingRubric:M,assetBaseUrl:L}){const[$,K]=x(null),[O,q]=x(null),B=D?.toLowerCase().includes("placement test")||I.examSubTitle?.toLowerCase().includes("placement test"),z=U??("undefined"!=typeof window?window.location.href:"");a(()=>{"undefined"!=typeof window&&import("qrcode").then(e=>{e.default.toDataURL(z,{margin:1,color:{dark:"#0054A6",light:"#ffffff"}}).then(K).catch(()=>{}),e.default.toDataURL(window.location.origin,{margin:1,color:{dark:"#0054A6",light:"#ffffff"}}).then(q).catch(()=>{})}).catch(()=>{})},[z]);const V=c(h(I)).map(R),X=o(I),J=g(I,V),W=f(I.totalScore,I.maxScore,I.isPendingGrading),Y=j(I.totalScore,I.maxScore,I.isPendingGrading),Z=S(b,L,"logo-ocean.png"),ee=S(u,L,"penguin-main.png"),te=S(w,L,"penguin-small.png"),se=S(N,L,"dofu2.png"),ae=S(v,L,"dofu4.png");return e("div",{className:"mx-auto w-full max-w-[1120px] py-4 sm:px-4 sm:py-6 md:px-6",children:s("div",{className:"space-y-6 result-exam-container",children:[s("div",{className:"overflow-hidden rounded-[12px] bg-white px-3 py-3 shadow-[0_20px_50px_rgba(0,0,0,0.15)] xs:px-4 xs:py-4 sm:rounded-[25px] sm:px-5 sm:py-5 md:rounded-[30px] md:px-8 md:py-6",children:[e("header",{className:"mb-6 md:mb-7",children:s("div",{className:"flex flex-col items-center gap-3 sm:gap-4 md:grid md:grid-cols-[auto_1fr_auto] md:items-center",children:[e("div",{className:"flex items-center justify-center md:justify-start",children:e("img",{src:Z,alt:"Ocean Edu",width:180,className:"h-auto w-[90px] object-contain xs:w-[120px] sm:w-[150px] md:w-[160px] lg:w-[180px]"})}),s("div",{className:"min-w-0 text-center",children:[e("h2",{className:"m-0 text-[16px] font-bold leading-tight text-[#0054A6] xs:text-[20px] sm:text-[22px] md:text-[24px] lg:text-[28px]",children:"PHIẾU KẾT QUẢ"}),e("h1",{className:"mt-1 text-[32px] font-black leading-[0.95] tracking-[-0.5px] text-[#0054A6] xs:text-[40px] sm:text-[40px] md:text-[48px] lg:text-[64px] md:tracking-[-1px]",children:s(t,B?{children:["PLACEMENT ",e("span",{className:"text-[#00AEEF]",children:"TEST"})]}:{children:["SPEAKING ",e("span",{className:"text-[#00AEEF]",children:"AI"})]})}),e("p",{className:"mx-auto mt-1.5 max-w-[520px] text-[12px] font-semibold leading-snug text-[#0054A6] xs:text-[16px] sm:text-sm md:text-[16px] md:mt-2",children:"Đánh giá năng lực nói tiếng Anh bằng trí tuệ nhân tạo"})]}),e("div",{className:"flex items-center justify-center md:justify-end",children:$?s("div",{className:"flex flex-col items-center",children:[e("a",{href:z||"#",target:"_blank",rel:"noopener noreferrer",className:"block transition-transform hover:scale-105",children:e("img",{src:$,alt:"QR Code",className:"h-[80px] w-[80px] rounded-lg border-2 border-[#00AEEF] bg-white p-1 shadow-sm xs:h-[100px] xs:w-[100px] md:h-[120px] md:w-[120px]"})}),e("span",{className:"mt-1.5 text-[9px] font-bold text-[#00AEEF] xs:text-[11px]",children:"Quét hoặc nhấn QR để xem online"})]}):e("img",{src:ee,alt:"Mascot",width:250,height:220,className:"h-auto w-[80px] object-contain xs:w-[120px] sm:w-[120px] md:w-[160px] lg:w-[220px]"})})]})}),s("section",{className:"relative mb-10 rounded-[20px] border-2 border-[#00AEEF] px-4 pb-5 pt-10 sm:px-5 sm:pb-6 sm:pt-11 md:px-8",children:[e(F,{number:"1",title:"THÔNG TIN HỌC VIÊN"}),s("div",{className:"flex flex-col items-center justify-between gap-6 md:flex-row md:items-center",children:[s("div",{className:"space-y-3 self-stretch sm:space-y-4",children:[e(E,{icon:l,label:"Họ tên học viên",value:H}),e(E,{icon:n,label:"Mã học viên",value:C||"Đang cập nhật"}),e(E,{icon:i,label:"Chi nhánh",value:P||I.examSubTitle||"Ocean Edu"}),e(E,{icon:r,label:"Ngày đánh giá",value:Q})]}),e("div",{className:"flex h-[100px] w-[200px] items-center justify-center overflow-hidden rounded-[80px] border-[4px] border-white bg-[linear-gradient(135deg,#EAF6FF_0%,#CFEFFF_45%,#9DDCFF_100%)] outline outline-2 outline-[#00AEEF] shadow-[0_10px_24px_rgba(0,174,239,0.18)] xs:h-[120px] xs:w-[240px] sm:h-[130px] sm:w-[260px] md:h-[150px] md:w-[280px] md:border-[6px] md:rounded-[100px]",children:e("img",{src:se,alt:"Avatar",width:120,height:120,className:"h-auto w-[40%] scale-[1.2] object-contain md:scale-[1.4]"})})]})]}),s("section",{className:"relative rounded-[20px] border-2 border-[#00AEEF] px-5 pb-6 pt-11 md:px-8",children:[e(F,{number:"2",title:"KẾT QUẢ"}),s("div",{className:"grid gap-6 sm:gap-8 md:grid-cols-[1fr_1.3fr] md:gap-10",children:[s("div",{className:"border-b border-dashed border-[#ccc] pb-6 text-center sm:pb-8 md:border-b-0 md:border-r md:pb-0 md:pr-8",children:[e("div",{className:"text-[13px] font-extrabold text-[#0054A6] xs:text-[14px] sm:text-[15px]",children:"ĐIỂM TỔNG"}),s("div",{className:"relative mx-auto my-4 flex h-[160px] w-[160px] items-center justify-center rounded-full xs:h-[180px] xs:w-[180px] sm:my-5 sm:h-[200px] sm:w-[200px]",style:{background:Y},children:[e("div",{className:"absolute h-[136px] w-[136px] rounded-full bg-white xs:h-[153px] xs:w-[153px] sm:h-[170px] sm:w-[170px]"}),s("div",{className:"relative z-[2]",children:[e("div",{className:"text-[44px] font-black leading-none text-[#0054A6] xs:text-[50px] sm:text-[54px] md:text-[80px]",children:I.isPendingGrading?"—":_(I.totalScore)}),s("div",{className:"text-center text-[18px] font-semibold text-[#aaa] xs:text-[20px] sm:text-[22px]",children:["/ ",T(I.maxScore,0)]})]})]}),e("div",{className:"mt-2 text-[20px] font-extrabold text-[#2ecc71] xs:text-[22px] sm:text-[24px] md:text-[26px]",children:W}),s("div",{className:"mt-4 flex items-end gap-3 rounded-[20px] border border-[#e1efff] bg-[#F4F9FF] p-3 text-left sm:mt-6 sm:gap-4 sm:p-4",children:[e("img",{src:te,alt:"Mascot Mini",width:95,height:95,className:"h-auto w-[60px] shrink-0 object-contain xs:w-[80px] sm:w-[90px] md:w-[95px]"}),s("p",{className:"m-0 text-[12px] leading-[1.5] text-[#666] xs:text-[13px]",children:[X,e(d,{className:"ml-1 inline h-4 w-4 text-[#FFD700]"})]})]})]}),s("div",{className:"rounded-[20px] border border-[#ddecff] bg-[#F4F9FF] p-4 sm:p-5",children:[e("div",{className:"mb-4 text-center text-[16px] font-extrabold text-[#0054A6] xs:text-[18px] sm:mb-5 sm:text-[20px]",children:"ĐIỂM THÀNH PHẦN"}),V.map(t=>e(y,{metric:t},t.key))]})]}),s("div",{className:"relative mt-6 rounded-[20px] border border-[#e1efff] bg-white p-4 sm:mt-8 sm:p-5 md:p-6",children:[s("div",{className:"mb-4 flex items-center text-[14px] font-extrabold text-[#0054A6] xs:text-[15px] sm:mb-5 sm:text-base",children:[e(m,{className:"mr-2 h-4 w-4 text-[#00AEEF] xs:h-[18px] xs:w-[18px] sm:h-5 sm:w-5"}),"NHẬN XÉT TỔNG QUAN TỪ AI"]}),e("div",{className:"grid gap-2.5 sm:gap-3 md:w-[75%] md:grid-cols-2",children:J.map((t,a)=>s("div",{className:p("flex items-start gap-2 text-[12px] font-medium xs:text-[12.5px] sm:text-[13px]",t.highlight?"font-extrabold text-[#f39c12]":"text-[#333]"),children:[e("span",{className:p("mt-0.5 text-[13px] xs:text-[13.5px] sm:text-sm","star"===t.icon?"text-[#f39c12]":"text-[#2ecc71]"),children:"star"===t.icon?"★":"●"}),e("span",{children:t.text})]},`${t.text}-${a}`))}),e("img",{src:ae,alt:"AI Robot",width:230,height:220,className:"mx-auto mt-5 h-auto w-[150px] object-contain xs:w-[160px] sm:mt-6 sm:w-[180px] md:mx-0 md:absolute md:bottom-[0px] md:right-0 md:mt-0 md:w-[230px]"})]})]}),M?e(k,{rubric:M,badgeNumber:"3"}):null,s("footer",{className:"mt-5 grid gap-3 sm:mt-6 sm:gap-4 md:grid-cols-[1fr_1.5fr] md:gap-6",children:[s("div",{className:"flex items-center gap-3 rounded-[20px] bg-[#F4F9FF] p-4 xs:gap-4 sm:gap-5 sm:p-[18px]",children:[O?e("a",{href:"/",target:"_blank",rel:"noopener noreferrer",className:"block shrink-0 transition-transform hover:scale-105",children:e("img",{src:O,alt:"Home QR",width:110,height:110,className:"w-[80px] rounded-[12px] bg-white p-[6px] object-contain shadow-[0_2px_8px_rgba(0,0,0,0.08)] xs:w-[95px] sm:w-[100px]"})}):null,s("div",{children:[e("h5",{className:"m-0 text-[14px] font-extrabold text-[#0054A6] xs:text-[15px] sm:text-base",children:"GỢI Ý PHÁT TRIỂN"}),e("p",{className:"mt-1 text-[11px] font-medium text-[#666] xs:text-[11.5px] sm:text-xs",children:"Quét mã QR để nhận bài luyện tập phù hợp với kết quả của bạn!"})]})]}),s("div",{className:"relative flex items-center justify-center rounded-[20px] border-l-[5px] border-[#00AEEF] bg-[#F4F9FF] p-4 text-[13px] font-bold italic leading-[1.4] text-[#0054A6] xs:text-[14px] sm:p-[18px] sm:text-[15px]",children:[e("span",{className:"absolute left-2 top-1 text-xl text-[#00AEEF]/20 xs:left-3 xs:top-2 xs:text-2xl",children:'"'}),"Hãy biến mỗi lần luyện tập thành một bước tiến tới thành công!",e("span",{className:"absolute bottom-1 right-2 text-xl text-[#00AEEF]/20 xs:bottom-2 xs:right-3 xs:text-2xl",children:'"'})]})]})]}),!1!==G?e("section",{className:"space-y-6",children:I.parts.map(t=>e(A,{part:t},`${t.partId}-${t.partSectionName}`))}):null]})})}
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CalendarDays, GraduationCap, IdCard, MapPin, Sparkles, User, } from 'lucide-react';
+import { cn } from '../../../shared/lib/utils';
+import { buildSkillMetrics, deriveFeedback, deriveSkillScores, deriveSummaryPoints, getScoreLabel, } from '../utils/speaking-summary';
+import logoOcean from './assets/logo-ocean.png';
+import penguinMain from './assets/penguin-main.png';
+import penguinSmall from './assets/penguin-small.png';
+import dofu2 from './assets/dofu2.png';
+import dofu4 from './assets/dofu4.png';
+import { BadgeTitle } from './BadgeTitle';
+import { SpeakingPartSection } from './SpeakingReportParts';
+import { InfoRow, SkillRow } from './SpeakingReportShared';
+import { SpeakingRubricSection } from './SpeakingRubricSection';
+import { formatScore, formatTotalScore, getScoreStroke, resolveAssetUrl, withUi, } from './speaking-report.utils';
+/**
+ * Speaking result report shell.
+ * Source: oe-exam-fe/.../speaking-review/_components/OceanEduSpeakingReport.tsx
+ */
+export function OceanEduSpeakingReport({ reviewData, studentName, studentCode, branchName, examDateText, examTitle, showDetailedResults, reviewUrl, speakingRubric, assetBaseUrl, }) {
+    const [qrDataUrl, setQrDataUrl] = useState(null);
+    const [homeQrDataUrl, setHomeQrDataUrl] = useState(null);
+    const isPlacementTest = examTitle?.toLowerCase().includes('placement test') ||
+        reviewData.examSubTitle?.toLowerCase().includes('placement test');
+    const qrTargetUrl = reviewUrl ?? (typeof window !== 'undefined' ? window.location.href : '');
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        import('qrcode')
+            .then((QRCode) => {
+            QRCode.default
+                .toDataURL(qrTargetUrl, {
+                margin: 1,
+                color: { dark: '#0054A6', light: '#ffffff' },
+            })
+                .then(setQrDataUrl)
+                .catch(() => { });
+            QRCode.default
+                .toDataURL(window.location.origin, {
+                margin: 1,
+                color: { dark: '#0054A6', light: '#ffffff' },
+            })
+                .then(setHomeQrDataUrl)
+                .catch(() => { });
+        })
+            .catch(() => { });
+    }, [qrTargetUrl]);
+    const metrics = buildSkillMetrics(deriveSkillScores(reviewData)).map(withUi);
+    const feedback = deriveFeedback(reviewData);
+    const summaryPoints = deriveSummaryPoints(reviewData, metrics);
+    const scoreLabel = getScoreLabel(reviewData.totalScore, reviewData.maxScore, reviewData.isPendingGrading);
+    const scoreStroke = getScoreStroke(reviewData.totalScore, reviewData.maxScore, reviewData.isPendingGrading);
+    const logoSrc = resolveAssetUrl(logoOcean, assetBaseUrl, 'logo-ocean.png');
+    const penguinMainSrc = resolveAssetUrl(penguinMain, assetBaseUrl, 'penguin-main.png');
+    const penguinSmallSrc = resolveAssetUrl(penguinSmall, assetBaseUrl, 'penguin-small.png');
+    const dofu2Src = resolveAssetUrl(dofu2, assetBaseUrl, 'dofu2.png');
+    const dofu4Src = resolveAssetUrl(dofu4, assetBaseUrl, 'dofu4.png');
+    return (_jsx("div", { className: "mx-auto w-full max-w-[1120px] py-4 sm:px-4 sm:py-6 md:px-6", children: _jsxs("div", { className: "space-y-6 result-exam-container", children: [_jsxs("div", { className: "overflow-hidden rounded-[12px] bg-white px-3 py-3 shadow-[0_20px_50px_rgba(0,0,0,0.15)] xs:px-4 xs:py-4 sm:rounded-[25px] sm:px-5 sm:py-5 md:rounded-[30px] md:px-8 md:py-6", children: [_jsx("header", { className: "mb-6 md:mb-7", children: _jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4 md:grid md:grid-cols-[auto_1fr_auto] md:items-center", children: [_jsx("div", { className: "flex items-center justify-center md:justify-start", children: _jsx("img", { src: logoSrc, alt: "Ocean Edu", width: 180, className: "h-auto w-[90px] object-contain xs:w-[120px] sm:w-[150px] md:w-[160px] lg:w-[180px]" }) }), _jsxs("div", { className: "min-w-0 text-center", children: [_jsx("h2", { className: "m-0 text-[16px] font-bold leading-tight text-[#0054A6] xs:text-[20px] sm:text-[22px] md:text-[24px] lg:text-[28px]", children: "PHI\u1EBEU K\u1EBET QU\u1EA2" }), _jsx("h1", { className: "mt-1 text-[32px] font-black leading-[0.95] tracking-[-0.5px] text-[#0054A6] xs:text-[40px] sm:text-[40px] md:text-[48px] lg:text-[64px] md:tracking-[-1px]", children: isPlacementTest ? (_jsxs(_Fragment, { children: ["PLACEMENT ", _jsx("span", { className: "text-[#00AEEF]", children: "TEST" })] })) : (_jsxs(_Fragment, { children: ["SPEAKING ", _jsx("span", { className: "text-[#00AEEF]", children: "AI" })] })) }), _jsx("p", { className: "mx-auto mt-1.5 max-w-[520px] text-[12px] font-semibold leading-snug text-[#0054A6] xs:text-[16px] sm:text-sm md:text-[16px] md:mt-2", children: "\u0110\u00E1nh gi\u00E1 n\u0103ng l\u1EF1c n\u00F3i ti\u1EBFng Anh b\u1EB1ng tr\u00ED tu\u1EC7 nh\u00E2n t\u1EA1o" })] }), _jsx("div", { className: "flex items-center justify-center md:justify-end", children: qrDataUrl ? (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("a", { href: qrTargetUrl || '#', target: "_blank", rel: "noopener noreferrer", className: "block transition-transform hover:scale-105", children: _jsx("img", { src: qrDataUrl, alt: "QR Code", className: "h-[80px] w-[80px] rounded-lg border-2 border-[#00AEEF] bg-white p-1 shadow-sm xs:h-[100px] xs:w-[100px] md:h-[120px] md:w-[120px]" }) }), _jsx("span", { className: "mt-1.5 text-[9px] font-bold text-[#00AEEF] xs:text-[11px]", children: "Qu\u00E9t ho\u1EB7c nh\u1EA5n QR \u0111\u1EC3 xem online" })] })) : (_jsx("img", { src: penguinMainSrc, alt: "Mascot", width: 250, height: 220, className: "h-auto w-[80px] object-contain xs:w-[120px] sm:w-[120px] md:w-[160px] lg:w-[220px]" })) })] }) }), _jsxs("section", { className: "relative mb-10 rounded-[20px] border-2 border-[#00AEEF] px-4 pb-5 pt-10 sm:px-5 sm:pb-6 sm:pt-11 md:px-8", children: [_jsx(BadgeTitle, { number: "1", title: "TH\u00D4NG TIN H\u1ECCC VI\u00CAN" }), _jsxs("div", { className: "flex flex-col items-center justify-between gap-6 md:flex-row md:items-center", children: [_jsxs("div", { className: "space-y-3 self-stretch sm:space-y-4", children: [_jsx(InfoRow, { icon: User, label: "H\u1ECD t\u00EAn h\u1ECDc vi\u00EAn", value: studentName }), _jsx(InfoRow, { icon: IdCard, label: "M\u00E3 h\u1ECDc vi\u00EAn", value: studentCode || 'Đang cập nhật' }), _jsx(InfoRow, { icon: MapPin, label: "Chi nh\u00E1nh", value: branchName || reviewData.examSubTitle || 'Ocean Edu' }), _jsx(InfoRow, { icon: CalendarDays, label: "Ng\u00E0y \u0111\u00E1nh gi\u00E1", value: examDateText })] }), _jsx("div", { className: "flex h-[100px] w-[200px] items-center justify-center overflow-hidden rounded-[80px] border-[4px] border-white bg-[linear-gradient(135deg,#EAF6FF_0%,#CFEFFF_45%,#9DDCFF_100%)] outline outline-2 outline-[#00AEEF] shadow-[0_10px_24px_rgba(0,174,239,0.18)] xs:h-[120px] xs:w-[240px] sm:h-[130px] sm:w-[260px] md:h-[150px] md:w-[280px] md:border-[6px] md:rounded-[100px]", children: _jsx("img", { src: dofu2Src, alt: "Avatar", width: 120, height: 120, className: "h-auto w-[40%] scale-[1.2] object-contain md:scale-[1.4]" }) })] })] }), _jsxs("section", { className: "relative rounded-[20px] border-2 border-[#00AEEF] px-5 pb-6 pt-11 md:px-8", children: [_jsx(BadgeTitle, { number: "2", title: "K\u1EBET QU\u1EA2" }), _jsxs("div", { className: "grid gap-6 sm:gap-8 md:grid-cols-[1fr_1.3fr] md:gap-10", children: [_jsxs("div", { className: "border-b border-dashed border-[#ccc] pb-6 text-center sm:pb-8 md:border-b-0 md:border-r md:pb-0 md:pr-8", children: [_jsx("div", { className: "text-[13px] font-extrabold text-[#0054A6] xs:text-[14px] sm:text-[15px]", children: "\u0110I\u1EC2M T\u1ED4NG" }), _jsxs("div", { className: "relative mx-auto my-4 flex h-[160px] w-[160px] items-center justify-center rounded-full xs:h-[180px] xs:w-[180px] sm:my-5 sm:h-[200px] sm:w-[200px]", style: { background: scoreStroke }, children: [_jsx("div", { className: "absolute h-[136px] w-[136px] rounded-full bg-white xs:h-[153px] xs:w-[153px] sm:h-[170px] sm:w-[170px]" }), _jsxs("div", { className: "relative z-[2]", children: [_jsx("div", { className: "text-[44px] font-black leading-none text-[#0054A6] xs:text-[50px] sm:text-[54px] md:text-[80px]", children: reviewData.isPendingGrading
+                                                                        ? '—'
+                                                                        : formatTotalScore(reviewData.totalScore) }), _jsxs("div", { className: "text-center text-[18px] font-semibold text-[#aaa] xs:text-[20px] sm:text-[22px]", children: ["/ ", formatScore(reviewData.maxScore, 0)] })] })] }), _jsx("div", { className: "mt-2 text-[20px] font-extrabold text-[#2ecc71] xs:text-[22px] sm:text-[24px] md:text-[26px]", children: scoreLabel }), _jsxs("div", { className: "mt-4 flex items-end gap-3 rounded-[20px] border border-[#e1efff] bg-[#F4F9FF] p-3 text-left sm:mt-6 sm:gap-4 sm:p-4", children: [_jsx("img", { src: penguinSmallSrc, alt: "Mascot Mini", width: 95, height: 95, className: "h-auto w-[60px] shrink-0 object-contain xs:w-[80px] sm:w-[90px] md:w-[95px]" }), _jsxs("p", { className: "m-0 text-[12px] leading-[1.5] text-[#666] xs:text-[13px]", children: [feedback, _jsx(Sparkles, { className: "ml-1 inline h-4 w-4 text-[#FFD700]" })] })] })] }), _jsxs("div", { className: "rounded-[20px] border border-[#ddecff] bg-[#F4F9FF] p-4 sm:p-5", children: [_jsx("div", { className: "mb-4 text-center text-[16px] font-extrabold text-[#0054A6] xs:text-[18px] sm:mb-5 sm:text-[20px]", children: "\u0110I\u1EC2M TH\u00C0NH PH\u1EA6N" }), metrics.map((metric) => (_jsx(SkillRow, { metric: metric }, metric.key)))] })] }), _jsxs("div", { className: "relative mt-6 rounded-[20px] border border-[#e1efff] bg-white p-4 sm:mt-8 sm:p-5 md:p-6", children: [_jsxs("div", { className: "mb-4 flex items-center text-[14px] font-extrabold text-[#0054A6] xs:text-[15px] sm:mb-5 sm:text-base", children: [_jsx(GraduationCap, { className: "mr-2 h-4 w-4 text-[#00AEEF] xs:h-[18px] xs:w-[18px] sm:h-5 sm:w-5" }), "NH\u1EACN X\u00C9T T\u1ED4NG QUAN T\u1EEA AI"] }), _jsx("div", { className: "grid gap-2.5 sm:gap-3 md:w-[75%] md:grid-cols-2", children: summaryPoints.map((point, index) => (_jsxs("div", { className: cn('flex items-start gap-2 text-[12px] font-medium xs:text-[12.5px] sm:text-[13px]', point.highlight ? 'font-extrabold text-[#f39c12]' : 'text-[#333]'), children: [_jsx("span", { className: cn('mt-0.5 text-[13px] xs:text-[13.5px] sm:text-sm', point.icon === 'star' ? 'text-[#f39c12]' : 'text-[#2ecc71]'), children: point.icon === 'star' ? '★' : '●' }), _jsx("span", { children: point.text })] }, `${point.text}-${index}`))) }), _jsx("img", { src: dofu4Src, alt: "AI Robot", width: 230, height: 220, className: "mx-auto mt-5 h-auto w-[150px] object-contain xs:w-[160px] sm:mt-6 sm:w-[180px] md:mx-0 md:absolute md:bottom-[0px] md:right-0 md:mt-0 md:w-[230px]" })] })] }), speakingRubric ? (_jsx(SpeakingRubricSection, { rubric: speakingRubric, badgeNumber: "3" })) : null, _jsxs("footer", { className: "mt-5 grid gap-3 sm:mt-6 sm:gap-4 md:grid-cols-[1fr_1.5fr] md:gap-6", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-[20px] bg-[#F4F9FF] p-4 xs:gap-4 sm:gap-5 sm:p-[18px]", children: [homeQrDataUrl ? (_jsx("a", { href: "/", target: "_blank", rel: "noopener noreferrer", className: "block shrink-0 transition-transform hover:scale-105", children: _jsx("img", { src: homeQrDataUrl, alt: "Home QR", width: 110, height: 110, className: "w-[80px] rounded-[12px] bg-white p-[6px] object-contain shadow-[0_2px_8px_rgba(0,0,0,0.08)] xs:w-[95px] sm:w-[100px]" }) })) : null, _jsxs("div", { children: [_jsx("h5", { className: "m-0 text-[14px] font-extrabold text-[#0054A6] xs:text-[15px] sm:text-base", children: "G\u1EE2I \u00DD PH\u00C1T TRI\u1EC2N" }), _jsx("p", { className: "mt-1 text-[11px] font-medium text-[#666] xs:text-[11.5px] sm:text-xs", children: "Qu\u00E9t m\u00E3 QR \u0111\u1EC3 nh\u1EADn b\u00E0i luy\u1EC7n t\u1EADp ph\u00F9 h\u1EE3p v\u1EDBi k\u1EBFt qu\u1EA3 c\u1EE7a b\u1EA1n!" })] })] }), _jsxs("div", { className: "relative flex items-center justify-center rounded-[20px] border-l-[5px] border-[#00AEEF] bg-[#F4F9FF] p-4 text-[13px] font-bold italic leading-[1.4] text-[#0054A6] xs:text-[14px] sm:p-[18px] sm:text-[15px]", children: [_jsx("span", { className: "absolute left-2 top-1 text-xl text-[#00AEEF]/20 xs:left-3 xs:top-2 xs:text-2xl", children: "\"" }), "H\u00E3y bi\u1EBFn m\u1ED7i l\u1EA7n luy\u1EC7n t\u1EADp th\u00E0nh m\u1ED9t b\u01B0\u1EDBc ti\u1EBFn t\u1EDBi th\u00E0nh c\u00F4ng!", _jsx("span", { className: "absolute bottom-1 right-2 text-xl text-[#00AEEF]/20 xs:bottom-2 xs:right-3 xs:text-2xl", children: "\"" })] })] })] }), showDetailedResults !== false ? (_jsx("section", { className: "space-y-6", children: reviewData.parts.map((part) => (_jsx(SpeakingPartSection, { part: part }, `${part.partId}-${part.partSectionName}`))) })) : null] }) }));
+}

package/dist/components/results/report/OverallAssessmentSection.js

@@ -1 +1,17 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{AlertCircle as t,RotateCw as a,Sparkles as n}from"lucide-react";import{BadgeTitle as s}from"./BadgeTitle";export function OverallAssessmentSection({isPending:r=!1,isFailed:i=!1,llmOverallAssessment:d,llmSkillAssessment:c,correctAnswers:o,totalQuestions:m,sectionNumber:h="3",onRetry:p}){const b=c?Object.values(c).filter(e=>Boolean(e)):[],x=Boolean(d)||b.length>0;return l("section",{className:"relative mt-8 rounded-[20px] border-2 border-[#00AEEF] px-5 pb-6 pt-11 md:px-8",children:[e(s,{number:h,title:"PHÂN TÍCH TỔNG QUAN"}),r&&!x&&l("div",{className:"flex flex-col items-center justify-center gap-3 py-10 text-center",children:[e("div",{className:"flex h-14 w-14 items-center justify-center rounded-full bg-[#d0edff]",children:e(n,{className:"h-7 w-7 animate-pulse text-[#00AEEF]"})}),e("p",{className:"text-sm font-bold text-[#0054A6]",children:"AI đang phân tích bài làm của bạn..."}),e("p",{className:"text-xs text-slate-500",children:"Kết quả sẽ tự động cập nhật sau vài giây. Vui lòng chờ."}),l("div",{className:"flex gap-1.5 pt-1",children:[e("span",{className:"h-2 w-2 animate-bounce rounded-full bg-[#00AEEF] [animation-delay:0ms]"}),e("span",{className:"h-2 w-2 animate-bounce rounded-full bg-[#00AEEF] [animation-delay:150ms]"}),e("span",{className:"h-2 w-2 animate-bounce rounded-full bg-[#00AEEF] [animation-delay:300ms]"})]})]}),i&&!x&&l("div",{className:"flex flex-col items-center justify-center gap-3 py-10 text-center",children:[e("div",{className:"flex h-14 w-14 items-center justify-center rounded-full bg-amber-50",children:e(t,{className:"h-7 w-7 text-amber-500"})}),e("p",{className:"text-sm font-bold text-slate-700",children:"Không thể tạo phân tích cho bài làm này."}),e("p",{className:"text-xs text-slate-500",children:"Điểm số của bạn vẫn được ghi nhận đầy đủ. Vui lòng thử lại, hoặc liên hệ giáo viên nếu tình trạng này tiếp diễn."}),p?l("button",{type:"button",onClick:p,className:"mt-1 inline-flex items-center gap-2 rounded-xl border border-[#00AEEF] px-4 py-2 text-sm font-semibold text-[#0054A6] transition hover:bg-[#f0f8ff]",children:[e(a,{className:"h-4 w-4"}),"Thử lại"]}):null]}),x&&e("div",{className:"overflow-hidden rounded-xl border border-[#00AEEF]/20 shadow-sm",children:l("table",{className:"w-full text-left text-sm text-slate-700",children:[e("thead",{className:"border-b border-[#00AEEF]/20 bg-[#f0f8ff] text-[#0054A6]",children:l("tr",{children:[e("th",{className:"w-[25%] border-r border-[#00AEEF]/10 px-4 py-3 font-bold"}),e("th",{className:"w-[25%] border-r border-[#00AEEF]/10 px-4 py-3 font-bold",children:"Câu đúng/Sai"}),e("th",{className:"w-[50%] px-4 py-3 font-bold",children:"Chi tiết"})]})}),l("tbody",{className:"divide-y divide-[#00AEEF]/10",children:[d?l("tr",{className:"hover:bg-slate-50",children:[e("td",{className:"border-r border-[#00AEEF]/10 px-4 py-4 align-top font-bold",children:"Đánh giá tổng quan"}),l("td",{className:"border-r border-[#00AEEF]/10 px-4 py-4 align-top font-medium text-slate-600",children:[o??"—"," / ",m??"—"]}),e("td",{className:"whitespace-pre-wrap px-4 py-4 align-top leading-relaxed text-slate-700",children:d})]}):null,b.length>0?l("tr",{className:"hover:bg-slate-50",children:[e("td",{className:"border-r border-[#00AEEF]/10 px-4 py-4 align-top font-bold",children:"Đánh giá kỹ năng"}),e("td",{className:"px-0 py-0 align-top",colSpan:2,children:e("table",{className:"h-full w-full",children:e("tbody",{className:"divide-y divide-[#00AEEF]/10",children:b.map((t,a)=>l("tr",{className:"group",children:[l("td",{className:"w-1/3 border-r border-[#00AEEF]/10 px-4 py-4 align-top group-hover:bg-slate-50",children:[e("div",{className:"font-semibold text-slate-800",children:t.label}),l("div",{className:"mt-1 text-xs text-slate-500",children:["(Tỷ lệ"," ",null!=t.percentage?t.percentage.toFixed(2):"0.00","%)"]})]}),e("td",{className:"w-2/3 px-4 py-4 align-top leading-relaxed text-slate-700 group-hover:bg-slate-50",children:t.feedback})]},`${t.label}-${a}`))})})})]}):null]})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, RotateCw, Sparkles } from 'lucide-react';
+import { BadgeTitle } from './BadgeTitle';
+/**
+ * Section 3 — overall LLM assessment table + pending skeleton.
+ * Source: oe-exam-fe/.../review/page.tsx overallAssessmentSlot
+ */
+export function OverallAssessmentSection({ isPending = false, isFailed = false, llmOverallAssessment, llmSkillAssessment, correctAnswers, totalQuestions, sectionNumber = '3', onRetry, }) {
+    const skillItems = llmSkillAssessment
+        ? Object.values(llmSkillAssessment).filter((skill) => Boolean(skill))
+        : [];
+    const hasLlmAssessment = Boolean(llmOverallAssessment) || skillItems.length > 0;
+    return (_jsxs("section", { className: "relative mt-8 rounded-[20px] border-2 border-[#00AEEF] px-5 pb-6 pt-11 md:px-8", children: [_jsx(BadgeTitle, { number: sectionNumber, title: "PH\u00C2N T\u00CDCH T\u1ED4NG QUAN" }), isPending && !hasLlmAssessment && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-10 text-center", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[#d0edff]", children: _jsx(Sparkles, { className: "h-7 w-7 animate-pulse text-[#00AEEF]" }) }), _jsx("p", { className: "text-sm font-bold text-[#0054A6]", children: "AI \u0111ang ph\u00E2n t\u00EDch b\u00E0i l\u00E0m c\u1EE7a b\u1EA1n..." }), _jsx("p", { className: "text-xs text-slate-500", children: "K\u1EBFt qu\u1EA3 s\u1EBD t\u1EF1 \u0111\u1ED9ng c\u1EADp nh\u1EADt sau v\u00E0i gi\u00E2y. Vui l\u00F2ng ch\u1EDD." }), _jsxs("div", { className: "flex gap-1.5 pt-1", children: [_jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[#00AEEF] [animation-delay:0ms]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[#00AEEF] [animation-delay:150ms]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[#00AEEF] [animation-delay:300ms]" })] })] })), isFailed && !hasLlmAssessment && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-10 text-center", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-amber-50", children: _jsx(AlertCircle, { className: "h-7 w-7 text-amber-500" }) }), _jsx("p", { className: "text-sm font-bold text-slate-700", children: "Kh\u00F4ng th\u1EC3 t\u1EA1o ph\u00E2n t\u00EDch cho b\u00E0i l\u00E0m n\u00E0y." }), _jsx("p", { className: "text-xs text-slate-500", children: "\u0110i\u1EC3m s\u1ED1 c\u1EE7a b\u1EA1n v\u1EABn \u0111\u01B0\u1EE3c ghi nh\u1EADn \u0111\u1EA7y \u0111\u1EE7. Vui l\u00F2ng th\u1EED l\u1EA1i, ho\u1EB7c li\u00EAn h\u1EC7 gi\u00E1o vi\u00EAn n\u1EBFu t\u00ECnh tr\u1EA1ng n\u00E0y ti\u1EBFp di\u1EC5n." }), onRetry ? (_jsxs("button", { type: "button", onClick: onRetry, className: "mt-1 inline-flex items-center gap-2 rounded-xl border border-[#00AEEF] px-4 py-2 text-sm font-semibold text-[#0054A6] transition hover:bg-[#f0f8ff]", children: [_jsx(RotateCw, { className: "h-4 w-4" }), "Th\u1EED l\u1EA1i"] })) : null] })), hasLlmAssessment && (_jsx("div", { className: "overflow-hidden rounded-xl border border-[#00AEEF]/20 shadow-sm", children: _jsxs("table", { className: "w-full text-left text-sm text-slate-700", children: [_jsx("thead", { className: "border-b border-[#00AEEF]/20 bg-[#f0f8ff] text-[#0054A6]", children: _jsxs("tr", { children: [_jsx("th", { className: "w-[25%] border-r border-[#00AEEF]/10 px-4 py-3 font-bold" }), _jsx("th", { className: "w-[25%] border-r border-[#00AEEF]/10 px-4 py-3 font-bold", children: "C\u00E2u \u0111\u00FAng/Sai" }), _jsx("th", { className: "w-[50%] px-4 py-3 font-bold", children: "Chi ti\u1EBFt" })] }) }), _jsxs("tbody", { className: "divide-y divide-[#00AEEF]/10", children: [llmOverallAssessment ? (_jsxs("tr", { className: "hover:bg-slate-50", children: [_jsx("td", { className: "border-r border-[#00AEEF]/10 px-4 py-4 align-top font-bold", children: "\u0110\u00E1nh gi\u00E1 t\u1ED5ng quan" }), _jsxs("td", { className: "border-r border-[#00AEEF]/10 px-4 py-4 align-top font-medium text-slate-600", children: [correctAnswers ?? '—', " / ", totalQuestions ?? '—'] }), _jsx("td", { className: "whitespace-pre-wrap px-4 py-4 align-top leading-relaxed text-slate-700", children: llmOverallAssessment })] })) : null, skillItems.length > 0 ? (_jsxs("tr", { className: "hover:bg-slate-50", children: [_jsx("td", { className: "border-r border-[#00AEEF]/10 px-4 py-4 align-top font-bold", children: "\u0110\u00E1nh gi\u00E1 k\u1EF9 n\u0103ng" }), _jsx("td", { className: "px-0 py-0 align-top", colSpan: 2, children: _jsx("table", { className: "h-full w-full", children: _jsx("tbody", { className: "divide-y divide-[#00AEEF]/10", children: skillItems.map((skill, index) => (_jsxs("tr", { className: "group", children: [_jsxs("td", { className: "w-1/3 border-r border-[#00AEEF]/10 px-4 py-4 align-top group-hover:bg-slate-50", children: [_jsx("div", { className: "font-semibold text-slate-800", children: skill.label }), _jsxs("div", { className: "mt-1 text-xs text-slate-500", children: ["(T\u1EF7 l\u1EC7", ' ', skill.percentage != null
+                                                                                ? skill.percentage.toFixed(2)
+                                                                                : '0.00', "%)"] })] }), _jsx("td", { className: "w-2/3 px-4 py-4 align-top leading-relaxed text-slate-700 group-hover:bg-slate-50", children: skill.feedback })] }, `${skill.label}-${index}`))) }) }) })] })) : null] })] }) }))] }));
+}