@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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] })] }) }))] }));
+}

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

@@ -1 +1,18 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ChevronLeft as s,XCircle as a}from"lucide-react";export function ResultErrorState({error:l,fallbackMessage:r="Đã xảy ra lỗi khi tải kết quả bài thi.",backLabel:i="Quay lại danh sách",onBack:n}){const c=function(e,t){return e instanceof Error&&e.message?e.message:"string"==typeof e&&e.trim()?e:t}(l,r);return e("div",{className:"flex min-h-screen flex-col bg-[#e0e0e0]",children:e("div",{className:"flex flex-1 items-center justify-center px-4 py-10",children:t("div",{className:"w-full max-w-md rounded-[28px] bg-white p-8 text-center shadow-xl",children:[e("div",{className:"mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-red-50",children:e(a,{className:"h-8 w-8 text-red-400"})}),e("h2",{className:"text-base font-bold text-slate-800",children:"Không thể tải kết quả"}),e("p",{className:"mt-2 text-sm text-slate-500",children:c}),n?t("button",{type:"button",onClick:n,className:"mt-6 inline-flex items-center gap-2 rounded-xl bg-[#2874A6] px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-[#1A5276] hover:shadow-md active:scale-[0.98]",children:[e(s,{className:"h-4 w-4"}),i]}):null]})})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, XCircle } from 'lucide-react';
+function resolveErrorMessage(error, fallback) {
+    if (error instanceof Error && error.message)
+        return error.message;
+    if (typeof error === 'string' && error.trim())
+        return error;
+    return fallback;
+}
+/**
+ * Generic full-page error state for the result review screen.
+ * Source: oe-exam-fe/.../review/page.tsx generic error branch
+ */
+export function ResultErrorState({ error, fallbackMessage = 'Đã xảy ra lỗi khi tải kết quả bài thi.', backLabel = 'Quay lại danh sách', onBack, }) {
+    const message = resolveErrorMessage(error, fallbackMessage);
+    return (_jsx("div", { className: "flex min-h-screen flex-col bg-[#e0e0e0]", children: _jsx("div", { className: "flex flex-1 items-center justify-center px-4 py-10", children: _jsxs("div", { className: "w-full max-w-md rounded-[28px] bg-white p-8 text-center shadow-xl", children: [_jsx("div", { className: "mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-red-50", children: _jsx(XCircle, { className: "h-8 w-8 text-red-400" }) }), _jsx("h2", { className: "text-base font-bold text-slate-800", children: "Kh\u00F4ng th\u1EC3 t\u1EA3i k\u1EBFt qu\u1EA3" }), _jsx("p", { className: "mt-2 text-sm text-slate-500", children: message }), onBack ? (_jsxs("button", { type: "button", onClick: onBack, className: "mt-6 inline-flex items-center gap-2 rounded-xl bg-[#2874A6] px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-[#1A5276] hover:shadow-md active:scale-[0.98]", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), backLabel] })) : null] }) }) }));
+}

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

@@ -1 +1,10 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Loader2 as s}from"lucide-react";export function ResultLoadingState({message:i="Đang tải kết quả bài thi...",description:l="Vui lòng đợi trong giây lát"}){return e("div",{className:"flex min-h-screen flex-col bg-[#e0e0e0]",children:e("div",{className:"flex flex-1 items-center justify-center px-4 py-10",children:t("div",{className:"text-center",children:[t("div",{className:"relative mx-auto h-16 w-16",children:[e("div",{className:"absolute inset-0 animate-ping rounded-full bg-[#2874A6]/20"}),e("div",{className:"relative flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg",children:e(s,{className:"h-8 w-8 animate-spin text-[#2874A6]"})})]}),e("p",{className:"mt-5 text-sm font-semibold text-slate-600",children:i}),l?e("p",{className:"mt-1 text-xs text-slate-500",children:l}):null]})})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from 'lucide-react';
+/**
+ * Full-page loading state for the result review screen.
+ * Source: oe-exam-fe/.../review/page.tsx isLoading branch
+ */
+export function ResultLoadingState({ message = 'Đang tải kết quả bài thi...', description = 'Vui lòng đợi trong giây lát', }) {
+    return (_jsx("div", { className: "flex min-h-screen flex-col bg-[#e0e0e0]", children: _jsx("div", { className: "flex flex-1 items-center justify-center px-4 py-10", children: _jsxs("div", { className: "text-center", children: [_jsxs("div", { className: "relative mx-auto h-16 w-16", children: [_jsx("div", { className: "absolute inset-0 animate-ping rounded-full bg-[#2874A6]/20" }), _jsx("div", { className: "relative flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-[#2874A6]" }) })] }), _jsx("p", { className: "mt-5 text-sm font-semibold text-slate-600", children: message }), description ? _jsx("p", { className: "mt-1 text-xs text-slate-500", children: description }) : null] }) }) }));
+}

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

@@ -1 +1,27 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Lock as n}from"lucide-react";import a from"./assets/logo-ocean.png";import i from"./assets/penguin-small.png";import{resolveAssetUrl as r}from"./speaking-report.utils";export function ResultNotPublicState({loginHref:o,assetBaseUrl:s,onLogin:l}){const c=o??("undefined"==typeof window?"/auth/login":`/auth/login?redirect=${encodeURIComponent(window.location.href)}`),d=r(a,s,"logo-ocean.png"),m=r(i,s,"penguin-small.png");return e("div",{className:"flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-[#eaf4ff] via-[#f0f7ff] to-[#e8f0ff] px-4 py-10",children:e("div",{className:"w-full max-w-md",children:t("div",{className:"relative overflow-hidden rounded-[28px] bg-white px-8 py-10 text-center shadow-[0_20px_60px_rgba(0,84,166,0.12)]",children:[e("div",{className:"absolute inset-x-0 top-0 h-1.5 bg-gradient-to-r from-[#00AEEF] via-[#0054A6] to-[#00AEEF]"}),e("div",{className:"mb-6 flex justify-center",children:e("img",{src:d,alt:"Ocean Edu",className:"h-auto w-[120px] object-contain"})}),e("div",{className:"mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-[#eaf4ff] to-[#d0e8ff] ring-4 ring-[#00AEEF]/20",children:e(n,{className:"h-9 w-9 text-[#0054A6]",strokeWidth:1.8})}),e("h2",{className:"text-[20px] font-black text-[#0054A6]",children:"Bạn cần đăng nhập để xem kết quả"}),t("p",{className:"mt-3 text-sm leading-relaxed text-slate-500",children:["Kết quả bài thi này chỉ dành cho học viên đã đăng nhập.",e("br",{}),"Vui lòng đăng nhập vào tài khoản Ocean Edu của bạn để tiếp tục."]}),e("div",{className:"my-6 border-t border-dashed border-slate-200"}),e("a",{href:c,onClick:e=>{l&&(e.preventDefault(),l(c))},className:"inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-[#0054A6] to-[#00AEEF] px-6 py-3 text-sm font-bold text-white shadow-md shadow-[#00AEEF]/30 transition-all hover:opacity-90 hover:shadow-lg active:scale-[0.98]",children:"Đăng nhập ngay"}),e("div",{className:"my-5 border-t border-dashed border-slate-200"}),t("div",{className:"flex items-start gap-3 rounded-2xl bg-[#f4f9ff] px-4 py-3 text-left",children:[e("img",{src:m,alt:"",className:"h-auto w-10 shrink-0 object-contain"}),e("p",{className:"text-[12.5px] leading-relaxed text-[#555]",children:"Sau khi đăng nhập, bạn sẽ có thể xem đầy đủ kết quả và chi tiết bài thi của mình! 💙"})]})]})})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lock } from 'lucide-react';
+import logoOcean from './assets/logo-ocean.png';
+import penguinSmall from './assets/penguin-small.png';
+import { resolveAssetUrl } from './speaking-report.utils';
+function buildDefaultLoginHref() {
+    if (typeof window === 'undefined')
+        return '/auth/login';
+    return `/auth/login?redirect=${encodeURIComponent(window.location.href)}`;
+}
+/**
+ * Friendly full-page state when the result is private (403 not-public).
+ * Source: oe-exam-fe/.../review/page.tsx isResultNotPublic branch
+ */
+export function ResultNotPublicState({ loginHref, assetBaseUrl, onLogin, }) {
+    const href = loginHref ?? buildDefaultLoginHref();
+    const logoSrc = resolveAssetUrl(logoOcean, assetBaseUrl, 'logo-ocean.png');
+    const penguinSrc = resolveAssetUrl(penguinSmall, assetBaseUrl, 'penguin-small.png');
+    const handleLoginClick = (event) => {
+        if (!onLogin)
+            return;
+        event.preventDefault();
+        onLogin(href);
+    };
+    return (_jsx("div", { className: "flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-[#eaf4ff] via-[#f0f7ff] to-[#e8f0ff] px-4 py-10", children: _jsx("div", { className: "w-full max-w-md", children: _jsxs("div", { className: "relative overflow-hidden rounded-[28px] bg-white px-8 py-10 text-center shadow-[0_20px_60px_rgba(0,84,166,0.12)]", children: [_jsx("div", { className: "absolute inset-x-0 top-0 h-1.5 bg-gradient-to-r from-[#00AEEF] via-[#0054A6] to-[#00AEEF]" }), _jsx("div", { className: "mb-6 flex justify-center", children: _jsx("img", { src: logoSrc, alt: "Ocean Edu", className: "h-auto w-[120px] object-contain" }) }), _jsx("div", { className: "mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-[#eaf4ff] to-[#d0e8ff] ring-4 ring-[#00AEEF]/20", children: _jsx(Lock, { className: "h-9 w-9 text-[#0054A6]", strokeWidth: 1.8 }) }), _jsx("h2", { className: "text-[20px] font-black text-[#0054A6]", children: "B\u1EA1n c\u1EA7n \u0111\u0103ng nh\u1EADp \u0111\u1EC3 xem k\u1EBFt qu\u1EA3" }), _jsxs("p", { className: "mt-3 text-sm leading-relaxed text-slate-500", children: ["K\u1EBFt qu\u1EA3 b\u00E0i thi n\u00E0y ch\u1EC9 d\u00E0nh cho h\u1ECDc vi\u00EAn \u0111\u00E3 \u0111\u0103ng nh\u1EADp.", _jsx("br", {}), "Vui l\u00F2ng \u0111\u0103ng nh\u1EADp v\u00E0o t\u00E0i kho\u1EA3n Ocean Edu c\u1EE7a b\u1EA1n \u0111\u1EC3 ti\u1EBFp t\u1EE5c."] }), _jsx("div", { className: "my-6 border-t border-dashed border-slate-200" }), _jsx("a", { href: href, onClick: handleLoginClick, className: "inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-[#0054A6] to-[#00AEEF] px-6 py-3 text-sm font-bold text-white shadow-md shadow-[#00AEEF]/30 transition-all hover:opacity-90 hover:shadow-lg active:scale-[0.98]", children: "\u0110\u0103ng nh\u1EADp ngay" }), _jsx("div", { className: "my-5 border-t border-dashed border-slate-200" }), _jsxs("div", { className: "flex items-start gap-3 rounded-2xl bg-[#f4f9ff] px-4 py-3 text-left", children: [_jsx("img", { src: penguinSrc, alt: "", className: "h-auto w-10 shrink-0 object-contain" }), _jsx("p", { className: "text-[12.5px] leading-relaxed text-[#555]", children: "Sau khi \u0111\u0103ng nh\u1EADp, b\u1EA1n s\u1EBD c\u00F3 th\u1EC3 xem \u0111\u1EA7y \u0111\u1EE7 k\u1EBFt qu\u1EA3 v\u00E0 chi ti\u1EBFt b\u00E0i thi c\u1EE7a m\u00ECnh! \uD83D\uDC99" })] })] }) }) }));
+}

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

@@ -1 +1,14 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{BadgeTitle as r}from"./BadgeTitle";import{QuestionCard as i}from"./SpeakingReportShared";import{formatScore as n,getPartScore as a}from"./speaking-report.utils";function s({part:t}){const r=a(t);return r.hasPending||null==r.score?null:e("div",{className:"inline-flex items-center rounded-full bg-[#0054A6] px-4 py-2 text-sm font-bold text-white shadow-sm",children:["Điểm: ",Math.round(r.score)," / ",n(r.maxScore,0)]})}export function SpeakingPartSection({part:n}){return e("section",{className:"relative rounded-[20px] border-2 border-[#00AEEF] bg-white px-5 pb-6 pt-11 md:px-8",children:[t(r,{number:String(n.partNo),title:n.partName||`PHẦN ${n.partNo}`}),e("div",{className:"flex flex-col gap-4 md:flex-row md:items-start md:justify-between",children:[e("div",{className:"space-y-2",children:[t("h3",{className:"text-xl font-black text-[#0054A6]",children:n.partSectionName||"Speaking section"}),n.instructions?t("p",{className:"max-w-3xl text-sm leading-6 text-slate-600",children:n.instructions}):null]}),t(s,{part:n})]}),t("div",{className:"mt-6 grid gap-4",children:n.questions.map(e=>t(i,{question:e},e.questionId))})]})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { BadgeTitle } from './BadgeTitle';
+import { QuestionCard } from './SpeakingReportShared';
+import { formatScore, getPartScore } from './speaking-report.utils';
+function PartScorePill({ part }) {
+    const partScore = getPartScore(part);
+    if (partScore.hasPending || partScore.score == null)
+        return null;
+    return (_jsxs("div", { className: "inline-flex items-center rounded-full bg-[#0054A6] px-4 py-2 text-sm font-bold text-white shadow-sm", children: ["\u0110i\u1EC3m: ", Math.round(partScore.score), " / ", formatScore(partScore.maxScore, 0)] }));
+}
+export function SpeakingPartSection({ part }) {
+    return (_jsxs("section", { className: "relative rounded-[20px] border-2 border-[#00AEEF] bg-white px-5 pb-6 pt-11 md:px-8", children: [_jsx(BadgeTitle, { number: String(part.partNo), title: part.partName || `PHẦN ${part.partNo}` }), _jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-xl font-black text-[#0054A6]", children: part.partSectionName || 'Speaking section' }), part.instructions ? (_jsx("p", { className: "max-w-3xl text-sm leading-6 text-slate-600", children: part.instructions })) : null] }), _jsx(PartScorePill, { part: part })] }), _jsx("div", { className: "mt-6 grid gap-4", children: part.questions.map((question) => (_jsx(QuestionCard, { question: question }, question.questionId))) })] }));
+}

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

@@ -1 +1,86 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CheckCheck as s,Clock as r,MessageSquare as l,MessageSquareQuote as a,Music2 as n,Volume2 as i,Zap as d}from"lucide-react";import{ReviewGradingStatus as c}from"../../../api/result-review";import{ResolvedImage as x}from"../../../components/common/ResolvedImage";import{cn as o}from"../../../shared/lib/utils";import{SpeakingResultAudioPlayer as m}from"../speaking/SpeakingResultAudioPlayer";import{deriveQuestionSkillMetrics as p,extractPrompt as u,extractQuestionFeedback as h,extractStudentAnswerText as f,formatScore as b,getPendingGradingLabel as g,getQuestionTypeLabel as N,isGradingComplete as w}from"./speaking-report.utils";export function InfoRow({icon:s,label:r,value:l}){return t("p",{className:"flex items-start text-[13px] font-medium text-[#333] xs:text-sm sm:text-base md:text-lg",children:[e(s,{className:"mr-2 mt-0.5 h-[14px] w-[14px] shrink-0 text-[#0054A6] xs:h-[16px] xs:w-[16px] sm:mr-3 sm:h-[18px] sm:w-[18px]"}),t("span",{className:"flex flex-wrap items-baseline gap-x-1.5",children:[t("span",{className:"whitespace-nowrap",children:[r," :"]}),e("strong",{suppressHydrationWarning:!0,className:"font-bold text-[#0054A6]",children:l})]})]})}function v({metric:t}){const r="h-[18px] w-[18px] text-white";switch(t.icon){case"speaker":return e(i,{className:r});case"bolt":return e(d,{className:r});case"message":return e(l,{className:r});case"check-double":return e(s,{className:r});case"music":return e(n,{className:r});default:return null}}export function SkillRow({metric:s,compact:r=!1}){const l=b(r?s.score/10:s.score,1),a=r?"/10":"/100";return t("div",{className:o("flex items-center rounded-full border border-[#eef4fb] bg-white shadow-[0_1px_0_rgba(255,255,255,0.9)] last:mb-0",r?"min-h-[70px] pl-[12px] pr-4":"mb-2 px-3 py-2 sm:mb-3 sm:px-4 sm:py-3"),children:[e("div",{className:"flex h-[48px] w-[48px] shrink-0 items-center justify-center rounded-full bg-white shadow-[0_4px_12px_rgba(15,23,42,0.08)] xs:h-[52px] xs:w-[52px] sm:h-[58px] sm:w-[58px]",children:e("div",{className:o("flex items-center justify-center rounded-full text-white",r?"h-[42px] w-[42px]":"h-[36px] w-[36px] xs:h-[38px] xs:w-[38px] sm:h-[42px] sm:w-[42px]",s.barClass),children:e(v,{metric:s})})}),t("div",{className:o("ml-2 mr-2 flex-1 border-r border-dashed border-[#d9e0ea] pr-2 xs:ml-3 xs:mr-3 xs:pr-3 sm:pr-4",r?"w-[148px]":"min-w-0"),children:[e("h4",{className:o("truncate font-extrabold leading-5 text-[#0054A6]",r?"text-[15px]":"text-[13px] xs:text-[14px] sm:text-[15px]"),children:s.label}),e("span",{className:o("mt-0.5 block truncate text-[#8b97a8] sm:mt-1",r?"text-[11px]":"text-[10px] xs:text-[10.5px] sm:text-[11px]"),children:s.sublabel})]}),t("div",{className:o("shrink-0 font-extrabold text-[#0054A6]",r?"w-[86px] text-[18px]":"w-[60px] text-[16px] xs:w-[70px] xs:text-[17px] sm:w-20 sm:text-xl"),children:[l," ",e("small",{className:o("font-semibold text-[#c5ced8]",r?"text-[12px]":"text-[11px] xs:text-[11.5px] sm:text-[13px]"),children:a})]}),e("div",{className:o("ml-2 flex-1 overflow-hidden rounded-full bg-[#edf0f4] xs:ml-2.5 sm:ml-3",r?"h-[12px]":"h-[10px] sm:h-[11px]"),children:e("div",{className:o("h-full rounded-full",s.barClass),style:{width:`${s.score}%`}})})]})}export function PendingGradingCard({gradingStatus:s}){const l=g(s),a=s===c.FAILED;return t("div",{className:o("flex flex-col items-center justify-center gap-3 rounded-2xl border px-6 py-8 text-center",a?"border-orange-200 bg-orange-50":"border-[#dbeafe] bg-[#F4F9FF]"),children:[e("div",{className:o("flex h-14 w-14 items-center justify-center rounded-full",a?"bg-orange-100":"bg-[#E8F6FF]"),children:e(r,{className:o("h-7 w-7 animate-pulse",a?"text-orange-500":"text-[#00AEEF]")})}),t("div",{children:[e("p",{className:o("text-base font-bold",a?"text-orange-600":"text-[#0054A6]"),children:l}),e("p",{className:"mt-1 text-sm text-slate-500",children:"Kết quả sẽ được cập nhật sớm nhất có thể."})]})]})}export function NotAnsweredCard(){return t("div",{className:"flex flex-col items-center justify-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-6 py-8 text-center",children:[e("div",{className:"flex h-14 w-14 items-center justify-center rounded-full bg-slate-100",children:e(i,{className:"h-7 w-7 text-slate-300"})}),t("div",{children:[e("p",{className:"text-base font-bold text-slate-500",children:"Học sinh chưa trả lời câu hỏi"}),e("p",{className:"mt-1 text-sm text-slate-400",children:"Câu hỏi này không có bài ghi âm."})]})]})}export function QuestionScorePill({question:s}){return s.gradingStatus===c.NOT_ANSWERED?t("div",{className:"inline-flex items-center rounded-full bg-slate-100 px-3.5 py-2 text-sm font-bold text-slate-500 shadow-sm ring-1 ring-slate-200",children:["Bỏ qua — 0 / ",b(s.maxScore,0)]}):w(s.gradingStatus)?e("div",{className:"inline-flex items-center rounded-full bg-[#E8F6FF] px-3.5 py-2 text-sm font-extrabold text-[#0054A6] shadow-sm ring-1 ring-[#b9dcff]",children:null==s.score?`Chưa chấm / ${b(s.maxScore,0)}`:`${b(s.score,2)} / ${b(s.maxScore,0)}`}):t("div",{className:"inline-flex items-center gap-1.5 rounded-full bg-[#FFF8E8] px-3.5 py-2 text-sm font-bold text-[#D97706] shadow-sm ring-1 ring-[#fcd34d]",children:[e(r,{className:"h-3.5 w-3.5"}),"Chờ chấm"]})}export function PromptBlock({question:s}){const r=s.questionContent??{},l=r.imageUrl||r.image||r.promptImageUrl,a=s.audioUrl||r.audioUrl||r.audio||r.questionAudio,n=u(s);return t("div",{className:"rounded-xl border border-[#dbeafe] bg-[#F8FBFF] px-4 py-3",children:[e("div",{className:"mb-2 text-xs font-bold uppercase tracking-wide text-[#00AEEF]",children:"Câu hỏi"}),n.text&&"Nội dung câu hỏi đang được cập nhật."!==n.text&&(n.isHtml?e("div",{className:"mb-3 text-sm leading-relaxed text-slate-700 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-0.5 [&_p]:my-1",dangerouslySetInnerHTML:{__html:n.text}}):e("p",{className:"mb-3 text-center text-sm leading-relaxed text-slate-700",children:n.text})),a?e("div",{className:"mb-3",children:e(m,{audioKey:a})}):null,l?e("div",{className:"overflow-hidden rounded-lg border border-slate-200",children:e(x,{src:l,alt:"Question image",className:"h-auto w-full"})}):null]})}export function AnswerBlock({question:s}){const r=f(s);return s.studentAnswerKey?t("div",{className:"rounded-xl border border-slate-200 bg-white px-4 py-3",children:[t("div",{className:"mb-2.5 flex items-center gap-2 text-xs font-bold text-[#0054A6]",children:[e(i,{className:"h-3.5 w-3.5 text-[#00AEEF]"}),"Bài nói của học viên"]}),e(m,{audioKey:s.studentAnswerKey})]}):t("div",{className:"rounded-xl border border-slate-200 bg-slate-50 px-4 py-3",children:[e("div",{className:"mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400",children:"Câu trả lời của học viên"}),e("p",{className:"text-sm leading-relaxed text-slate-600",children:r})]})}export function QuestionComponentScores({question:s}){const r=p(s);return t("div",{className:"rounded-[28px] border border-[#cfe4ff] bg-[#F3F8FF] px-4 py-5 md:px-5 md:py-6",children:[e("div",{className:"mb-5 text-center text-[20px] font-black uppercase tracking-tight text-[#0054A6]",children:"ĐIỂM THÀNH PHẦN"}),e("div",{className:"space-y-3",children:r.map(t=>e(SkillRow,{metric:t,compact:!0},`${s.questionId}-${t.key}`))})]})}export function FeedbackBlock({question:s}){return t("div",{className:"rounded-xl border border-[#ffe6b3] bg-[#FFF8E8] px-4 py-3",children:[t("div",{className:"mb-1.5 flex items-center gap-1.5 text-xs font-bold text-[#D97706]",children:[e(a,{className:"h-3.5 w-3.5"}),"Nhận xét AI"]}),e("p",{className:"text-sm leading-relaxed text-slate-700",children:h(s)})]})}export function QuestionCard({question:s}){const r=w(s.gradingStatus),l=s.gradingStatus===c.NOT_ANSWERED;return t("article",{className:"rounded-[28px] border border-[#cfe4ff] bg-white p-4 shadow-[0_10px_28px_rgba(15,23,42,0.06)] md:p-6",children:[e("div",{className:"mb-5 rounded-[22px] border border-[#dbeafe] bg-[linear-gradient(135deg,#f8fbff_0%,#eef6ff_100%)] px-4 py-4 md:px-5",children:t("div",{className:"flex flex-col gap-4 md:flex-row md:items-start md:justify-between",children:[t("div",{className:"min-w-0",children:[t("div",{className:"text-xl font-black text-[#0054A6]",children:["Câu ",s.questionNumber]}),e("div",{className:"mt-1 text-sm font-semibold text-slate-500",children:N(s.questionType)})]}),e("div",{className:"shrink-0 self-start",children:e(QuestionScorePill,{question:s})})]})}),t("div",r?{className:"grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] xl:items-start",children:[t("div",{className:"space-y-4",children:[e(PromptBlock,{question:s}),e(AnswerBlock,{question:s}),e(FeedbackBlock,{question:s})]}),e("aside",{className:"min-w-0",children:e(QuestionComponentScores,{question:s})})]}:l?{className:"space-y-4",children:[e(PromptBlock,{question:s}),e(NotAnsweredCard,{})]}:{className:"space-y-4",children:[e(PromptBlock,{question:s}),e(PendingGradingCard,{gradingStatus:s.gradingStatus})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCheck, Clock, MessageSquare, MessageSquareQuote, Music2, Volume2, Zap, } from 'lucide-react';
+import { ReviewGradingStatus } from '../../../api/result-review';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { cn } from '../../../shared/lib/utils';
+import { SpeakingResultAudioPlayer } from '../speaking/SpeakingResultAudioPlayer';
+import { deriveQuestionSkillMetrics, extractPrompt, extractQuestionFeedback, extractStudentAnswerText, formatScore, getPendingGradingLabel, getQuestionTypeLabel, isGradingComplete, } from './speaking-report.utils';
+export function InfoRow({ icon: Icon, label, value, }) {
+    return (_jsxs("p", { className: "flex items-start text-[13px] font-medium text-[#333] xs:text-sm sm:text-base md:text-lg", children: [_jsx(Icon, { className: "mr-2 mt-0.5 h-[14px] w-[14px] shrink-0 text-[#0054A6] xs:h-[16px] xs:w-[16px] sm:mr-3 sm:h-[18px] sm:w-[18px]" }), _jsxs("span", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [_jsxs("span", { className: "whitespace-nowrap", children: [label, " :"] }), _jsx("strong", { suppressHydrationWarning: true, className: "font-bold text-[#0054A6]", children: value })] })] }));
+}
+function SkillIcon({ metric }) {
+    const iconClassName = 'h-[18px] w-[18px] text-white';
+    switch (metric.icon) {
+        case 'speaker':
+            return _jsx(Volume2, { className: iconClassName });
+        case 'bolt':
+            return _jsx(Zap, { className: iconClassName });
+        case 'message':
+            return _jsx(MessageSquare, { className: iconClassName });
+        case 'check-double':
+            return _jsx(CheckCheck, { className: iconClassName });
+        case 'music':
+            return _jsx(Music2, { className: iconClassName });
+        default:
+            return null;
+    }
+}
+export function SkillRow({ metric, compact = false }) {
+    const scoreText = compact ? formatScore(metric.score / 10, 1) : formatScore(metric.score, 1);
+    const scoreUnit = compact ? '/10' : '/100';
+    return (_jsxs("div", { className: cn('flex items-center rounded-full border border-[#eef4fb] bg-white shadow-[0_1px_0_rgba(255,255,255,0.9)] last:mb-0', compact ? 'min-h-[70px] pl-[12px] pr-4' : 'mb-2 px-3 py-2 sm:mb-3 sm:px-4 sm:py-3'), children: [_jsx("div", { className: "flex h-[48px] w-[48px] shrink-0 items-center justify-center rounded-full bg-white shadow-[0_4px_12px_rgba(15,23,42,0.08)] xs:h-[52px] xs:w-[52px] sm:h-[58px] sm:w-[58px]", children: _jsx("div", { className: cn('flex items-center justify-center rounded-full text-white', compact
+                        ? 'h-[42px] w-[42px]'
+                        : 'h-[36px] w-[36px] xs:h-[38px] xs:w-[38px] sm:h-[42px] sm:w-[42px]', metric.barClass), children: _jsx(SkillIcon, { metric: metric }) }) }), _jsxs("div", { className: cn('ml-2 mr-2 flex-1 border-r border-dashed border-[#d9e0ea] pr-2 xs:ml-3 xs:mr-3 xs:pr-3 sm:pr-4', compact ? 'w-[148px]' : 'min-w-0'), children: [_jsx("h4", { className: cn('truncate font-extrabold leading-5 text-[#0054A6]', compact ? 'text-[15px]' : 'text-[13px] xs:text-[14px] sm:text-[15px]'), children: metric.label }), _jsx("span", { className: cn('mt-0.5 block truncate text-[#8b97a8] sm:mt-1', compact ? 'text-[11px]' : 'text-[10px] xs:text-[10.5px] sm:text-[11px]'), children: metric.sublabel })] }), _jsxs("div", { className: cn('shrink-0 font-extrabold text-[#0054A6]', compact
+                    ? 'w-[86px] text-[18px]'
+                    : 'w-[60px] text-[16px] xs:w-[70px] xs:text-[17px] sm:w-20 sm:text-xl'), children: [scoreText, ' ', _jsx("small", { className: cn('font-semibold text-[#c5ced8]', compact ? 'text-[12px]' : 'text-[11px] xs:text-[11.5px] sm:text-[13px]'), children: scoreUnit })] }), _jsx("div", { className: cn('ml-2 flex-1 overflow-hidden rounded-full bg-[#edf0f4] xs:ml-2.5 sm:ml-3', compact ? 'h-[12px]' : 'h-[10px] sm:h-[11px]'), children: _jsx("div", { className: cn('h-full rounded-full', metric.barClass), style: { width: `${metric.score}%` } }) })] }));
+}
+export function PendingGradingCard({ gradingStatus }) {
+    const label = getPendingGradingLabel(gradingStatus);
+    const isFailed = gradingStatus === ReviewGradingStatus.FAILED;
+    return (_jsxs("div", { className: cn('flex flex-col items-center justify-center gap-3 rounded-2xl border px-6 py-8 text-center', isFailed ? 'border-orange-200 bg-orange-50' : 'border-[#dbeafe] bg-[#F4F9FF]'), children: [_jsx("div", { className: cn('flex h-14 w-14 items-center justify-center rounded-full', isFailed ? 'bg-orange-100' : 'bg-[#E8F6FF]'), children: _jsx(Clock, { className: cn('h-7 w-7 animate-pulse', isFailed ? 'text-orange-500' : 'text-[#00AEEF]') }) }), _jsxs("div", { children: [_jsx("p", { className: cn('text-base font-bold', isFailed ? 'text-orange-600' : 'text-[#0054A6]'), children: label }), _jsx("p", { className: "mt-1 text-sm text-slate-500", children: "K\u1EBFt qu\u1EA3 s\u1EBD \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt s\u1EDBm nh\u1EA5t c\u00F3 th\u1EC3." })] })] }));
+}
+export function NotAnsweredCard() {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-6 py-8 text-center", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-slate-100", children: _jsx(Volume2, { className: "h-7 w-7 text-slate-300" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-base font-bold text-slate-500", children: "H\u1ECDc sinh ch\u01B0a tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi" }), _jsx("p", { className: "mt-1 text-sm text-slate-400", children: "C\u00E2u h\u1ECFi n\u00E0y kh\u00F4ng c\u00F3 b\u00E0i ghi \u00E2m." })] })] }));
+}
+export function QuestionScorePill({ question }) {
+    if (question.gradingStatus === ReviewGradingStatus.NOT_ANSWERED) {
+        return (_jsxs("div", { className: "inline-flex items-center rounded-full bg-slate-100 px-3.5 py-2 text-sm font-bold text-slate-500 shadow-sm ring-1 ring-slate-200", children: ["B\u1ECF qua \u2014 0 / ", formatScore(question.maxScore, 0)] }));
+    }
+    if (!isGradingComplete(question.gradingStatus)) {
+        return (_jsxs("div", { className: "inline-flex items-center gap-1.5 rounded-full bg-[#FFF8E8] px-3.5 py-2 text-sm font-bold text-[#D97706] shadow-sm ring-1 ring-[#fcd34d]", children: [_jsx(Clock, { className: "h-3.5 w-3.5" }), "Ch\u1EDD ch\u1EA5m"] }));
+    }
+    return (_jsx("div", { className: "inline-flex items-center rounded-full bg-[#E8F6FF] px-3.5 py-2 text-sm font-extrabold text-[#0054A6] shadow-sm ring-1 ring-[#b9dcff]", children: question.score == null
+            ? `Chưa chấm / ${formatScore(question.maxScore, 0)}`
+            : `${formatScore(question.score, 2)} / ${formatScore(question.maxScore, 0)}` }));
+}
+export function PromptBlock({ question }) {
+    const content = (question.questionContent ?? {});
+    const imageUrl = (content['imageUrl'] || content['image'] || content['promptImageUrl']);
+    const audioUrl = question.audioUrl ||
+        content['audioUrl'] ||
+        content['audio'] ||
+        content['questionAudio'];
+    const promptResult = extractPrompt(question);
+    const placeholder = 'Nội dung câu hỏi đang được cập nhật.';
+    return (_jsxs("div", { className: "rounded-xl border border-[#dbeafe] bg-[#F8FBFF] px-4 py-3", children: [_jsx("div", { className: "mb-2 text-xs font-bold uppercase tracking-wide text-[#00AEEF]", children: "C\u00E2u h\u1ECFi" }), promptResult.text && promptResult.text !== placeholder && (promptResult.isHtml ? (_jsx("div", { className: "mb-3 text-sm leading-relaxed text-slate-700 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-0.5 [&_p]:my-1", dangerouslySetInnerHTML: { __html: promptResult.text } })) : (_jsx("p", { className: "mb-3 text-center text-sm leading-relaxed text-slate-700", children: promptResult.text }))), audioUrl ? (_jsx("div", { className: "mb-3", children: _jsx(SpeakingResultAudioPlayer, { audioKey: audioUrl }) })) : null, imageUrl ? (_jsx("div", { className: "overflow-hidden rounded-lg border border-slate-200", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Question image", className: "h-auto w-full" }) })) : null] }));
+}
+export function AnswerBlock({ question }) {
+    const answerText = extractStudentAnswerText(question);
+    if (question.studentAnswerKey) {
+        return (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-white px-4 py-3", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold text-[#0054A6]", children: [_jsx(Volume2, { className: "h-3.5 w-3.5 text-[#00AEEF]" }), "B\u00E0i n\u00F3i c\u1EE7a h\u1ECDc vi\u00EAn"] }), _jsx(SpeakingResultAudioPlayer, { audioKey: question.studentAnswerKey })] }));
+    }
+    return (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 px-4 py-3", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400", children: "C\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a h\u1ECDc vi\u00EAn" }), _jsx("p", { className: "text-sm leading-relaxed text-slate-600", children: answerText })] }));
+}
+export function QuestionComponentScores({ question }) {
+    const metrics = deriveQuestionSkillMetrics(question);
+    return (_jsxs("div", { className: "rounded-[28px] border border-[#cfe4ff] bg-[#F3F8FF] px-4 py-5 md:px-5 md:py-6", children: [_jsx("div", { className: "mb-5 text-center text-[20px] font-black uppercase tracking-tight text-[#0054A6]", children: "\u0110I\u1EC2M TH\u00C0NH PH\u1EA6N" }), _jsx("div", { className: "space-y-3", children: metrics.map((metric) => (_jsx(SkillRow, { metric: metric, compact: true }, `${question.questionId}-${metric.key}`))) })] }));
+}
+export function FeedbackBlock({ question }) {
+    return (_jsxs("div", { className: "rounded-xl border border-[#ffe6b3] bg-[#FFF8E8] px-4 py-3", children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-1.5 text-xs font-bold text-[#D97706]", children: [_jsx(MessageSquareQuote, { className: "h-3.5 w-3.5" }), "Nh\u1EADn x\u00E9t AI"] }), _jsx("p", { className: "text-sm leading-relaxed text-slate-700", children: extractQuestionFeedback(question) })] }));
+}
+export function QuestionCard({ question }) {
+    const gradingDone = isGradingComplete(question.gradingStatus);
+    const isNotAnswered = question.gradingStatus === ReviewGradingStatus.NOT_ANSWERED;
+    return (_jsxs("article", { className: "rounded-[28px] border border-[#cfe4ff] bg-white p-4 shadow-[0_10px_28px_rgba(15,23,42,0.06)] md:p-6", children: [_jsx("div", { className: "mb-5 rounded-[22px] border border-[#dbeafe] bg-[linear-gradient(135deg,#f8fbff_0%,#eef6ff_100%)] px-4 py-4 md:px-5", children: _jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "text-xl font-black text-[#0054A6]", children: ["C\u00E2u ", question.questionNumber] }), _jsx("div", { className: "mt-1 text-sm font-semibold text-slate-500", children: getQuestionTypeLabel(question.questionType) })] }), _jsx("div", { className: "shrink-0 self-start", children: _jsx(QuestionScorePill, { question: question }) })] }) }), gradingDone ? (_jsxs("div", { className: "grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] xl:items-start", children: [_jsxs("div", { className: "space-y-4", children: [_jsx(PromptBlock, { question: question }), _jsx(AnswerBlock, { question: question }), _jsx(FeedbackBlock, { question: question })] }), _jsx("aside", { className: "min-w-0", children: _jsx(QuestionComponentScores, { question: question }) })] })) : isNotAnswered ? (_jsxs("div", { className: "space-y-4", children: [_jsx(PromptBlock, { question: question }), _jsx(NotAnsweredCard, {})] })) : (_jsxs("div", { className: "space-y-4", children: [_jsx(PromptBlock, { question: question }), _jsx(PendingGradingCard, { gradingStatus: question.gradingStatus })] }))] }));
+}

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

@@ -1 +1,171 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Star as t}from"lucide-react";import{BadgeTitle as i}from"./BadgeTitle";export var SpeakingRubricScoringVersion;!function(e){e.TEENS_FOCUS_PEARSON_V2="TEENS_FOCUS_PEARSON_V2",e.PRESCHOOL_PLACEMENT_V1="PRESCHOOL_PLACEMENT_V1",e.KINDY_PLACEMENT_V1="KINDY_PLACEMENT_V1"}(SpeakingRubricScoringVersion||(SpeakingRubricScoringVersion={}));export var KidsRubricSectionCode;!function(e){e.WARM_UP="WARM_UP",e.PART_1="PART_1",e.PART_2="PART_2",e.PART_3="PART_3"}(KidsRubricSectionCode||(KidsRubricSectionCode={}));const c={[SpeakingRubricScoringVersion.TEENS_FOCUS_PEARSON_V2]:{C1:{vi:"Ngữ pháp & Từ vựng",en:"Grammar & Vocabulary",hint:"Cấu trúc câu, thì động từ và độ đa dạng từ vựng"},C2:{vi:"Phát âm",en:"Pronunciation",hint:"Độ rõ ràng, trọng âm từ và ngữ điệu câu"},C3:{vi:"Giao tiếp tương tác",en:"Interactive Communication",hint:"Phản hồi đủ ý và tự mở rộng câu trả lời"},C4:{vi:"Quản lý diễn ngôn",en:"Discourse Management",hint:"Mạch lạc, tổ chức và phát triển ý rõ ràng"}},[SpeakingRubricScoringVersion.PRESCHOOL_PLACEMENT_V1]:{C1:{vi:"Nhận biết số đếm (1–10)",en:"Cardinal Numbers (1–10)",hint:"Đếm 1–10 và nhận ra từng số"},C2:{vi:"Nhận biết màu sắc",en:"Basic Colours",hint:"Gọi tên màu sắc và màu yêu thích"},C3:{vi:"Nhận biết hình học",en:"Basic Shapes",hint:"Gọi tên các hình cơ bản"},C4:{vi:"Nhận biết động vật",en:"Animals",hint:"Gọi tên động vật và con vật yêu thích"}},[SpeakingRubricScoringVersion.KINDY_PLACEMENT_V1]:{C1:{vi:"Chào hỏi & Giới thiệu bản thân",en:"Greeting & Self-Introduction",hint:"Giao tiếp xã hội cơ bản"},C2:{vi:"Nhận biết số đếm (1–20)",en:"Cardinal Numbers (1–20)",hint:"Từ vựng số học"},C3:{vi:"Đọc bảng chữ cái",en:"The Alphabet",hint:"Nhận biết chữ cái"},C4:{vi:"Nhận biết hình dạng",en:"Shapes",hint:"Từ vựng hình học"},C5:{vi:"Nhận biết màu sắc",en:"Colours",hint:"Từ vựng màu sắc"},C6:{vi:"Nhận biết động vật",en:"Animals",hint:"Từ vựng chủ đề quen thuộc"},C7:{vi:"Nhận biết thức ăn",en:"Food/Drinks",hint:"Từ vựng chủ đề quen thuộc"}}},r={5:{text:"#166534",bg:"#dcfce7",accent:"#16a34a"},4:{text:"#15803d",bg:"#dcfce7",accent:"#22c55e"},3:{text:"#b45309",bg:"#fef3c7",accent:"#f59e0b"},2:{text:"#c2410c",bg:"#ffedd5",accent:"#f97316"},1:{text:"#b91c1c",bg:"#fee2e2",accent:"#ef4444"}},a={5:"Excellent",4:"Good",3:"Adequate",2:"Weak",1:"Very weak"},s={5:"Vượt kỳ vọng",4:"Đáp ứng kỳ vọng (Cao)",3:"Đáp ứng kỳ vọng (Thấp)",2:"Dưới kỳ vọng",1:"Không thực hiện"},l={[SpeakingRubricScoringVersion.TEENS_FOCUS_PEARSON_V2]:a,[SpeakingRubricScoringVersion.PRESCHOOL_PLACEMENT_V1]:s,[SpeakingRubricScoringVersion.KINDY_PLACEMENT_V1]:s},o={[KidsRubricSectionCode.WARM_UP]:{vi:"Khởi động",en:"Warm-up Questions"},[KidsRubricSectionCode.PART_1]:{vi:"Part 1 — Nhận diện qua tranh",en:"Picture Identification"},[KidsRubricSectionCode.PART_2]:{vi:"Part 2 — Đọc và cung cấp thông tin",en:"Reading and Giving Information"},[KidsRubricSectionCode.PART_3]:{vi:"Part 3 — Mô tả tranh",en:"Picture Description"}};function d({score:n}){const i=Math.max(0,Math.min(5,Math.round(n)));return e("span",{className:"inline-flex items-center gap-0.5","aria-label":`${i}/5`,children:Array.from({length:5}).map((n,c)=>e(t,{"aria-hidden":!0,className:c<i?"h-4 w-4 fill-[#FFC107] text-[#FFC107]":"h-4 w-4 fill-[#e6edf5] text-[#e6edf5]"},c))})}function h({rubric:t}){const i=c[t.scoringVersion]??{},s=l[t.scoringVersion]??a;return e("div",{className:"overflow-hidden rounded-xl border border-[#00AEEF]/20 shadow-sm",children:e("div",{className:"overflow-x-auto",children:n("table",{className:"w-full min-w-[640px] text-left text-sm text-slate-700",children:[e("thead",{className:"border-b border-[#00AEEF]/20 bg-[#f0f8ff] text-[#0054A6]",children:n("tr",{className:"text-center",children:[e("th",{scope:"col",className:"w-[30%] border-r border-[#00AEEF]/10 px-4 py-3 font-bold",children:"Tiêu chí"}),e("th",{scope:"col",className:"border-r border-[#00AEEF]/10 px-4 py-3 font-bold",children:"Nhận xét chi tiết"}),e("th",{scope:"col",className:"w-[22%] px-4 py-3 font-bold",children:"Điểm"})]})}),e("tbody",{className:"divide-y divide-slate-100",children:t.criteria.map(t=>{const c=i[t.code]??{vi:t.code,en:"",hint:""},a=Math.round(t.score),l=Math.max(1,Math.min(5,a)),o=s[l],h=r[l];return n("tr",{className:"align-top transition-colors hover:bg-slate-50/70",children:[n("td",{className:"border-r border-[#00AEEF]/10 px-4 py-4",style:{boxShadow:`inset 4px 0 0 ${h.accent}`},children:[e("div",{className:"font-bold text-slate-800",children:c.vi}),c.en?e("div",{className:"text-xs italic text-slate-500",children:c.en}):null,c.hint?e("div",{className:"mt-1 text-[11px] leading-snug text-slate-400",children:c.hint}):null]}),e("td",{className:"border-r border-[#00AEEF]/10 px-4 py-4 leading-relaxed text-slate-700",children:t.evidence?.trim()?t.evidence:e("span",{className:"italic text-slate-400",children:"Không có nhận xét chi tiết."})}),n("td",{className:"px-4 py-4",children:[e(d,{score:t.score}),n("div",{className:"mt-1.5 flex items-baseline gap-1",children:[e("span",{className:"text-lg font-black leading-none text-[#0054A6]",children:a}),e("span",{className:"text-xs font-semibold text-slate-400",children:"/ 5"})]}),o?e("span",{className:"mt-1.5 inline-block whitespace-nowrap rounded-full px-2.5 py-0.5 text-xs font-bold",style:{backgroundColor:h.bg,color:h.text},children:o}):null]})]},t.code)})})]})})})}function m({section:t}){const i=o[t.code]??{vi:t.code,en:""},c=t.maxScore>0?Math.max(0,Math.min(100,t.score/t.maxScore*100)):0;return n("div",{className:"overflow-hidden rounded-xl border border-[#00AEEF]/20 shadow-sm",children:[n("div",{className:"flex flex-col gap-2 border-b border-[#00AEEF]/20 bg-[#f0f8ff] px-4 py-3 sm:flex-row sm:items-center sm:justify-between",children:[n("div",{children:[e("div",{className:"font-bold text-[#0054A6]",children:i.vi}),i.en?e("div",{className:"text-xs italic text-slate-500",children:i.en}):null]}),n("div",{className:"flex items-center gap-3",children:[e("div",{className:"h-[9px] w-24 overflow-hidden rounded-full bg-[#e6edf5]",children:e("div",{className:"h-full rounded-full bg-[#4CAF50]",style:{width:`${c}%`}})}),n("div",{className:"whitespace-nowrap text-sm font-black text-[#0054A6]",children:[t.score,n("span",{className:"text-xs font-semibold text-slate-400",children:[" / ",t.maxScore]})]})]})]}),e("table",{className:"w-full text-left text-sm text-slate-700",children:e("tbody",{className:"divide-y divide-[#00AEEF]/10",children:t.questions.map(t=>n("tr",{className:"align-top hover:bg-slate-50",children:[e("td",{className:"w-[72px] px-4 py-3",children:n("span",{className:"inline-flex h-7 min-w-7 items-center justify-center rounded-full bg-[#eaf4ff] px-2 text-xs font-black text-[#0054A6]",children:["Câu ",t.questionNo]})}),n("td",{className:"w-[88px] whitespace-nowrap px-2 py-3 font-black text-[#0054A6]",children:[t.score,n("span",{className:"text-xs font-semibold text-slate-400",children:[" / ",t.maxScore]})]}),e("td",{className:"px-4 py-3 leading-relaxed text-slate-700",children:t.evidence?.trim()?t.evidence:e("span",{className:"italic text-slate-400",children:"Không có nhận xét chi tiết."})})]},t.questionNo))})})]})}export function SpeakingRubricSection({rubric:t,badgeNumber:c="4"}){const r=t.criteria?.length>0,a=(t.sections?.length??0)>0;return r||a?n("section",{className:"relative mt-8 rounded-[20px] border-2 border-[#00AEEF] px-5 pb-6 pt-11 md:px-8",children:[e(i,{number:c,title:"ĐÁNH GIÁ KỸ NĂNG NÓI"}),a?e("div",{className:"space-y-4",children:(t.sections??[]).map(n=>e(m,{section:n},n.code))}):e(h,{rubric:t})]}):null}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Star } from 'lucide-react';
+import { BadgeTitle } from './BadgeTitle';
+export var SpeakingRubricScoringVersion;
+(function (SpeakingRubricScoringVersion) {
+    SpeakingRubricScoringVersion["TEENS_FOCUS_PEARSON_V2"] = "TEENS_FOCUS_PEARSON_V2";
+    SpeakingRubricScoringVersion["PRESCHOOL_PLACEMENT_V1"] = "PRESCHOOL_PLACEMENT_V1";
+    SpeakingRubricScoringVersion["KINDY_PLACEMENT_V1"] = "KINDY_PLACEMENT_V1";
+})(SpeakingRubricScoringVersion || (SpeakingRubricScoringVersion = {}));
+export var KidsRubricSectionCode;
+(function (KidsRubricSectionCode) {
+    KidsRubricSectionCode["WARM_UP"] = "WARM_UP";
+    KidsRubricSectionCode["PART_1"] = "PART_1";
+    KidsRubricSectionCode["PART_2"] = "PART_2";
+    KidsRubricSectionCode["PART_3"] = "PART_3";
+})(KidsRubricSectionCode || (KidsRubricSectionCode = {}));
+const CRITERION_LABELS_BY_VERSION = {
+    [SpeakingRubricScoringVersion.TEENS_FOCUS_PEARSON_V2]: {
+        C1: {
+            vi: 'Ngữ pháp & Từ vựng',
+            en: 'Grammar & Vocabulary',
+            hint: 'Cấu trúc câu, thì động từ và độ đa dạng từ vựng',
+        },
+        C2: {
+            vi: 'Phát âm',
+            en: 'Pronunciation',
+            hint: 'Độ rõ ràng, trọng âm từ và ngữ điệu câu',
+        },
+        C3: {
+            vi: 'Giao tiếp tương tác',
+            en: 'Interactive Communication',
+            hint: 'Phản hồi đủ ý và tự mở rộng câu trả lời',
+        },
+        C4: {
+            vi: 'Quản lý diễn ngôn',
+            en: 'Discourse Management',
+            hint: 'Mạch lạc, tổ chức và phát triển ý rõ ràng',
+        },
+    },
+    [SpeakingRubricScoringVersion.PRESCHOOL_PLACEMENT_V1]: {
+        C1: {
+            vi: 'Nhận biết số đếm (1–10)',
+            en: 'Cardinal Numbers (1–10)',
+            hint: 'Đếm 1–10 và nhận ra từng số',
+        },
+        C2: {
+            vi: 'Nhận biết màu sắc',
+            en: 'Basic Colours',
+            hint: 'Gọi tên màu sắc và màu yêu thích',
+        },
+        C3: {
+            vi: 'Nhận biết hình học',
+            en: 'Basic Shapes',
+            hint: 'Gọi tên các hình cơ bản',
+        },
+        C4: {
+            vi: 'Nhận biết động vật',
+            en: 'Animals',
+            hint: 'Gọi tên động vật và con vật yêu thích',
+        },
+    },
+    [SpeakingRubricScoringVersion.KINDY_PLACEMENT_V1]: {
+        C1: {
+            vi: 'Chào hỏi & Giới thiệu bản thân',
+            en: 'Greeting & Self-Introduction',
+            hint: 'Giao tiếp xã hội cơ bản',
+        },
+        C2: {
+            vi: 'Nhận biết số đếm (1–20)',
+            en: 'Cardinal Numbers (1–20)',
+            hint: 'Từ vựng số học',
+        },
+        C3: {
+            vi: 'Đọc bảng chữ cái',
+            en: 'The Alphabet',
+            hint: 'Nhận biết chữ cái',
+        },
+        C4: {
+            vi: 'Nhận biết hình dạng',
+            en: 'Shapes',
+            hint: 'Từ vựng hình học',
+        },
+        C5: {
+            vi: 'Nhận biết màu sắc',
+            en: 'Colours',
+            hint: 'Từ vựng màu sắc',
+        },
+        C6: {
+            vi: 'Nhận biết động vật',
+            en: 'Animals',
+            hint: 'Từ vựng chủ đề quen thuộc',
+        },
+        C7: {
+            vi: 'Nhận biết thức ăn',
+            en: 'Food/Drinks',
+            hint: 'Từ vựng chủ đề quen thuộc',
+        },
+    },
+};
+const SCORE_BAND_STYLES = {
+    5: { text: '#166534', bg: '#dcfce7', accent: '#16a34a' },
+    4: { text: '#15803d', bg: '#dcfce7', accent: '#22c55e' },
+    3: { text: '#b45309', bg: '#fef3c7', accent: '#f59e0b' },
+    2: { text: '#c2410c', bg: '#ffedd5', accent: '#f97316' },
+    1: { text: '#b91c1c', bg: '#fee2e2', accent: '#ef4444' },
+};
+const TEENS_BAND_LABELS = {
+    5: 'Excellent',
+    4: 'Good',
+    3: 'Adequate',
+    2: 'Weak',
+    1: 'Very weak',
+};
+const EXPECTATIONS_BAND_LABELS = {
+    5: 'Vượt kỳ vọng',
+    4: 'Đáp ứng kỳ vọng (Cao)',
+    3: 'Đáp ứng kỳ vọng (Thấp)',
+    2: 'Dưới kỳ vọng',
+    1: 'Không thực hiện',
+};
+const BAND_LABELS_BY_VERSION = {
+    [SpeakingRubricScoringVersion.TEENS_FOCUS_PEARSON_V2]: TEENS_BAND_LABELS,
+    [SpeakingRubricScoringVersion.PRESCHOOL_PLACEMENT_V1]: EXPECTATIONS_BAND_LABELS,
+    [SpeakingRubricScoringVersion.KINDY_PLACEMENT_V1]: EXPECTATIONS_BAND_LABELS,
+};
+const KIDS_SECTION_LABELS = {
+    [KidsRubricSectionCode.WARM_UP]: { vi: 'Khởi động', en: 'Warm-up Questions' },
+    [KidsRubricSectionCode.PART_1]: { vi: 'Part 1 — Nhận diện qua tranh', en: 'Picture Identification' },
+    [KidsRubricSectionCode.PART_2]: {
+        vi: 'Part 2 — Đọc và cung cấp thông tin',
+        en: 'Reading and Giving Information',
+    },
+    [KidsRubricSectionCode.PART_3]: { vi: 'Part 3 — Mô tả tranh', en: 'Picture Description' },
+};
+function StarRating({ score }) {
+    const clamped = Math.max(0, Math.min(5, Math.round(score)));
+    return (_jsx("span", { className: "inline-flex items-center gap-0.5", "aria-label": `${clamped}/5`, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { "aria-hidden": true, className: i < clamped
+                ? 'h-4 w-4 fill-[#FFC107] text-[#FFC107]'
+                : 'h-4 w-4 fill-[#e6edf5] text-[#e6edf5]' }, i))) }));
+}
+function CriteriaTable({ rubric }) {
+    const labels = CRITERION_LABELS_BY_VERSION[rubric.scoringVersion] ?? {};
+    const bandLabels = BAND_LABELS_BY_VERSION[rubric.scoringVersion] ?? TEENS_BAND_LABELS;
+    return (_jsx("div", { className: "overflow-hidden rounded-xl border border-[#00AEEF]/20 shadow-sm", children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[640px] text-left text-sm text-slate-700", children: [_jsx("thead", { className: "border-b border-[#00AEEF]/20 bg-[#f0f8ff] text-[#0054A6]", children: _jsxs("tr", { className: "text-center", children: [_jsx("th", { scope: "col", className: "w-[30%] border-r border-[#00AEEF]/10 px-4 py-3 font-bold", children: "Ti\u00EAu ch\u00ED" }), _jsx("th", { scope: "col", className: "border-r border-[#00AEEF]/10 px-4 py-3 font-bold", children: "Nh\u1EADn x\u00E9t chi ti\u1EBFt" }), _jsx("th", { scope: "col", className: "w-[22%] px-4 py-3 font-bold", children: "\u0110i\u1EC3m" })] }) }), _jsx("tbody", { className: "divide-y divide-slate-100", children: rubric.criteria.map((c) => {
+                            const label = labels[c.code] ?? { vi: c.code, en: '', hint: '' };
+                            const rounded = Math.round(c.score);
+                            const clamped = Math.max(1, Math.min(5, rounded));
+                            const bandLabel = bandLabels[clamped];
+                            const band = SCORE_BAND_STYLES[clamped];
+                            return (_jsxs("tr", { className: "align-top transition-colors hover:bg-slate-50/70", children: [_jsxs("td", { className: "border-r border-[#00AEEF]/10 px-4 py-4", style: { boxShadow: `inset 4px 0 0 ${band.accent}` }, children: [_jsx("div", { className: "font-bold text-slate-800", children: label.vi }), label.en ? _jsx("div", { className: "text-xs italic text-slate-500", children: label.en }) : null, label.hint ? (_jsx("div", { className: "mt-1 text-[11px] leading-snug text-slate-400", children: label.hint })) : null] }), _jsx("td", { className: "border-r border-[#00AEEF]/10 px-4 py-4 leading-relaxed text-slate-700", children: c.evidence?.trim() ? (c.evidence) : (_jsx("span", { className: "italic text-slate-400", children: "Kh\u00F4ng c\u00F3 nh\u1EADn x\u00E9t chi ti\u1EBFt." })) }), _jsxs("td", { className: "px-4 py-4", children: [_jsx(StarRating, { score: c.score }), _jsxs("div", { className: "mt-1.5 flex items-baseline gap-1", children: [_jsx("span", { className: "text-lg font-black leading-none text-[#0054A6]", children: rounded }), _jsx("span", { className: "text-xs font-semibold text-slate-400", children: "/ 5" })] }), bandLabel ? (_jsx("span", { className: "mt-1.5 inline-block whitespace-nowrap rounded-full px-2.5 py-0.5 text-xs font-bold", style: { backgroundColor: band.bg, color: band.text }, children: bandLabel })) : null] })] }, c.code));
+                        }) })] }) }) }));
+}
+function SectionCard({ section }) {
+    const label = KIDS_SECTION_LABELS[section.code] ?? { vi: section.code, en: '' };
+    const percentage = section.maxScore > 0
+        ? Math.max(0, Math.min(100, (section.score / section.maxScore) * 100))
+        : 0;
+    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-[#00AEEF]/20 shadow-sm", children: [_jsxs("div", { className: "flex flex-col gap-2 border-b border-[#00AEEF]/20 bg-[#f0f8ff] px-4 py-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "font-bold text-[#0054A6]", children: label.vi }), label.en ? _jsx("div", { className: "text-xs italic text-slate-500", children: label.en }) : null] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-[9px] w-24 overflow-hidden rounded-full bg-[#e6edf5]", children: _jsx("div", { className: "h-full rounded-full bg-[#4CAF50]", style: { width: `${percentage}%` } }) }), _jsxs("div", { className: "whitespace-nowrap text-sm font-black text-[#0054A6]", children: [section.score, _jsxs("span", { className: "text-xs font-semibold text-slate-400", children: [" / ", section.maxScore] })] })] })] }), _jsx("table", { className: "w-full text-left text-sm text-slate-700", children: _jsx("tbody", { className: "divide-y divide-[#00AEEF]/10", children: section.questions.map((q) => (_jsxs("tr", { className: "align-top hover:bg-slate-50", children: [_jsx("td", { className: "w-[72px] px-4 py-3", children: _jsxs("span", { className: "inline-flex h-7 min-w-7 items-center justify-center rounded-full bg-[#eaf4ff] px-2 text-xs font-black text-[#0054A6]", children: ["C\u00E2u ", q.questionNo] }) }), _jsxs("td", { className: "w-[88px] whitespace-nowrap px-2 py-3 font-black text-[#0054A6]", children: [q.score, _jsxs("span", { className: "text-xs font-semibold text-slate-400", children: [" / ", q.maxScore] })] }), _jsx("td", { className: "px-4 py-3 leading-relaxed text-slate-700", children: q.evidence?.trim() ? (q.evidence) : (_jsx("span", { className: "italic text-slate-400", children: "Kh\u00F4ng c\u00F3 nh\u1EADn x\u00E9t chi ti\u1EBFt." })) })] }, q.questionNo))) }) })] }));
+}
+/**
+ * Attempt-level speaking rubric breakdown for TEENS / PRESCHOOL / KINDY / KIDS.
+ * Source: oe-exam-fe/.../review/components/SpeakingRubricSection.tsx
+ */
+export function SpeakingRubricSection({ rubric, badgeNumber = '4', }) {
+    const hasCriteria = rubric.criteria?.length > 0;
+    const hasSections = (rubric.sections?.length ?? 0) > 0;
+    if (!hasCriteria && !hasSections)
+        return null;
+    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: badgeNumber, title: "\u0110\u00C1NH GI\u00C1 K\u1EF8 N\u0102NG N\u00D3I" }), hasSections ? (_jsx("div", { className: "space-y-4", children: (rubric.sections ?? []).map((section) => (_jsx(SectionCard, { section: section }, section.code))) })) : (_jsx(CriteriaTable, { rubric: rubric }))] }));
+}