@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

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