@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/exams/ExamCreator.js

@@ -1 +1,287 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useCallback as o,useEffect as i,useMemo as r,useRef as a,useState as s}from"react";import{CheckCircle as d,ChevronLeft as l,ChevronRight as u,Loader2 as c,Save as m}from"lucide-react";import{Button as p}from"../../components/ui/button";import{QuestionBankOption as g}from"../questions/components/QuestionBankOption";import{QuestionSearchDropdown as f}from"../questions/components/QuestionSearchDropdown";import{QuestionCreator as h}from"../questions/creator/QuestionCreator";import{useToast as x}from"../../shared/lib/hooks/useToast";import{useT as b}from"../../shared/lib/i18n";import{useExamQuestionStore as v}from"../../shared/lib/stores/examQuestionStore";import{transformApiQuestionToFrontend as C}from"../../shared/lib/utils/question-reverse-transform";import{ExamPartTabs as w}from"./ExamPartTabs";import{ExamQuestionGrid as y}from"./ExamQuestionGrid";import{PartAudioUploader as N}from"./PartAudioUploader";import{CompletionDialog as I}from"./CompletionDialog";import{UnsavedChangesDialog as k}from"./UnsavedChangesDialog";import{clearQuestionStatuses as q,getQuestionStatus as Q,QuestionStatus as S,setQuestionStatus as E}from"./exam-question-status";import{getEffectiveQuestionConfig as D,getPartByQuestionIndex as T,normalizeTemplateGroupConfig as A}from"./exam-template.utils";export function ExamCreator(L){const{template:B,examId:V=`exam-${Date.now()}`,initialQuestions:j=[]}=L,U=b(),{success:P,warning:$,error:M}=x(),R=a(null),z=a({}),F=a(!1),G=a(!1),H=a(!1),K=v(e=>e.initialized),W=v(e=>e.examId),J=v(e=>e.initializeExam),X=v(e=>e.resetStore),Y=v(e=>e.currentQuestionIndex),Z=v(e=>e.setCurrentQuestionIndex),ee=v(e=>e.questions),te=v(e=>e.upsertQuestionData),ne=v(e=>e.clearQuestionData),oe=v(e=>e.markQuestionCompleted),ie=v(e=>e.getQuestionData),re=v(e=>e.setSharedHintLetters),[ae,se]=s({}),[de,le]=s(!1),[ue,ce]=s(!1),[me,pe]=s(!1),[ge,fe]=s(null),[he,xe]=s(!1),[be,ve]=s(!1),[Ce,we]=s({}),[ye,Ne]=s({}),[Ie,ke]=s({}),[qe,Qe]=s(),[Se,Ee]=s(),De=T(B,Y),Te=De?.id??"",Ae=De?D(De,Y):void 0,Oe=De?A(De):void 0,_e=Boolean(Oe?.groups&&!Ae?.groups),Le=_(Ae),Be=Le&&!_e?`${Te}_${Le}`:Te,Ve=ee[Y]?.data,je=Ce[Y]??{checked:!1,code:"",title:""},Ue=r(()=>{const e=new Set;return Object.entries(ee).forEach(([t,n])=>{n.isCompleted&&e.add(Number(t))}),e},[ee]),Pe=r(()=>({id:V,templateId:B.id,questions:Object.values(ee).map(e=>e.data),currentQuestionIndex:Y,lastSaved:(new Date).toISOString(),createdAt:(new Date).toISOString(),updatedAt:(new Date).toISOString(),isCompleted:Ue.size>=B.totalQuestions}),[Ue.size,Y,V,ee,B.id,B.totalQuestions]);i(()=>{const e=W&&W!==V;e&&X(),K&&!e||J({examId:V,templateId:B.id,totalQuestions:B.totalQuestions})},[V,J,K,X,W,B.id,B.totalQuestions]),i(()=>{if(!K||0===j.length)return;F.current=!0,j.forEach(e=>{const t=(e.questionNumber??1)-1,n={...e,isCompleted:!0};te(t,n),oe(t,!0),z.current[t]=n,function(e,t,n,o){if("LOOK_PICTURE_FILL_WORD_HINT"!==t.type||!t.partId)return;const i=t.answer,r=t.questionGroup?.groupNumber;if(!i?.hintLetters?.length||!r)return;const a=T(n,e),s=a?D(a,e):void 0,d=_(s),l=d?`${t.partId}_${d}`:t.partId;o(l,r,i.hintLetters)}(t,n,B,re);const o=e.questionBank;o?.id&&Ne(e=>({...e,[t]:o}))});const e=window.setTimeout(()=>{F.current=!1},1e3);return()=>window.clearTimeout(e)},[j,K,oe,re,B,te]),i(()=>{pe(Q(V,Y+1)===S.UNSAVED)},[Y,V]),i(()=>{ce(Object.values(ee).some(e=>Object.keys(e.data).length>0&&!e.isCompleted))},[ee]),i(()=>{const e=e=>{ue&&(e.preventDefault(),e.returnValue="")};return window.addEventListener("beforeunload",e),()=>window.removeEventListener("beforeunload",e)},[ue]);const $e=o(e=>{H.current=!0,pe(!1),Z(Math.max(0,Math.min(B.totalQuestions-1,e))),window.setTimeout(()=>{H.current=!1},500)},[Z,B.totalQuestions]),Me=e=>{if(me)return fe(e),void xe(!0);$e(e)},Re=o(e=>{F.current||G.current||H.current||(te(Y,{questionNumber:Y+1,partId:Te,...e}),E(V,Y+1,S.UNSAVED),pe(!0))},[Te,Y,V,te]),ze=async e=>{if(!De)return;if(!function(e,t,n,o){if(!e.checked||t?.id)return!0;const i=e.code.trim()?void 0:"Vui lòng nhập mã câu hỏi cho ngân hàng",r=e.title.trim()?void 0:"Vui lòng nhập tiêu đề câu hỏi cho ngân hàng";return n(i),o(r),!i&&!r}(je,ye[Y],Qe,Ee))return;if(!1===await(R.current?.triggerValidation?.()))return;const t=R.current?.getFormData?.(),n=function(e,t,n,o,i,r,a){return{...n,...e,...t?{answer:t}:{},type:e?.type??n?.type??o,id:n?.id??e?.id,partId:i.id,questionNumber:r+1,difficulty:e?.difficulty??a??n?.difficulty,skill:i.skill,isCompleted:!0}}(e,t,ie(Y),Ae?.questionType,De,Y,L.examDifficulty);le(!0);try{const e=await(L.onSaveQuestion?.({question:n,questionIndex:Y,template:B,examId:V,examDifficulty:L.examDifficulty,examLevel:L.examLevel,subjectId:L.subjectId,sectionId:(o=Ae,o&&"sectionId"in o?o.sectionId:void 0),addToQuestionBank:!ye[Y]?.id&&je.checked,questionBankCode:je.checked?je.code:void 0,questionBankTitle:je.checked?je.title:void 0,existingQuestionBankId:ye[Y]?.id})),t=function(e,t){return e&&"question"in e?{...t,...e.question,isCompleted:!0}:{...t,...e??{},isCompleted:!0}}(e,n);te(Y,t),oe(Y,!0),z.current[Y]=t,function(e,t,n){const o=e&&"questionBank"in e?e.questionBank:e?.questionBank;o?.id&&n(e=>({...e,[t]:o}))}(e,Y,Ne),G.current=!0,window.setTimeout(()=>{G.current=!1},500),E(V,Y+1,S.SAVED),pe(!1),P({message:U("common.examCreator.saveSuccess",{index:String(Y+1)})})}catch(e){M({message:U("common.examCreator.saveError",{index:String(Y+1)}),description:e instanceof Error?e.message:void 0})}finally{le(!1)}var o};return L.saveExamRef&&(L.saveExamRef.current=()=>{me?$({message:U("common.examCreator.saveBeforeExit")}):ve(!0)}),t("div",{className:"flex min-h-0 flex-1 flex-col overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50/30",children:[t("div",{className:"flex min-h-0 flex-1 overflow-hidden",children:[e("div",{className:"w-80 overflow-y-auto border-r border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm",children:e(w,{template:B,currentPartId:Te,completedQuestions:Ue,onPartChange:e=>Me(B.parts.find(t=>t.id===e)?.startIndex??0)})}),t("div",{className:"flex flex-1 flex-col overflow-hidden",children:[e("div",{className:"min-h-0 flex-1 overflow-y-auto p-4 pb-4",children:t("div",{className:"mx-auto max-w-4xl",children:["LISTENING"===De?.skill&&e(N,{partId:De.id,partName:De.name,audioUrl:L.partAudioOverrides?.[De.id]??De.audioUrl??"",examId:V,onAudioChange:e=>{L.onPartAudioChange?.(De.id,e)},isReadOnly:!L.onPartAudioChange}),e(h,{initialData:Ve,prefilledType:Ae?.questionType,prefilledSkill:De?.skill,optionCount:Ae?.optionCount,optionMode:Ae?.optionMode,defaultValue:Ae?.defaultValue,defaultQuestion:Ae?.defaultQuestion,viewMode:Ae?.viewMode,groups:Ae?.groups||Oe?.groups,groupConfig:Ae?.groupConfig||Oe?.groupConfig,groupType:Ae?.groupType||Oe?.groupType,articleCount:Ae?.articleCount??De?.articleCount,questionConfig:Ae?.questionConfig||De?.questionConfig,questionIndexInPart:_e?Y-(De?.startIndex??0):Y-(Ae?.startIndex??De?.startIndex??0),partId:Be,onChange:Re,onUnsavedChangesChange:pe,onSave:ze,onCancel:L.onCancel,isEmbedded:!0,externalErrors:ae[Y],validationRef:R,suggestedAnswers:Ae?.suggestedAnswers||De?.suggestedAnswers,hasSuggestedAnswers:Ae?.hasSuggestedAnswers??De?.hasSuggestedAnswers,headerExtra:e(f,{questionType:Ae?.questionType||De?.questionType,onSelect:e=>{const t={...C({question_type:e.type,content:e.content,correct_answer:e.answer,points:e.points,difficult_level:e.difficulty,question_skill_type:e.skill,explanation:e.explanation}),id:void 0,partId:Te,questionNumber:Y+1,isCompleted:!1};te(Y,t);const n=e.id,o=e.code,i=e.title;(o||i)&&ke(e=>({...e,[Y]:{code:o,title:i}})),n&&(o||i)&&Ne(e=>({...e,[Y]:{id:n,code:o??"",title:i??""}})),E(V,Y+1,S.UNSAVED),pe(!0),oe(Y,!1),P({message:U("common.examCreator.bankSelected")})},selectedQuestionLabel:Ie[Y]?`${Ie[Y].code?`#${Ie[Y].code} - `:""}${Ie[Y].title||""}`:void 0,disabled:!(Ae?.questionType||De?.questionType),compact:!0,searchQuestions:L.searchQuestions})},Y),e("div",{className:"mt-8",children:e(g,{checked:je.checked,onCheckedChange:e=>O(Y,{checked:e},we,pe,V),code:je.code,onCodeChange:e=>O(Y,{code:e},we,pe,V),title:je.title,onTitleChange:e=>O(Y,{title:e},we,pe,V),codeError:qe,error:Se,existingBank:ye[Y]||null})})]})}),e("div",{className:"flex-shrink-0 border-t border-gray-200/80 bg-white/95 shadow-[0_-4px_20px_rgba(0,0,0,0.08)] backdrop-blur-sm",children:t("div",{className:"mx-auto flex max-w-4xl items-center justify-between px-6 py-4",children:[t(p,{variant:"outline",onClick:()=>Me(Y-1),disabled:0===Y,className:"gap-2 border-gray-300 hover:bg-gray-50",children:[e(l,{className:"h-4 w-4"}),"Câu trước"]}),t("div",{className:"flex items-center gap-4",children:[me?t("div",{className:"flex items-center gap-2 rounded-full bg-amber-50 px-3 py-1.5 ring-1 ring-amber-200",children:[e("span",{className:"h-2 w-2 animate-pulse rounded-full bg-amber-500"}),e("span",{className:"text-xs font-medium text-amber-700",children:"Chưa lưu"})]}):ee[Y]?.isCompleted?t("div",{className:"flex items-center gap-2 rounded-full bg-green-50 px-3 py-1.5 ring-1 ring-green-200",children:[e(d,{className:"h-3.5 w-3.5 text-green-500"}),e("span",{className:"text-xs font-medium text-green-700",children:"Đã lưu"})]}):null,t("div",{className:"flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2",children:[t("span",{className:"text-sm font-bold text-gray-900",children:["Câu ",Y+1]}),e("span",{className:"text-sm text-gray-400",children:"/"}),e("span",{className:"text-sm text-gray-500",children:B.totalQuestions})]}),e(p,{onClick:()=>{ze(ie(Y))},disabled:de||!me,className:"gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-md hover:shadow-lg transition-all",children:t(n,de?{children:[e(c,{className:"h-4 w-4 animate-spin"}),"Đang lưu..."]}:{children:[e(m,{className:"h-4 w-4"}),"Lưu câu hỏi"]})})]}),t(p,{variant:"outline",onClick:()=>Me(Y+1),disabled:Y>=B.totalQuestions-1||!ee[Y]?.isCompleted,className:"gap-2 border-gray-300 hover:bg-gray-50",children:["Câu tiếp theo",e(u,{className:"h-4 w-4"})]})]})})]}),e("div",{className:"w-80 overflow-y-auto border-l border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm",children:e(y,{template:B,currentQuestionIndex:Y,completedQuestions:Ue,onQuestionChange:Me})})]}),e(I,{open:be,onOpenChange:ve,completedCount:Ue.size,totalQuestions:B.totalQuestions,onConfirm:()=>{ve(!1),q(V),X(),L.onSave?.(Pe)}}),e(k,{open:he,onOpenChange:xe,onConfirm:()=>{const e=z.current[Y];e?(te(Y,e),E(V,Y+1,S.SAVED)):ne(Y),pe(!1),null!==ge&&$e(ge),fe(null),xe(!1)},onCancel:()=>xe(!1),questionNumber:Y+1})]})}function O(e,t,n,o,i){n(n=>{const o=n[e]??{checked:!1,code:"",title:""};return{...n,[e]:{...o,...t}}}),o(!0),E(i,e+1,S.UNSAVED)}function _(e){return e&&"sectionName"in e?e.sectionName:void 0}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CheckCircle, ChevronLeft, ChevronRight, Loader2, Save } from 'lucide-react';
+import { Button } from '../../components/ui/button';
+import { QuestionBankOption } from '../questions/components/QuestionBankOption';
+import { QuestionSearchDropdown } from '../questions/components/QuestionSearchDropdown';
+import { QuestionCreator } from '../questions/creator/QuestionCreator';
+import { useToast } from '../../shared/lib/hooks/useToast';
+import { useT } from '../../shared/lib/i18n';
+import { useExamQuestionStore } from '../../shared/lib/stores/examQuestionStore';
+import { transformApiQuestionToFrontend } from '../../shared/lib/utils/question-reverse-transform';
+import { ExamPartTabs } from './ExamPartTabs';
+import { ExamQuestionGrid } from './ExamQuestionGrid';
+import { PartAudioUploader } from './PartAudioUploader';
+import { CompletionDialog } from './CompletionDialog';
+import { UnsavedChangesDialog } from './UnsavedChangesDialog';
+import { clearQuestionStatuses, getQuestionStatus, QuestionStatus, setQuestionStatus } from './exam-question-status';
+import { getEffectiveQuestionConfig, getPartByQuestionIndex, normalizeTemplateGroupConfig } from './exam-template.utils';
+export function ExamCreator(props) {
+    const { template, examId = `exam-${Date.now()}`, initialQuestions = [] } = props;
+    const t = useT();
+    const { success, warning, error } = useToast();
+    const validationRef = useRef(null);
+    const savedQuestionsRef = useRef({});
+    const justInitializedRef = useRef(false);
+    const justSavedRef = useRef(false);
+    const isNavigatingRef = useRef(false);
+    const initialized = useExamQuestionStore((state) => state.initialized);
+    const storedExamId = useExamQuestionStore((state) => state.examId);
+    const initializeExam = useExamQuestionStore((state) => state.initializeExam);
+    const resetStore = useExamQuestionStore((state) => state.resetStore);
+    const currentQuestionIndex = useExamQuestionStore((state) => state.currentQuestionIndex);
+    const setCurrentQuestionIndex = useExamQuestionStore((state) => state.setCurrentQuestionIndex);
+    const questionsState = useExamQuestionStore((state) => state.questions);
+    const upsertQuestionData = useExamQuestionStore((state) => state.upsertQuestionData);
+    const clearQuestionData = useExamQuestionStore((state) => state.clearQuestionData);
+    const markQuestionCompleted = useExamQuestionStore((state) => state.markQuestionCompleted);
+    const getQuestionData = useExamQuestionStore((state) => state.getQuestionData);
+    const setSharedHintLetters = useExamQuestionStore((state) => state.setSharedHintLetters);
+    const [validationErrors, setValidationErrors] = useState({});
+    const [isSavingQuestion, setIsSavingQuestion] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const [currentQuestionHasUnsavedChanges, setCurrentQuestionHasUnsavedChanges] = useState(false);
+    const [pendingNavigationIndex, setPendingNavigationIndex] = useState(null);
+    const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
+    const [showCompletionDialog, setShowCompletionDialog] = useState(false);
+    const [questionBankSettings, setQuestionBankSettings] = useState({});
+    const [existingQuestionBanks, setExistingQuestionBanks] = useState({});
+    const [selectedQuestionInfo, setSelectedQuestionInfo] = useState({});
+    const [questionBankCodeError, setQuestionBankCodeError] = useState();
+    const [questionBankTitleError, setQuestionBankTitleError] = useState();
+    const currentPart = getPartByQuestionIndex(template, currentQuestionIndex);
+    const currentPartId = currentPart?.id ?? '';
+    const currentConfig = currentPart ? getEffectiveQuestionConfig(currentPart, currentQuestionIndex) : undefined;
+    const normalizedPart = currentPart ? normalizeTemplateGroupConfig(currentPart) : undefined;
+    const isPartLevelGroup = Boolean(normalizedPart?.groups && !currentConfig?.groups);
+    const currentSectionName = getConfigSectionName(currentConfig);
+    const sharedDataPartId = currentSectionName && !isPartLevelGroup ? `${currentPartId}_${currentSectionName}` : currentPartId;
+    const currentQuestionDraft = questionsState[currentQuestionIndex]?.data;
+    const bankSetting = questionBankSettings[currentQuestionIndex] ?? { checked: false, code: '', title: '' };
+    const completedQuestions = useMemo(() => {
+        const set = new Set();
+        Object.entries(questionsState).forEach(([index, entry]) => {
+            if (entry.isCompleted)
+                set.add(Number(index));
+        });
+        return set;
+    }, [questionsState]);
+    const examData = useMemo(() => ({
+        id: examId,
+        templateId: template.id,
+        questions: Object.values(questionsState).map((entry) => entry.data),
+        currentQuestionIndex,
+        lastSaved: new Date().toISOString(),
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        isCompleted: completedQuestions.size >= template.totalQuestions,
+    }), [completedQuestions.size, currentQuestionIndex, examId, questionsState, template.id, template.totalQuestions]);
+    useEffect(() => {
+        const needsReset = storedExamId && storedExamId !== examId;
+        if (needsReset)
+            resetStore();
+        if (!initialized || needsReset)
+            initializeExam({ examId, templateId: template.id, totalQuestions: template.totalQuestions });
+    }, [examId, initializeExam, initialized, resetStore, storedExamId, template.id, template.totalQuestions]);
+    useEffect(() => {
+        if (!initialized || initialQuestions.length === 0)
+            return;
+        justInitializedRef.current = true;
+        initialQuestions.forEach((question) => {
+            const index = (question.questionNumber ?? 1) - 1;
+            const savedQuestion = { ...question, isCompleted: true };
+            upsertQuestionData(index, savedQuestion);
+            markQuestionCompleted(index, true);
+            savedQuestionsRef.current[index] = savedQuestion;
+            hydrateSharedHintLetters(index, savedQuestion, template, setSharedHintLetters);
+            const questionBank = question.questionBank;
+            if (questionBank?.id)
+                setExistingQuestionBanks((prev) => ({ ...prev, [index]: questionBank }));
+        });
+        const timer = window.setTimeout(() => { justInitializedRef.current = false; }, 1000);
+        return () => window.clearTimeout(timer);
+    }, [initialQuestions, initialized, markQuestionCompleted, setSharedHintLetters, template, upsertQuestionData]);
+    useEffect(() => {
+        setCurrentQuestionHasUnsavedChanges(getQuestionStatus(examId, currentQuestionIndex + 1) === QuestionStatus.UNSAVED);
+    }, [currentQuestionIndex, examId]);
+    useEffect(() => {
+        setHasUnsavedChanges(Object.values(questionsState).some((entry) => Object.keys(entry.data).length > 0 && !entry.isCompleted));
+    }, [questionsState]);
+    useEffect(() => {
+        const handleBeforeUnload = (event) => {
+            if (!hasUnsavedChanges)
+                return;
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, [hasUnsavedChanges]);
+    const navigateToQuestion = useCallback((targetIndex) => {
+        isNavigatingRef.current = true;
+        setCurrentQuestionHasUnsavedChanges(false);
+        setCurrentQuestionIndex(Math.max(0, Math.min(template.totalQuestions - 1, targetIndex)));
+        window.setTimeout(() => { isNavigatingRef.current = false; }, 500);
+    }, [setCurrentQuestionIndex, template.totalQuestions]);
+    const tryNavigate = (targetIndex) => {
+        if (currentQuestionHasUnsavedChanges) {
+            setPendingNavigationIndex(targetIndex);
+            setShowUnsavedDialog(true);
+            return;
+        }
+        navigateToQuestion(targetIndex);
+    };
+    const confirmNavigation = () => {
+        const originalData = savedQuestionsRef.current[currentQuestionIndex];
+        if (originalData) {
+            upsertQuestionData(currentQuestionIndex, originalData);
+            setQuestionStatus(examId, currentQuestionIndex + 1, QuestionStatus.SAVED);
+        }
+        else {
+            clearQuestionData(currentQuestionIndex);
+        }
+        setCurrentQuestionHasUnsavedChanges(false);
+        if (pendingNavigationIndex !== null)
+            navigateToQuestion(pendingNavigationIndex);
+        setPendingNavigationIndex(null);
+        setShowUnsavedDialog(false);
+    };
+    const handleQuestionDraftChange = useCallback((draft) => {
+        if (justInitializedRef.current || justSavedRef.current || isNavigatingRef.current)
+            return;
+        upsertQuestionData(currentQuestionIndex, { questionNumber: currentQuestionIndex + 1, partId: currentPartId, ...draft });
+        setQuestionStatus(examId, currentQuestionIndex + 1, QuestionStatus.UNSAVED);
+        setCurrentQuestionHasUnsavedChanges(true);
+    }, [currentPartId, currentQuestionIndex, examId, upsertQuestionData]);
+    const handleQuestionSave = async (questionData) => {
+        if (!currentPart)
+            return;
+        if (!validateQuestionBank(bankSetting, existingQuestionBanks[currentQuestionIndex], setQuestionBankCodeError, setQuestionBankTitleError))
+            return;
+        if (await validationRef.current?.triggerValidation?.() === false)
+            return;
+        const freshData = validationRef.current?.getFormData?.();
+        const existing = getQuestionData(currentQuestionIndex);
+        const question = buildQuestionForSave(questionData, freshData, existing, currentConfig?.questionType, currentPart, currentQuestionIndex, props.examDifficulty);
+        setIsSavingQuestion(true);
+        try {
+            const saved = await props.onSaveQuestion?.({
+                question,
+                questionIndex: currentQuestionIndex,
+                template,
+                examId,
+                examDifficulty: props.examDifficulty,
+                examLevel: props.examLevel,
+                subjectId: props.subjectId,
+                sectionId: getConfigSectionId(currentConfig),
+                addToQuestionBank: existingQuestionBanks[currentQuestionIndex]?.id ? false : bankSetting.checked,
+                questionBankCode: bankSetting.checked ? bankSetting.code : undefined,
+                questionBankTitle: bankSetting.checked ? bankSetting.title : undefined,
+                existingQuestionBankId: existingQuestionBanks[currentQuestionIndex]?.id,
+            });
+            const savedQuestion = normalizeSavedQuestion(saved, question);
+            upsertQuestionData(currentQuestionIndex, savedQuestion);
+            markQuestionCompleted(currentQuestionIndex, true);
+            savedQuestionsRef.current[currentQuestionIndex] = savedQuestion;
+            updateQuestionBankAfterSave(saved, currentQuestionIndex, setExistingQuestionBanks);
+            justSavedRef.current = true;
+            window.setTimeout(() => { justSavedRef.current = false; }, 500);
+            setQuestionStatus(examId, currentQuestionIndex + 1, QuestionStatus.SAVED);
+            setCurrentQuestionHasUnsavedChanges(false);
+            success({ message: t('common.examCreator.saveSuccess', { index: String(currentQuestionIndex + 1) }) });
+        }
+        catch (err) {
+            error({ message: t('common.examCreator.saveError', { index: String(currentQuestionIndex + 1) }), description: err instanceof Error ? err.message : undefined });
+        }
+        finally {
+            setIsSavingQuestion(false);
+        }
+    };
+    const handleExistingQuestionSelect = (question) => {
+        const transformed = transformApiQuestionToFrontend({
+            question_type: question.type,
+            content: question.content,
+            correct_answer: question.answer,
+            points: question.points,
+            difficult_level: question.difficulty,
+            question_skill_type: question.skill,
+            explanation: question.explanation,
+        });
+        const selectedQuestion = { ...transformed, id: undefined, partId: currentPartId, questionNumber: currentQuestionIndex + 1, isCompleted: false };
+        upsertQuestionData(currentQuestionIndex, selectedQuestion);
+        const bankId = question.id;
+        const code = question.code;
+        const title = question.title;
+        if (code || title)
+            setSelectedQuestionInfo((prev) => ({ ...prev, [currentQuestionIndex]: { code, title } }));
+        if (bankId && (code || title))
+            setExistingQuestionBanks((prev) => ({ ...prev, [currentQuestionIndex]: { id: bankId, code: code ?? '', title: title ?? '' } }));
+        setQuestionStatus(examId, currentQuestionIndex + 1, QuestionStatus.UNSAVED);
+        setCurrentQuestionHasUnsavedChanges(true);
+        markQuestionCompleted(currentQuestionIndex, false);
+        success({ message: t('common.examCreator.bankSelected') });
+    };
+    const handleConfirmSaveExam = () => {
+        setShowCompletionDialog(false);
+        clearQuestionStatuses(examId);
+        resetStore();
+        void props.onSave?.(examData);
+    };
+    props.saveExamRef && (props.saveExamRef.current = () => {
+        if (currentQuestionHasUnsavedChanges)
+            warning({ message: t('common.examCreator.saveBeforeExit') });
+        else
+            setShowCompletionDialog(true);
+    });
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50/30", children: [_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "w-80 overflow-y-auto border-r border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm", children: _jsx(ExamPartTabs, { template: template, currentPartId: currentPartId, completedQuestions: completedQuestions, onPartChange: (partId) => tryNavigate(template.parts.find((part) => part.id === partId)?.startIndex ?? 0) }) }), _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-4 pb-4", children: _jsxs("div", { className: "mx-auto max-w-4xl", children: [currentPart?.skill === 'LISTENING' && _jsx(PartAudioUploader, { partId: currentPart.id, partName: currentPart.name, audioUrl: props.partAudioOverrides?.[currentPart.id] ?? currentPart.audioUrl ?? '', examId: examId, onAudioChange: (url) => void props.onPartAudioChange?.(currentPart.id, url), isReadOnly: !props.onPartAudioChange }), _jsx(QuestionCreator, { initialData: currentQuestionDraft, prefilledType: currentConfig?.questionType, prefilledSkill: currentPart?.skill, optionCount: currentConfig?.optionCount, optionMode: currentConfig?.optionMode, defaultValue: currentConfig?.defaultValue, defaultQuestion: currentConfig?.defaultQuestion, viewMode: currentConfig?.viewMode, groups: currentConfig?.groups || normalizedPart?.groups, groupConfig: currentConfig?.groupConfig || normalizedPart?.groupConfig, groupType: currentConfig?.groupType || normalizedPart?.groupType, articleCount: currentConfig?.articleCount ?? currentPart?.articleCount, questionConfig: currentConfig?.questionConfig || currentPart?.questionConfig, questionIndexInPart: isPartLevelGroup ? currentQuestionIndex - (currentPart?.startIndex ?? 0) : currentQuestionIndex - (currentConfig?.startIndex ?? currentPart?.startIndex ?? 0), partId: sharedDataPartId, onChange: handleQuestionDraftChange, onUnsavedChangesChange: setCurrentQuestionHasUnsavedChanges, onSave: handleQuestionSave, onCancel: props.onCancel, isEmbedded: true, externalErrors: validationErrors[currentQuestionIndex], validationRef: validationRef, suggestedAnswers: currentConfig?.suggestedAnswers || currentPart?.suggestedAnswers, hasSuggestedAnswers: currentConfig?.hasSuggestedAnswers ?? currentPart?.hasSuggestedAnswers, headerExtra: _jsx(QuestionSearchDropdown, { questionType: currentConfig?.questionType || currentPart?.questionType, onSelect: handleExistingQuestionSelect, selectedQuestionLabel: selectedQuestionInfo[currentQuestionIndex] ? `${selectedQuestionInfo[currentQuestionIndex].code ? `#${selectedQuestionInfo[currentQuestionIndex].code} - ` : ''}${selectedQuestionInfo[currentQuestionIndex].title || ''}` : undefined, disabled: !(currentConfig?.questionType || currentPart?.questionType), compact: true, searchQuestions: props.searchQuestions }) }, currentQuestionIndex), _jsx("div", { className: "mt-8", children: _jsx(QuestionBankOption, { checked: bankSetting.checked, onCheckedChange: (checked) => updateBankSetting(currentQuestionIndex, { checked }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), code: bankSetting.code, onCodeChange: (code) => updateBankSetting(currentQuestionIndex, { code }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), title: bankSetting.title, onTitleChange: (title) => updateBankSetting(currentQuestionIndex, { title }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), codeError: questionBankCodeError, error: questionBankTitleError, existingBank: existingQuestionBanks[currentQuestionIndex] || null }) })] }) }), _jsx("div", { className: "flex-shrink-0 border-t border-gray-200/80 bg-white/95 shadow-[0_-4px_20px_rgba(0,0,0,0.08)] backdrop-blur-sm", children: _jsxs("div", { className: "mx-auto flex max-w-4xl items-center justify-between px-6 py-4", children: [_jsxs(Button, { variant: "outline", onClick: () => tryNavigate(currentQuestionIndex - 1), disabled: currentQuestionIndex === 0, className: "gap-2 border-gray-300 hover:bg-gray-50", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), "C\u00E2u tr\u01B0\u1EDBc"] }), _jsxs("div", { className: "flex items-center gap-4", children: [currentQuestionHasUnsavedChanges ? _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-amber-50 px-3 py-1.5 ring-1 ring-amber-200", children: [_jsx("span", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsx("span", { className: "text-xs font-medium text-amber-700", children: "Ch\u01B0a l\u01B0u" })] }) : questionsState[currentQuestionIndex]?.isCompleted ? _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-green-50 px-3 py-1.5 ring-1 ring-green-200", children: [_jsx(CheckCircle, { className: "h-3.5 w-3.5 text-green-500" }), _jsx("span", { className: "text-xs font-medium text-green-700", children: "\u0110\u00E3 l\u01B0u" })] }) : null, _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2", children: [_jsxs("span", { className: "text-sm font-bold text-gray-900", children: ["C\u00E2u ", currentQuestionIndex + 1] }), _jsx("span", { className: "text-sm text-gray-400", children: "/" }), _jsx("span", { className: "text-sm text-gray-500", children: template.totalQuestions })] }), _jsx(Button, { onClick: () => void handleQuestionSave(getQuestionData(currentQuestionIndex)), disabled: isSavingQuestion || !currentQuestionHasUnsavedChanges, className: "gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-md hover:shadow-lg transition-all", children: isSavingQuestion ? _jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "\u0110ang l\u01B0u..."] }) : _jsxs(_Fragment, { children: [_jsx(Save, { className: "h-4 w-4" }), "L\u01B0u c\u00E2u h\u1ECFi"] }) })] }), _jsxs(Button, { variant: "outline", onClick: () => tryNavigate(currentQuestionIndex + 1), disabled: currentQuestionIndex >= template.totalQuestions - 1 || !questionsState[currentQuestionIndex]?.isCompleted, className: "gap-2 border-gray-300 hover:bg-gray-50", children: ["C\u00E2u ti\u1EBFp theo", _jsx(ChevronRight, { className: "h-4 w-4" })] })] }) })] }), _jsx("div", { className: "w-80 overflow-y-auto border-l border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm", children: _jsx(ExamQuestionGrid, { template: template, currentQuestionIndex: currentQuestionIndex, completedQuestions: completedQuestions, onQuestionChange: tryNavigate }) })] }), _jsx(CompletionDialog, { open: showCompletionDialog, onOpenChange: setShowCompletionDialog, completedCount: completedQuestions.size, totalQuestions: template.totalQuestions, onConfirm: handleConfirmSaveExam }), _jsx(UnsavedChangesDialog, { open: showUnsavedDialog, onOpenChange: setShowUnsavedDialog, onConfirm: confirmNavigation, onCancel: () => setShowUnsavedDialog(false), questionNumber: currentQuestionIndex + 1 })] }));
+}
+function buildQuestionForSave(questionData, freshData, existing, questionType, currentPart, currentQuestionIndex, examDifficulty) {
+    return { ...existing, ...questionData, ...(freshData ? { answer: freshData } : {}), type: questionData?.type ?? existing?.type ?? questionType, id: existing?.id ?? questionData?.id, partId: currentPart.id, questionNumber: currentQuestionIndex + 1, difficulty: (questionData?.difficulty ?? examDifficulty ?? existing?.difficulty), skill: currentPart.skill, isCompleted: true };
+}
+function normalizeSavedQuestion(saved, fallback) {
+    if (saved && 'question' in saved)
+        return { ...fallback, ...saved.question, isCompleted: true };
+    return { ...fallback, ...(saved ?? {}), isCompleted: true };
+}
+function updateQuestionBankAfterSave(saved, index, setExisting) {
+    const bank = saved && 'questionBank' in saved ? saved.questionBank : saved?.questionBank;
+    if (bank?.id)
+        setExisting((prev) => ({ ...prev, [index]: bank }));
+}
+function updateBankSetting(index, patch, setSettings, setUnsaved, examId) {
+    setSettings((prev) => {
+        const previous = prev[index] ?? { checked: false, code: '', title: '' };
+        return { ...prev, [index]: { ...previous, ...patch } };
+    });
+    setUnsaved(true);
+    setQuestionStatus(examId, index + 1, QuestionStatus.UNSAVED);
+}
+function validateQuestionBank(setting, existingBank, setCodeError, setTitleError) {
+    if (!setting.checked || existingBank?.id)
+        return true;
+    const codeError = setting.code.trim() ? undefined : 'Vui lòng nhập mã câu hỏi cho ngân hàng';
+    const titleError = setting.title.trim() ? undefined : 'Vui lòng nhập tiêu đề câu hỏi cho ngân hàng';
+    setCodeError(codeError);
+    setTitleError(titleError);
+    return !codeError && !titleError;
+}
+function hydrateSharedHintLetters(index, question, template, setSharedHintLetters) {
+    if (question.type !== 'LOOK_PICTURE_FILL_WORD_HINT' || !question.partId)
+        return;
+    const answer = question.answer;
+    const groupNumber = question.questionGroup?.groupNumber;
+    if (!answer?.hintLetters?.length || !groupNumber)
+        return;
+    const part = getPartByQuestionIndex(template, index);
+    const config = part ? getEffectiveQuestionConfig(part, index) : undefined;
+    const sectionName = getConfigSectionName(config);
+    const partId = sectionName ? `${question.partId}_${sectionName}` : question.partId;
+    setSharedHintLetters(partId, groupNumber, answer.hintLetters);
+}
+function getConfigSectionName(config) {
+    return config && 'sectionName' in config ? config.sectionName : undefined;
+}
+function getConfigSectionId(config) {
+    return config && 'sectionId' in config ? config.sectionId : undefined;
+}

package/dist/components/exams/ExamPartTabs.js

@@ -1 +1,138 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CheckCircle2 as r,ChevronRight as a,Circle as s,Layers as n,Lock as l,Play as i}from"lucide-react";import{cn as o}from"../../shared/lib/utils";export function ExamPartTabs({template:d,currentPartId:c,completedQuestions:m,onPartChange:g}){const h=e=>{let t=0;for(let r=e.startIndex;r<=e.endIndex;r++)m.has(r)&&t++;const r=e.endIndex-e.startIndex+1;return{completed:t,total:r,percentage:r>0?Math.round(t/r*100):0}},b=e=>{const t=h(e);return 0===t.completed?"not-started":t.completed===t.total?"completed":"in-progress"},x=e=>{if(0===e)return!0;for(let t=0;t<e;t++){const e=d.parts[t];if("completed"!==b(e))return!1}return!0},p=(t,a,n)=>n?"completed"===t?e(r,{className:o("h-4 w-4",a?"text-white":"text-green-500")}):"in-progress"===t?e(i,{className:o("h-4 w-4",a?"text-white":"text-amber-500")}):e(s,{className:o("h-4 w-4",a?"text-white/70":"text-gray-400")}):e(l,{className:"h-4 w-4 text-gray-400"}),u=(r,s,n,i,d,c)=>t("button",{onClick:()=>c&&g(r.id),disabled:!c,className:o("group relative w-full rounded-xl border-2 p-4 text-left transition-all duration-200","focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none",{"border-transparent bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-200/50":d&&c,"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 hover:border-green-300 hover:shadow-md":!d&&"completed"===i&&c,"border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 hover:border-amber-300 hover:shadow-md":!d&&"in-progress"===i&&c,"border-gray-200 bg-white hover:border-gray-300 hover:shadow-md":!d&&"not-started"===i&&c,"cursor-not-allowed border-gray-100 bg-gray-50/50 opacity-60":!c}),children:[d&&e("div",{className:"absolute -left-[2px] top-1/2 h-8 w-1 -translate-y-1/2 rounded-full bg-white shadow-sm"}),t("div",{className:"flex items-start gap-3",children:[e("div",{className:o("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg transition-colors",d?"bg-white/20":"completed"===i?"bg-green-100":"in-progress"===i?"bg-amber-100":"bg-gray-100"),children:p(i,d,c)}),t("div",{className:"flex-1 min-w-0",children:[t("div",{className:"flex items-center justify-between gap-2",children:[e("span",{className:o("text-sm font-semibold truncate",d?"text-white":"completed"===i?"text-green-800":"in-progress"===i?"text-amber-800":"text-gray-800"),children:r.name}),t("span",{className:o("flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-bold",d?"bg-white/20 text-white":"completed"===i?"bg-green-100 text-green-700":"in-progress"===i?"bg-amber-100 text-amber-700":"bg-gray-100 text-gray-600"),children:[n.completed,"/",n.total]})]}),r.description&&e("p",{className:o("mt-1 text-xs leading-relaxed",d?"text-blue-100":"text-gray-500"),children:r.description}),t("div",{className:"mt-2",children:[e("div",{className:o("h-1.5 overflow-hidden rounded-full",d?"bg-white/20":"bg-gray-200"),children:e("div",{className:o("h-full rounded-full transition-all duration-500 ease-out",d?"bg-white":"completed"===i?"bg-gradient-to-r from-green-400 to-emerald-500":"in-progress"===i?"bg-gradient-to-r from-amber-400 to-orange-500":"bg-gray-300"),style:{width:`${n.percentage}%`}})}),t("div",{className:o("mt-1 flex items-center justify-between text-xs",d?"text-blue-100":"text-gray-500"),children:[t("span",{children:[r.questionCount," câu hỏi"]}),t("span",{className:"font-medium",children:[n.percentage,"%"]})]})]}),r.isGroup&&r.groups&&r.groups.length>0&&t("div",{className:o("mt-2 rounded-lg p-2 text-xs",d?"bg-white/10":"bg-gray-100/80"),children:[t("div",{className:o("mb-1 font-medium",d?"text-blue-100":"text-gray-600"),children:[r.groups.length," nhóm câu hỏi:"]}),e("div",{className:"space-y-0.5",children:r.groups.map((r,s)=>t("div",{className:o("flex items-center justify-between",d?"text-blue-100":"text-gray-500"),children:[t("span",{className:"flex items-center gap-1",children:[e(a,{className:"h-3 w-3"}),"Nhóm ",r.number]}),t("span",{className:"font-medium",children:[r.questionCount," câu"]})]},s))})]}),r.sections&&r.sections.length>0&&t("div",{className:o("mt-2 rounded-lg p-2 text-xs",d?"bg-white/10":"bg-gray-100/80"),children:[t("div",{className:o("mb-1 font-medium",d?"text-blue-100":"text-gray-600"),children:[r.sections.length," phần nhỏ:"]}),e("div",{className:"space-y-1",children:r.sections.map((r,s)=>{let n=0;for(let e=r.startIndex;e<=r.endIndex;e++)m.has(e)&&n++;const l=r.endIndex-r.startIndex+1;return t("div",{className:o("flex items-center justify-between",d?"text-blue-100":"text-gray-500"),children:[t("span",{className:"flex items-center gap-1 truncate flex-1 mr-2",children:[e(a,{className:"h-3 w-3 flex-shrink-0"}),e("span",{className:"truncate",children:r.name})]}),t("span",{className:"font-medium flex-shrink-0",children:[n,"/",l]})]},s)})})]}),!c&&t("div",{className:"mt-2 flex items-center gap-1 text-xs text-gray-400",children:[e(l,{className:"h-3 w-3"}),e("span",{children:"Hoàn thành phần trước để mở khóa"})]})]})]})]},r.id);return t("div",{className:"space-y-4",children:[t("div",{className:"flex items-center gap-2 px-1",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm",children:e(n,{className:"h-4 w-4 text-white"})}),t("div",{children:[e("h3",{className:"text-sm font-bold text-gray-900",children:"Các phần thi"}),t("p",{className:"text-xs text-gray-500",children:[d.parts.length," phần"]})]})]}),e("div",{className:"space-y-4",children:(()=>{const r=[];d.parts.forEach((e,t)=>{const a=e.category||"",s=r[r.length-1];s&&s.groupKey===a?s.parts.push({part:e,originalIndex:t}):r.push({groupKey:a,parts:[{part:e,originalIndex:t}]})});const a={LISTENING:"🎧 LISTENING",READING_AND_WRITING:"📝 READING AND WRITING",READING:"📖 READING",WRITING:"✍️ WRITING",SPEAKING:"🗣️ SPEAKING"},s={LISTENING:{bg:"bg-gradient-to-r from-pink-100 via-rose-100 to-pink-50",border:"border-pink-300",text:"text-pink-900",connector:"bg-pink-300"},READING_AND_WRITING:{bg:"bg-gradient-to-r from-teal-100 via-cyan-100 to-teal-50",border:"border-teal-300",text:"text-teal-900",connector:"bg-teal-300"},READING:{bg:"bg-gradient-to-r from-amber-100 via-yellow-100 to-amber-50",border:"border-amber-300",text:"text-amber-900",connector:"bg-amber-300"},WRITING:{bg:"bg-gradient-to-r from-indigo-100 via-blue-100 to-indigo-50",border:"border-indigo-300",text:"text-indigo-900",connector:"bg-indigo-300"},SPEAKING:{bg:"bg-gradient-to-r from-violet-100 via-purple-100 to-violet-50",border:"border-violet-300",text:"text-violet-900",connector:"bg-violet-300"}};return r.length<=1&&!d.parts.some(e=>e.category)?d.parts.map((e,t)=>{const r=h(e),a=b(e),s=c===e.id,n=x(t);return u(e,0,r,a,s,n)}):r.map((r,n)=>{const l=s[r.groupKey]||{bg:"bg-gray-50",border:"border-gray-200",text:"text-gray-800",connector:"bg-gray-300"},i=a[r.groupKey]||r.groupKey;return t("div",{className:"space-y-2",children:[e("div",{className:o("rounded-lg border-2 px-3 py-2 text-center",l.bg,l.border),children:e("span",{className:o("text-xs font-bold tracking-wide uppercase",l.text),children:i})}),e("div",{className:"relative ml-3 pl-5",children:e("div",{className:"space-y-3",children:r.parts.map(({part:a,originalIndex:s},n)=>{const i=h(a),d=b(a),m=c===a.id,g=x(s),p=0===n,N=n===r.parts.length-1;return t("div",{className:"relative",children:[!p&&e("div",{className:o("absolute -left-5 top-0 h-1/2 w-[2px]",l.connector)}),!N&&e("div",{className:o("absolute -left-5 top-1/2 w-[2px]",l.connector),style:{height:"calc(50% + 12px)"}}),p&&e("div",{className:o("absolute -left-5 -top-2 h-[calc(50%+8px)] w-[2px]",l.connector)}),e("div",{className:o("absolute -left-5 top-1/2 -translate-y-1/2 h-[2px] w-5",l.connector)}),u(a,0,i,d,m,g)]},a.id)})})})]},`group-${n}`)})})()}),t("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-slate-100 p-4 shadow-sm",children:[e("h4",{className:"mb-3 text-xs font-bold uppercase tracking-wide text-gray-500",children:"Tổng quan"}),t("div",{className:"space-y-2",children:[t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-2 w-2 rounded-full bg-blue-500"}),e("span",{className:"text-sm text-gray-600",children:"Tổng câu hỏi"})]}),e("span",{className:"text-sm font-bold text-gray-900",children:d.totalQuestions})]}),t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-2 w-2 rounded-full bg-green-500"}),e("span",{className:"text-sm text-gray-600",children:"Đã hoàn thành"})]}),e("span",{className:"text-sm font-bold text-green-600",children:m.size})]}),t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-2 w-2 rounded-full bg-amber-500"}),e("span",{className:"text-sm text-gray-600",children:"Còn lại"})]}),e("span",{className:"text-sm font-bold text-amber-600",children:d.totalQuestions-m.size})]})]}),t("div",{className:"mt-3 pt-3 border-t border-gray-200",children:[t("div",{className:"flex items-center justify-between mb-1",children:[e("span",{className:"text-xs text-gray-500",children:"Tiến độ tổng"}),t("span",{className:"text-xs font-bold text-blue-600",children:[Math.round(m.size/d.totalQuestions*100),"%"]})]}),e("div",{className:"h-2 overflow-hidden rounded-full bg-gray-200",children:e("div",{className:"h-full rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 transition-all duration-500",style:{width:m.size/d.totalQuestions*100+"%"}})})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle2, ChevronRight, Circle, Layers, Lock, Play } from 'lucide-react';
+import { cn } from '../../shared/lib/utils';
+export function ExamPartTabs({ template, currentPartId, completedQuestions, onPartChange, }) {
+    const getPartProgress = (part) => {
+        let completed = 0;
+        for (let i = part.startIndex; i <= part.endIndex; i++) {
+            if (completedQuestions.has(i)) {
+                completed++;
+            }
+        }
+        // Total questions: use endIndex - startIndex + 1 for parts with sections
+        // (since questionCount might be sum of section questionCounts which could differ from index range)
+        const total = part.endIndex - part.startIndex + 1;
+        return {
+            completed,
+            total,
+            percentage: total > 0 ? Math.round((completed / total) * 100) : 0,
+        };
+    };
+    const getPartStatus = (part) => {
+        const progress = getPartProgress(part);
+        if (progress.completed === 0)
+            return 'not-started';
+        if (progress.completed === progress.total)
+            return 'completed';
+        return 'in-progress';
+    };
+    // Check if a part is unlocked (all previous parts must be completed)
+    const isPartUnlocked = (partIndex) => {
+        if (partIndex === 0)
+            return true; // First part is always unlocked
+        // Check all previous parts are completed
+        for (let i = 0; i < partIndex; i++) {
+            const prevPart = template.parts[i];
+            const prevStatus = getPartStatus(prevPart);
+            if (prevStatus !== 'completed') {
+                return false;
+            }
+        }
+        return true;
+    };
+    // Get status icon based on part status
+    const getStatusIcon = (status, isActive, isUnlocked) => {
+        if (!isUnlocked) {
+            return _jsx(Lock, { className: "h-4 w-4 text-gray-400" });
+        }
+        if (status === 'completed') {
+            return _jsx(CheckCircle2, { className: cn("h-4 w-4", isActive ? "text-white" : "text-green-500") });
+        }
+        if (status === 'in-progress') {
+            return _jsx(Play, { className: cn("h-4 w-4", isActive ? "text-white" : "text-amber-500") });
+        }
+        return _jsx(Circle, { className: cn("h-4 w-4", isActive ? "text-white/70" : "text-gray-400") });
+    };
+    // Render a single part button
+    const renderPartButton = (part, index, progress, status, isActive, isUnlocked) => (_jsxs("button", { onClick: () => isUnlocked && onPartChange(part.id), disabled: !isUnlocked, className: cn('group relative w-full rounded-xl border-2 p-4 text-left transition-all duration-200', 'focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none', {
+            'border-transparent bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-200/50': isActive && isUnlocked,
+            'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 hover:border-green-300 hover:shadow-md': !isActive && status === 'completed' && isUnlocked,
+            'border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 hover:border-amber-300 hover:shadow-md': !isActive && status === 'in-progress' && isUnlocked,
+            'border-gray-200 bg-white hover:border-gray-300 hover:shadow-md': !isActive && status === 'not-started' && isUnlocked,
+            'cursor-not-allowed border-gray-100 bg-gray-50/50 opacity-60': !isUnlocked,
+        }), children: [isActive && (_jsx("div", { className: "absolute -left-[2px] top-1/2 h-8 w-1 -translate-y-1/2 rounded-full bg-white shadow-sm" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: cn("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg transition-colors", isActive ? "bg-white/20" :
+                            status === 'completed' ? "bg-green-100" :
+                                status === 'in-progress' ? "bg-amber-100" :
+                                    "bg-gray-100"), children: getStatusIcon(status, isActive, isUnlocked) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: cn('text-sm font-semibold truncate', isActive ? 'text-white' :
+                                            status === 'completed' ? 'text-green-800' :
+                                                status === 'in-progress' ? 'text-amber-800' :
+                                                    'text-gray-800'), children: part.name }), _jsxs("span", { className: cn('flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-bold', isActive ? 'bg-white/20 text-white' :
+                                            status === 'completed' ? 'bg-green-100 text-green-700' :
+                                                status === 'in-progress' ? 'bg-amber-100 text-amber-700' :
+                                                    'bg-gray-100 text-gray-600'), children: [progress.completed, "/", progress.total] })] }), part.description && (_jsx("p", { className: cn('mt-1 text-xs leading-relaxed', isActive ? 'text-blue-100' : 'text-gray-500'), children: part.description })), _jsxs("div", { className: "mt-2", children: [_jsx("div", { className: cn('h-1.5 overflow-hidden rounded-full', isActive ? 'bg-white/20' : 'bg-gray-200'), children: _jsx("div", { className: cn('h-full rounded-full transition-all duration-500 ease-out', isActive ? 'bg-white' :
+                                                status === 'completed' ? 'bg-gradient-to-r from-green-400 to-emerald-500' :
+                                                    status === 'in-progress' ? 'bg-gradient-to-r from-amber-400 to-orange-500' :
+                                                        'bg-gray-300'), style: { width: `${progress.percentage}%` } }) }), _jsxs("div", { className: cn('mt-1 flex items-center justify-between text-xs', isActive ? 'text-blue-100' : 'text-gray-500'), children: [_jsxs("span", { children: [part.questionCount, " c\u00E2u h\u1ECFi"] }), _jsxs("span", { className: "font-medium", children: [progress.percentage, "%"] })] })] }), part.isGroup && part.groups && part.groups.length > 0 && (_jsxs("div", { className: cn('mt-2 rounded-lg p-2 text-xs', isActive ? 'bg-white/10' : 'bg-gray-100/80'), children: [_jsxs("div", { className: cn('mb-1 font-medium', isActive ? 'text-blue-100' : 'text-gray-600'), children: [part.groups.length, " nh\u00F3m c\u00E2u h\u1ECFi:"] }), _jsx("div", { className: "space-y-0.5", children: part.groups.map((group, groupIndex) => (_jsxs("div", { className: cn('flex items-center justify-between', isActive ? 'text-blue-100' : 'text-gray-500'), children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(ChevronRight, { className: "h-3 w-3" }), "Nh\u00F3m ", group.number] }), _jsxs("span", { className: "font-medium", children: [group.questionCount, " c\u00E2u"] })] }, groupIndex))) })] })), part.sections && part.sections.length > 0 && (_jsxs("div", { className: cn('mt-2 rounded-lg p-2 text-xs', isActive ? 'bg-white/10' : 'bg-gray-100/80'), children: [_jsxs("div", { className: cn('mb-1 font-medium', isActive ? 'text-blue-100' : 'text-gray-600'), children: [part.sections.length, " ph\u1EA7n nh\u1ECF:"] }), _jsx("div", { className: "space-y-1", children: part.sections.map((section, sectionIndex) => {
+                                            // Calculate section completion
+                                            let sectionCompleted = 0;
+                                            for (let i = section.startIndex; i <= section.endIndex; i++) {
+                                                if (completedQuestions.has(i)) {
+                                                    sectionCompleted++;
+                                                }
+                                            }
+                                            const sectionTotal = section.endIndex - section.startIndex + 1;
+                                            return (_jsxs("div", { className: cn('flex items-center justify-between', isActive ? 'text-blue-100' : 'text-gray-500'), children: [_jsxs("span", { className: "flex items-center gap-1 truncate flex-1 mr-2", children: [_jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" }), _jsx("span", { className: "truncate", children: section.name })] }), _jsxs("span", { className: "font-medium flex-shrink-0", children: [sectionCompleted, "/", sectionTotal] })] }, sectionIndex));
+                                        }) })] })), !isUnlocked && (_jsxs("div", { className: "mt-2 flex items-center gap-1 text-xs text-gray-400", children: [_jsx(Lock, { className: "h-3 w-3" }), _jsx("span", { children: "Ho\u00E0n th\u00E0nh ph\u1EA7n tr\u01B0\u1EDBc \u0111\u1EC3 m\u1EDF kh\u00F3a" })] }))] })] })] }, part.id));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm", children: _jsx(Layers, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold text-gray-900", children: "C\u00E1c ph\u1EA7n thi" }), _jsxs("p", { className: "text-xs text-gray-500", children: [template.parts.length, " ph\u1EA7n"] })] })] }), _jsx("div", { className: "space-y-4", children: (() => {
+                    // Group consecutive parts by `category` field
+                    const groups = [];
+                    template.parts.forEach((part, index) => {
+                        const groupKey = part.category || '';
+                        const lastGroup = groups[groups.length - 1];
+                        if (lastGroup && lastGroup.groupKey === groupKey) {
+                            lastGroup.parts.push({ part, originalIndex: index });
+                        }
+                        else {
+                            groups.push({ groupKey, parts: [{ part, originalIndex: index }] });
+                        }
+                    });
+                    const groupLabels = {
+                        LISTENING: '🎧 LISTENING',
+                        READING_AND_WRITING: '📝 READING AND WRITING',
+                        READING: '📖 READING',
+                        WRITING: '✍️ WRITING',
+                        SPEAKING: '🗣️ SPEAKING',
+                    };
+                    const groupStyles = {
+                        LISTENING: { bg: 'bg-gradient-to-r from-pink-100 via-rose-100 to-pink-50', border: 'border-pink-300', text: 'text-pink-900', connector: 'bg-pink-300' },
+                        READING_AND_WRITING: { bg: 'bg-gradient-to-r from-teal-100 via-cyan-100 to-teal-50', border: 'border-teal-300', text: 'text-teal-900', connector: 'bg-teal-300' },
+                        READING: { bg: 'bg-gradient-to-r from-amber-100 via-yellow-100 to-amber-50', border: 'border-amber-300', text: 'text-amber-900', connector: 'bg-amber-300' },
+                        WRITING: { bg: 'bg-gradient-to-r from-indigo-100 via-blue-100 to-indigo-50', border: 'border-indigo-300', text: 'text-indigo-900', connector: 'bg-indigo-300' },
+                        SPEAKING: { bg: 'bg-gradient-to-r from-violet-100 via-purple-100 to-violet-50', border: 'border-violet-300', text: 'text-violet-900', connector: 'bg-violet-300' },
+                    };
+                    // If only one group or no group field at all, render flat list
+                    if (groups.length <= 1 && !template.parts.some(p => p.category)) {
+                        return template.parts.map((part, index) => {
+                            const progress = getPartProgress(part);
+                            const status = getPartStatus(part);
+                            const isActive = currentPartId === part.id;
+                            const isUnlocked = isPartUnlocked(index);
+                            return renderPartButton(part, index, progress, status, isActive, isUnlocked);
+                        });
+                    }
+                    return groups.map((group, groupIdx) => {
+                        const style = groupStyles[group.groupKey] || { bg: 'bg-gray-50', border: 'border-gray-200', text: 'text-gray-800', connector: 'bg-gray-300' };
+                        const label = groupLabels[group.groupKey] || group.groupKey;
+                        return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: cn("rounded-lg border-2 px-3 py-2 text-center", style.bg, style.border), children: _jsx("span", { className: cn("text-xs font-bold tracking-wide uppercase", style.text), children: label }) }), _jsx("div", { className: "relative ml-3 pl-5", children: _jsx("div", { className: "space-y-3", children: group.parts.map(({ part, originalIndex }, partIdx) => {
+                                            const progress = getPartProgress(part);
+                                            const status = getPartStatus(part);
+                                            const isActive = currentPartId === part.id;
+                                            const isUnlocked = isPartUnlocked(originalIndex);
+                                            const isFirst = partIdx === 0;
+                                            const isLast = partIdx === group.parts.length - 1;
+                                            return (_jsxs("div", { className: "relative", children: [!isFirst && (_jsx("div", { className: cn("absolute -left-5 top-0 h-1/2 w-[2px]", style.connector) })), !isLast && (_jsx("div", { className: cn("absolute -left-5 top-1/2 w-[2px]", style.connector), style: { height: 'calc(50% + 12px)' } })), isFirst && (_jsx("div", { className: cn("absolute -left-5 -top-2 h-[calc(50%+8px)] w-[2px]", style.connector) })), _jsx("div", { className: cn("absolute -left-5 top-1/2 -translate-y-1/2 h-[2px] w-5", style.connector) }), renderPartButton(part, originalIndex, progress, status, isActive, isUnlocked)] }, part.id));
+                                        }) }) })] }, `group-${groupIdx}`));
+                    });
+                })() }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-slate-100 p-4 shadow-sm", children: [_jsx("h4", { className: "mb-3 text-xs font-bold uppercase tracking-wide text-gray-500", children: "T\u1ED5ng quan" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-blue-500" }), _jsx("span", { className: "text-sm text-gray-600", children: "T\u1ED5ng c\u00E2u h\u1ECFi" })] }), _jsx("span", { className: "text-sm font-bold text-gray-900", children: template.totalQuestions })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" }), _jsx("span", { className: "text-sm text-gray-600", children: "\u0110\u00E3 ho\u00E0n th\u00E0nh" })] }), _jsx("span", { className: "text-sm font-bold text-green-600", children: completedQuestions.size })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-amber-500" }), _jsx("span", { className: "text-sm text-gray-600", children: "C\u00F2n l\u1EA1i" })] }), _jsx("span", { className: "text-sm font-bold text-amber-600", children: template.totalQuestions - completedQuestions.size })] })] }), _jsxs("div", { className: "mt-3 pt-3 border-t border-gray-200", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: "text-xs text-gray-500", children: "Ti\u1EBFn \u0111\u1ED9 t\u1ED5ng" }), _jsxs("span", { className: "text-xs font-bold text-blue-600", children: [Math.round((completedQuestions.size / template.totalQuestions) * 100), "%"] })] }), _jsx("div", { className: "h-2 overflow-hidden rounded-full bg-gray-200", children: _jsx("div", { className: "h-full rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 transition-all duration-500", style: { width: `${(completedQuestions.size / template.totalQuestions) * 100}%` } }) })] })] })] }));
+}

package/dist/components/exams/ExamPreviewDialog.d.ts

@@ -10,11 +10,10 @@ export interface ExamPreviewDialogProps {
     title?: string;
 }
 /**
- * Read-only popup that previews an exam (đề) by id: the layout mirrors the
- * exam taking experience (left sidebar with exam info + progress + question
- * navigation, right pane showing one question at a time) but creates NO attempt
- * — exam + questions are fetched through {@link ExamQuestionsSdkApi}, so it
- * matches exactly how the đề looks. Each question renders via {@link QuestionViewer}
- * in review mode (correct answers highlighted).
+ * Read-only popup that previews an exam by id.
+ *
+ * UI mirrors the host app: one Part per screen (all questions of that part),
+ * Next/Prev navigates between parts. No attempt is created — data comes from
+ * {@link ExamQuestionsSdkApi}. Questions render via QuestionViewer in review mode.
  */
-export declare function ExamPreviewDialog({ open, onOpenChange, examId, api, title }: ExamPreviewDialogProps): import("react").JSX.Element;
+export declare function ExamPreviewDialog({ open, onOpenChange, examId, api, title, }: ExamPreviewDialogProps): import("react").JSX.Element;