@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/exams/ExamPreviewDialog.js

@@ -1 +1,121 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as a,useMemo as n,useRef as i,useState as s}from"react";import{ArrowLeft as r,ArrowRight as l,Eye as d,Loader2 as m}from"lucide-react";import{Badge as c}from"../../components/ui/badge";import{Button as o}from"../../components/ui/button";import{Card as p,CardContent as x,CardHeader as u,CardTitle as h}from"../../components/ui/card";import{Dialog as g,DialogContent as f,DialogHeader as N,DialogTitle as v}from"../../components/ui/dialog";import{Progress as b}from"../../components/ui/progress";import{useT as y}from"../../shared/lib/i18n";import{QuestionViewer as w}from"../questions/viewer/QuestionViewer";function j(e){return e&&"object"==typeof e&&"data"in e?e.data:e}function I(e){switch(e?.toUpperCase()){case"EASY":return"bg-green-100 text-green-800";case"MEDIUM":return"bg-orange-100 text-orange-800";case"HARD":return"bg-red-100 text-red-800";default:return"bg-gray-100 text-gray-800"}}export function ExamPreviewDialog({open:q,onOpenChange:S,examId:C,api:Q,title:k}){const E=y(),[P,z]=s(null),[A,M]=s([]),[$,D]=s(0),[T,O]=s("all"),[R,U]=s(!1),[H,V]=s(!1),[Y,B]=s(null),[F,G]=s(0),J=i(null);a(()=>{if(!q||!C)return;let e=!1;return V(!0),B(null),D(0),O("all"),(async()=>{try{const t=j(await Q.getExam(C)),a=Q.getQuestions?j(await Q.getQuestions(C)):[];if(e)return;const n=[...a].sort((e,t)=>(e.questionNumber??0)-(t.questionNumber??0));z(t),M(n)}catch{e||B(E("admin.exams.preview.loadError"))}finally{e||V(!1)}})(),()=>{e=!0}},[q,C,F,Q,E]),a(()=>{q||(z(null),M([]),D(0),O("all"),U(!1),B(null))},[q]);const K=n(()=>{const e=(P?.template?.parts??[]).map(e=>({id:e.id,name:e.name||e.title})),t=new Set(e.map(e=>e.id));for(const a of A){const n=a.partId??"";n&&!t.has(n)&&(t.add(n),e.push({id:n}))}return e},[P,A]),L=e=>{const t=K.findIndex(t=>t.id===(e??""));return t>=0?t+1:1},W=n(()=>{const e=new Map;for(const t of A){const a=t.partId??"";if(!e.has(a)){const t=K.findIndex(e=>e.id===a),n=t>=0?t+1:1;e.set(a,{partId:a,partNo:n,partName:K[t]?.name||`Part ${n}`,questions:[]})}e.get(a).questions.push(t)}return Array.from(e.values()).sort((e,t)=>e.partNo-t.partNo)},[A,K]),X=P?.name??k??"",Z=P?.template?.totalTime??P?.duration??0,_=function(e){return e.reduce((e,t)=>e+(Number(t.points)||0),0)}(A),ee=A[$],te=A.length>0?($+1)/A.length*100:0,ae=e=>{D(e),J.current?.scrollTo({top:0,behavior:"smooth"})},ne="all"===T?A:A.filter(e=>L(e.partId)===T);return e(g,{open:q,onOpenChange:S,children:t(f,{className:"max-h-[95vh] max-w-7xl overflow-y-auto",children:[e(N,{children:t(v,{className:"flex items-center gap-2",children:[e(d,{className:"h-5 w-5 text-blue-600"}),E("admin.exams.preview.title",{name:X})]})}),t("div",{className:"flex h-[80vh] flex-col gap-4 sm:flex-row",children:[e("div",{className:"w-full overflow-y-auto border-b border-gray-200 sm:w-80 sm:border-b-0 sm:border-r",children:t("div",{className:"space-y-4 p-4",children:[t(p,{children:[e(u,{className:"pb-3",children:e(h,{className:"text-base",children:E("admin.exams.preview.examInfo")})}),t(x,{className:"space-y-3",children:[t("div",{className:"flex items-center justify-between",children:[e("span",{className:"text-sm text-gray-600",children:E("admin.exams.preview.duration")}),e("span",{className:"text-sm font-medium",children:E("admin.exams.view.minutes",{count:String(Z)})})]}),t("div",{className:"flex items-center justify-between",children:[e("span",{className:"text-sm text-gray-600",children:E("admin.exams.preview.questionCount")}),e("span",{className:"text-sm font-medium",children:H?"...":E("admin.exams.preview.questions",{count:String(A.length)})})]}),t("div",{className:"flex items-center justify-between",children:[e("span",{className:"text-sm text-gray-600",children:E("admin.exams.preview.totalPoints")}),e("span",{className:"text-sm font-medium",children:E("admin.exams.preview.points",{count:String(_)})})]})]})]}),!H&&A.length>0&&e(p,{children:e(x,{className:"p-4",children:t("div",{className:"space-y-2",children:[t("div",{className:"flex justify-between text-sm",children:[e("span",{children:E("admin.exams.preview.progress")}),t("span",{className:"font-medium",children:[$+1,"/",A.length]})]}),e(b,{value:te,className:"h-2"})]})})}),H?e("div",{className:"flex items-center justify-center py-4",children:t("div",{className:"flex items-center gap-2 text-gray-500",children:[e(m,{className:"h-4 w-4 animate-spin"}),e("span",{className:"text-sm",children:E("admin.exams.preview.loading")})]})}):A.length>0&&t("div",{className:"space-y-3",children:[e("h4",{className:"text-sm font-medium text-gray-700",children:E("admin.exams.preview.questionNavigation")}),t("div",{className:"flex flex-wrap gap-2",children:[e(o,{variant:"all"===T?"default":"outline",size:"sm",onClick:()=>O("all"),className:"h-8 px-3 text-xs font-medium",children:E("admin.exams.preview.all")}),W.map(e=>t(o,{variant:T===e.partNo?"default":"outline",size:"sm",onClick:()=>{O(e.partNo);const t=e.questions[0];if(t){const e=A.findIndex(e=>e.id===t.id);-1!==e&&ae(e)}},className:"h-8 px-3 text-xs font-medium",children:["P",e.partNo]},e.partId||`part-${e.partNo}`))]}),e("div",{className:"rounded bg-gray-50 p-2 text-xs",children:e("span",{className:"font-medium",children:"all"===T?E("admin.exams.preview.allQuestions",{count:String(A.length)}):E("admin.exams.preview.partQuestions",{part:String(T),count:String(W.find(e=>e.partNo===T)?.questions.length??0)})})}),e("div",{className:"rounded-lg bg-gray-50 p-3",children:e("div",{className:"grid max-h-64 grid-cols-6 gap-2 overflow-y-auto pr-2",children:ne.map(t=>{const a=A.findIndex(e=>e.id===t.id);return e(o,{variant:"ghost",size:"sm",onClick:()=>ae(a),className:"h-8 w-full p-0 text-xs font-medium transition-all duration-200 "+(a===$?"border-2 border-blue-500 bg-blue-500 text-white hover:bg-blue-600":"border border-gray-300 bg-white hover:bg-gray-100"),children:t.questionNumber},t.id)})})})]}),!H&&A.length>0&&t("div",{children:[t("div",{className:"mb-2 flex items-center justify-between",children:[e("h4",{className:"text-sm font-medium text-gray-700",children:X}),e(o,{variant:"ghost",size:"sm",onClick:()=>U(e=>!e),className:"h-6 px-2 text-xs text-gray-600 hover:text-gray-900",children:E(R?"admin.exams.preview.collapse":"admin.exams.preview.detail")})]}),e("div",{className:"rounded-lg bg-gray-50 p-3",children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[t("span",{className:"text-sm font-medium text-gray-900",children:["Total: ",E("admin.exams.preview.questions",{count:String(A.length)})]}),e("div",{className:"mt-1 flex gap-3",children:t("span",{className:"text-xs text-gray-600",children:[W.length," part(s)"]})})]}),e("div",{className:"text-xs text-gray-500",children:E("admin.exams.view.minutes",{count:String(Z)})})]})}),R&&e("div",{className:"mt-3 space-y-2",children:W.map(a=>{const n=L(ee?.partId)===a.partNo;return e("div",{className:"cursor-pointer rounded-lg border-2 p-3 transition-all duration-200 "+(n?"border-blue-400 bg-blue-50 shadow-md":"border-gray-200 bg-white hover:border-gray-300"),onClick:()=>{const e=a.questions[0];if(e){const t=A.findIndex(t=>t.id===e.id);-1!==t&&(ae(t),O(a.partNo))}},children:t("div",{className:"flex items-center justify-between",children:[e("span",{className:"text-sm font-medium "+(n?"text-blue-900":"text-gray-900"),children:a.partName}),e(c,{variant:"secondary",className:"text-xs "+(n?"bg-blue-200 text-blue-800":"bg-gray-100 text-gray-700"),children:E("admin.exams.preview.questions",{count:String(a.questions.length)})})]})},a.partId||`part-${a.partNo}`)})})]})]})}),e("div",{className:"flex-1 overflow-y-auto",children:t("div",{className:"flex h-full flex-col",children:[t("div",{className:"flex items-center justify-between border-b pb-4",children:[t("div",{children:[e("h3",{className:"text-lg font-semibold",children:H?e("span",{className:"text-gray-400",children:E("admin.exams.preview.loading")}):A.length>0?E("admin.exams.preview.questionIndex",{index:String($+1),total:String(A.length)}):E("admin.exams.preview.noQuestions")}),ee&&e("div",{className:"mt-1 inline-flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5",children:e("span",{className:"text-sm font-semibold text-blue-700",children:(e=>{const t=K.findIndex(t=>t.id===(e??""));return K[t]?.name||`Part ${t>=0?t+1:1}`})(ee.partId)})})]}),ee&&t("div",{className:"flex items-center gap-2",children:[e(c,{variant:"outline",children:E("admin.exams.preview.points",{count:String(Number(ee.points)||1)})}),e(c,{className:I(ee.difficulty),children:ee.difficulty??"N/A"})]})]}),e("div",{ref:J,className:"flex-1 overflow-y-auto py-4",children:H?t("div",{className:"flex flex-col items-center justify-center space-y-4 py-12",children:[e(m,{className:"h-8 w-8 animate-spin text-blue-500"}),e("p",{className:"text-gray-600",children:E("admin.exams.preview.loadingQuestions")})]}):Y?e("div",{className:"flex flex-col items-center justify-center space-y-4 py-12",children:t("div",{className:"rounded-lg border border-red-200 bg-red-50 p-6 text-center",children:[e("p",{className:"font-medium text-red-800",children:Y}),e(o,{variant:"outline",onClick:()=>G(e=>e+1),className:"mt-4",children:E("admin.exams.preview.retry")})]})}):0===A.length?e("div",{className:"flex flex-col items-center justify-center space-y-4 py-12",children:e("div",{className:"rounded-lg border border-yellow-200 bg-yellow-50 p-6 text-center",children:e("p",{className:"font-medium text-yellow-800",children:E("admin.exams.preview.examNoQuestions")})})}):ee?e(w,{question:ee,isReviewMode:!0}):null}),!H&&A.length>0&&t("div",{className:"mt-auto flex items-center justify-between border-t border-gray-200 bg-gray-50 px-4 py-3",children:[t(o,{variant:"outline",onClick:()=>{$>0&&ae($-1)},disabled:0===$,className:"flex h-9 items-center gap-2 px-3 text-sm",children:[e(r,{className:"h-4 w-4"}),e("span",{className:"hidden sm:inline",children:E("admin.exams.preview.prevQuestion")}),e("span",{className:"sm:hidden",children:E("admin.exams.preview.prev")})]}),t("div",{className:"text-sm text-gray-600",children:[$+1," / ",A.length]}),t(o,{variant:"outline",onClick:()=>{$<A.length-1&&ae($+1)},disabled:$===A.length-1,className:"flex h-9 items-center gap-2 px-3 text-sm",children:[e("span",{className:"hidden sm:inline",children:E("admin.exams.preview.nextQuestion")}),e("span",{className:"sm:hidden",children:E("admin.exams.preview.next")}),e(l,{className:"h-4 w-4"})]})]})]})})]}),e("div",{className:"border-t pt-4",children:t("div",{className:"flex items-center justify-between",children:[e("div",{className:"text-sm text-gray-600",children:E("admin.exams.preview.footerNote")}),e(o,{variant:"outline",onClick:()=>S(!1),className:"border-gray-300",children:E("admin.exams.preview.close")})]})})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Eye } from 'lucide-react';
+import { Button } from '../../components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/ui/dialog';
+import { useT } from '../../shared/lib/i18n';
+import { ExamPreviewPartContent } from './ExamPreviewPartContent';
+import { ExamPreviewSidebar } from './ExamPreviewSidebar';
+import { getQuestionNumber, getQuestionPoints, groupQuestionsByPart, sumQuestionPoints, unwrapApiData, } from './exam-preview.types';
+/**
+ * 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 function ExamPreviewDialog({ open, onOpenChange, examId, api, title, }) {
+    const t = useT();
+    const [exam, setExam] = useState(null);
+    const [questions, setQuestions] = useState([]);
+    const [currentPartIndex, setCurrentPartIndex] = useState(0);
+    const [showPartsDetail, setShowPartsDetail] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [reloadKey, setReloadKey] = useState(0);
+    const contentRef = useRef(null);
+    // Fetch exam + questions whenever the dialog opens for an exam.
+    useEffect(() => {
+        if (!open || !examId) {
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        setCurrentPartIndex(0);
+        void (async () => {
+            try {
+                const examData = unwrapApiData((await api.getExam(examId)));
+                const rawQuestions = api.getQuestions
+                    ? unwrapApiData((await api.getQuestions(examId)))
+                    : [];
+                if (cancelled) {
+                    return;
+                }
+                const sorted = [...rawQuestions].sort((a, b) => getQuestionNumber(a) - getQuestionNumber(b));
+                setExam(examData);
+                setQuestions(sorted);
+            }
+            catch {
+                if (!cancelled) {
+                    setError(t('admin.exams.preview.loadError'));
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [open, examId, reloadKey, api, t]);
+    // Reset everything when the dialog closes.
+    useEffect(() => {
+        if (!open) {
+            setExam(null);
+            setQuestions([]);
+            setCurrentPartIndex(0);
+            setShowPartsDetail(false);
+            setError(null);
+        }
+    }, [open]);
+    const templateParts = (exam?.template?.parts ?? []);
+    const questionsByPart = useMemo(() => groupQuestionsByPart(questions, templateParts), [questions, templateParts]);
+    // Keep current part index in range when parts change
+    useEffect(() => {
+        if (questionsByPart.length === 0) {
+            if (currentPartIndex !== 0) {
+                setCurrentPartIndex(0);
+            }
+            return;
+        }
+        if (currentPartIndex > questionsByPart.length - 1) {
+            setCurrentPartIndex(questionsByPart.length - 1);
+        }
+    }, [currentPartIndex, questionsByPart.length]);
+    const heading = exam?.name ?? title ?? '';
+    // Duration lives on the exam (duration) or template (totalTime).
+    const duration = exam?.duration ?? exam?.template?.totalTime ?? 0;
+    const totalPoints = sumQuestionPoints(questions);
+    const currentPart = questionsByPart[currentPartIndex] ?? null;
+    const currentPartQuestions = currentPart?.questions ?? [];
+    const totalParts = questionsByPart.length;
+    const progress = totalParts > 0 ? ((currentPartIndex + 1) / totalParts) * 100 : 0;
+    const partDisplayName = currentPart?.partName ?? '';
+    const partTotalPoints = currentPartQuestions.reduce((sum, question) => sum + getQuestionPoints(question), 0);
+    const scrollToTop = () => {
+        contentRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    const goToPart = (index) => {
+        if (index < 0 || index >= totalParts)
+            return;
+        setCurrentPartIndex(index);
+        scrollToTop();
+    };
+    const goToPreviousPart = () => {
+        if (currentPartIndex > 0) {
+            setCurrentPartIndex(currentPartIndex - 1);
+            scrollToTop();
+        }
+    };
+    const goToNextPart = () => {
+        if (currentPartIndex < totalParts - 1) {
+            setCurrentPartIndex(currentPartIndex + 1);
+            scrollToTop();
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[95vh] max-w-7xl overflow-y-auto", children: [_jsx(DialogHeader, { children: _jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(Eye, { className: "h-5 w-5 text-blue-600" }), t('admin.exams.preview.title', { name: heading })] }) }), _jsxs("div", { className: "flex h-[80vh] flex-col gap-4 sm:flex-row", children: [_jsx(ExamPreviewSidebar, { examName: heading, duration: duration, totalPoints: totalPoints, questions: questions, questionsByPart: questionsByPart, currentPart: currentPart, currentPartIndex: currentPartIndex, totalParts: totalParts, progress: progress, loading: loading, showPartsDetail: showPartsDetail, onTogglePartsDetail: () => setShowPartsDetail((value) => !value), onGoToPart: goToPart }), _jsx(ExamPreviewPartContent, { loading: loading, error: error, questions: questions, currentPart: currentPart, currentPartQuestions: currentPartQuestions, currentPartIndex: currentPartIndex, totalParts: totalParts, partDisplayName: partDisplayName, partTotalPoints: partTotalPoints, contentRef: contentRef, onRetry: () => setReloadKey((key) => key + 1), onPreviousPart: goToPreviousPart, onNextPart: goToNextPart })] }), _jsx("div", { className: "border-t pt-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-sm text-gray-600", children: t('admin.exams.preview.footerNote') }), _jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), className: "border-gray-300", children: t('admin.exams.preview.close') })] }) })] }) }));
+}

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

@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+import { type PreviewQuestion, type QuestionsByPart } from './exam-preview.types';
+export interface ExamPreviewPartContentProps {
+    loading: boolean;
+    error: string | null;
+    questions: PreviewQuestion[];
+    currentPart: QuestionsByPart | null;
+    currentPartQuestions: PreviewQuestion[];
+    currentPartIndex: number;
+    totalParts: number;
+    partDisplayName: string;
+    partTotalPoints: number;
+    contentRef: RefObject<HTMLDivElement | null>;
+    onRetry: () => void;
+    onPreviousPart: () => void;
+    onNextPart: () => void;
+}
+export declare function ExamPreviewPartContent({ loading, error, questions, currentPart, currentPartQuestions, currentPartIndex, totalParts, partDisplayName, partTotalPoints, contentRef, onRetry, onPreviousPart, onNextPart, }: ExamPreviewPartContentProps): import("react").JSX.Element;

package/dist/components/exams/ExamPreviewPartContent.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, Loader2 } from 'lucide-react';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { QuestionViewer } from '../questions/viewer/QuestionViewer';
+import { useT } from '../../shared/lib/i18n';
+import { difficultyBadgeClass, getQuestionDifficulty, getQuestionNumber, getQuestionPoints, } from './exam-preview.types';
+export function ExamPreviewPartContent({ loading, error, questions, currentPart, currentPartQuestions, currentPartIndex, totalParts, partDisplayName, partTotalPoints, contentRef, onRetry, onPreviousPart, onNextPart, }) {
+    const t = useT();
+    return (_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b pb-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold", children: loading ? (_jsx("span", { className: "text-gray-400", children: t('admin.exams.preview.loading') })) : totalParts > 0 ? (t('admin.exams.preview.partIndex', {
+                                        index: String(currentPartIndex + 1),
+                                        total: String(totalParts),
+                                    })) : (t('admin.exams.preview.noQuestions')) }), currentPart && (_jsxs("div", { className: "mt-1 inline-flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5", children: [_jsx("span", { className: "text-sm font-semibold text-blue-700", children: partDisplayName }), _jsx("span", { className: "text-xs text-blue-600", children: t('admin.exams.preview.questions', {
+                                                count: String(currentPartQuestions.length),
+                                            }) })] }))] }), currentPart && (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Badge, { variant: "outline", children: t('admin.exams.preview.points', {
+                                    count: String(partTotalPoints),
+                                }) }) }))] }), _jsx("div", { ref: contentRef, className: "flex-1 overflow-y-auto py-4", children: loading ? (_jsxs("div", { className: "flex flex-col items-center justify-center space-y-4 py-12", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-blue-500" }), _jsx("p", { className: "text-gray-600", children: t('admin.exams.preview.loadingQuestions') })] })) : error ? (_jsx("div", { className: "flex flex-col items-center justify-center space-y-4 py-12", children: _jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-6 text-center", children: [_jsx("p", { className: "font-medium text-red-800", children: error }), _jsx(Button, { variant: "outline", onClick: onRetry, className: "mt-4", children: t('admin.exams.preview.retry') })] }) })) : questions.length === 0 ? (_jsx("div", { className: "flex flex-col items-center justify-center space-y-4 py-12", children: _jsx("div", { className: "rounded-lg border border-yellow-200 bg-yellow-50 p-6 text-center", children: _jsx("p", { className: "font-medium text-yellow-800", children: t('admin.exams.preview.examNoQuestions') }) }) })) : currentPartQuestions.length > 0 ? (_jsx("div", { className: "space-y-6", children: currentPartQuestions.map((question) => {
+                            const qNumber = getQuestionNumber(question);
+                            const difficulty = getQuestionDifficulty(question);
+                            return (_jsxs("div", { id: `preview-q-${question.id}`, className: "rounded-xl border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2 border-b border-gray-100 pb-3", children: [_jsx("span", { className: "inline-flex h-7 min-w-7 items-center justify-center rounded-md bg-blue-100 px-2 text-xs font-bold text-blue-700", children: t('admin.exams.preview.questionLabel', {
+                                                    number: String(qNumber),
+                                                }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: t('admin.exams.preview.points', {
+                                                            count: String(getQuestionPoints(question)),
+                                                        }) }), _jsx(Badge, { className: difficultyBadgeClass(difficulty), children: difficulty })] })] }), _jsx(QuestionViewer, { question: question, isReviewMode: true })] }, question.id));
+                        }) })) : null }), !loading && totalParts > 0 && (_jsxs("div", { className: "mt-auto flex items-center justify-between border-t border-gray-200 bg-gray-50 px-4 py-3", children: [_jsxs(Button, { variant: "outline", onClick: onPreviousPart, disabled: currentPartIndex === 0, className: "flex h-9 items-center gap-2 px-3 text-sm", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('admin.exams.preview.prevPart') }), _jsx("span", { className: "sm:hidden", children: t('admin.exams.preview.prev') })] }), _jsxs("div", { className: "text-sm text-gray-600", children: [currentPartIndex + 1, " / ", totalParts] }), _jsxs(Button, { variant: "outline", onClick: onNextPart, disabled: currentPartIndex === totalParts - 1, className: "flex h-9 items-center gap-2 px-3 text-sm", children: [_jsx("span", { className: "hidden sm:inline", children: t('admin.exams.preview.nextPart') }), _jsx("span", { className: "sm:hidden", children: t('admin.exams.preview.next') }), _jsx(ArrowRight, { className: "h-4 w-4" })] })] }))] }) }));
+}

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

@@ -0,0 +1,17 @@
+import { type PreviewQuestion, type QuestionsByPart } from './exam-preview.types';
+export interface ExamPreviewSidebarProps {
+    examName: string;
+    duration: number;
+    totalPoints: number;
+    questions: PreviewQuestion[];
+    questionsByPart: QuestionsByPart[];
+    currentPart: QuestionsByPart | null;
+    currentPartIndex: number;
+    totalParts: number;
+    progress: number;
+    loading: boolean;
+    showPartsDetail: boolean;
+    onTogglePartsDetail: () => void;
+    onGoToPart: (index: number) => void;
+}
+export declare function ExamPreviewSidebar({ examName, duration, totalPoints, questions, questionsByPart, currentPart, currentPartIndex, totalParts, progress, loading, showPartsDetail, onTogglePartsDetail, onGoToPart, }: ExamPreviewSidebarProps): import("react").JSX.Element;

package/dist/components/exams/ExamPreviewSidebar.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card';
+import { Progress } from '../../components/ui/progress';
+import { Loader2 } from 'lucide-react';
+import { useT } from '../../shared/lib/i18n';
+import { getQuestionNumber, } from './exam-preview.types';
+export function ExamPreviewSidebar({ examName, duration, totalPoints, questions, questionsByPart, currentPart, currentPartIndex, totalParts, progress, loading, showPartsDetail, onTogglePartsDetail, onGoToPart, }) {
+    const t = useT();
+    return (_jsx("div", { className: "w-full overflow-y-auto border-b border-gray-200 sm:w-80 sm:border-b-0 sm:border-r", children: _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-base", children: t('admin.exams.preview.examInfo') }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.duration') }), _jsx("span", { className: "text-sm font-medium", children: t('admin.exams.view.minutes', { count: String(duration) }) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.questionCount') }), _jsx("span", { className: "text-sm font-medium", children: loading
+                                                ? '...'
+                                                : t('admin.exams.preview.questions', { count: String(questions.length) }) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.totalPoints') }), _jsx("span", { className: "text-sm font-medium", children: t('admin.exams.preview.points', { count: String(totalPoints) }) })] })] })] }), !loading && totalParts > 0 && (_jsx(Card, { children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { children: t('admin.exams.preview.progress') }), _jsxs("span", { className: "font-medium", children: [currentPartIndex + 1, "/", totalParts] })] }), _jsx(Progress, { value: progress, className: "h-2" })] }) }) })), loading ? (_jsx("div", { className: "flex items-center justify-center py-4", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-sm", children: t('admin.exams.preview.loading') })] }) })) : (totalParts > 0 && (_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium text-gray-700", children: t('admin.exams.preview.questionNavigation') }), _jsx("div", { className: "flex flex-wrap gap-2", children: questionsByPart.map((part, index) => {
+                                const isCurrent = index === currentPartIndex;
+                                return (_jsxs(Button, { variant: isCurrent ? 'default' : 'outline', size: "sm", onClick: () => onGoToPart(index), className: "h-8 px-3 text-xs font-medium", children: ["P", part.partNo] }, part.partId || `part-${part.partNo}`));
+                            }) }), currentPart && (_jsx("div", { className: "rounded bg-gray-50 p-2 text-xs", children: _jsx("span", { className: "font-medium", children: t('admin.exams.preview.partQuestions', {
+                                    part: String(currentPart.partNo),
+                                    count: String(currentPart.questions.length),
+                                }) }) })), currentPart && (_jsx("div", { className: "rounded-lg bg-gray-50 p-3", children: _jsx("div", { className: "grid max-h-64 grid-cols-6 gap-2 overflow-y-auto pr-2", children: currentPart.questions.map((question) => (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                        const el = document.getElementById(`preview-q-${question.id}`);
+                                        el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                                    }, className: "h-8 w-full border border-gray-300 bg-white p-0 text-xs font-medium transition-all duration-200 hover:bg-gray-100", children: getQuestionNumber(question) }, question.id))) }) }))] }))), !loading && questions.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("h4", { className: "text-sm font-medium text-gray-700", children: examName }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onTogglePartsDetail, className: "h-6 px-2 text-xs text-gray-600 hover:text-gray-900", children: showPartsDetail
+                                        ? t('admin.exams.preview.collapse')
+                                        : t('admin.exams.preview.detail') })] }), _jsx("div", { className: "rounded-lg bg-gray-50 p-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-sm font-medium text-gray-900", children: ["Total:", ' ', t('admin.exams.preview.questions', {
+                                                        count: String(questions.length),
+                                                    })] }), _jsx("div", { className: "mt-1 flex gap-3", children: _jsxs("span", { className: "text-xs text-gray-600", children: [questionsByPart.length, " part(s)"] }) })] }), _jsx("div", { className: "text-xs text-gray-500", children: t('admin.exams.view.minutes', { count: String(duration) }) })] }) }), showPartsDetail && (_jsx("div", { className: "mt-3 space-y-2", children: questionsByPart.map((part, index) => {
+                                const isCurrentPart = index === currentPartIndex;
+                                return (_jsx("div", { className: `cursor-pointer rounded-lg border-2 p-3 transition-all duration-200 ${isCurrentPart
+                                        ? 'border-blue-400 bg-blue-50 shadow-md'
+                                        : 'border-gray-200 bg-white hover:border-gray-300'}`, onClick: () => onGoToPart(index), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: `text-sm font-medium ${isCurrentPart ? 'text-blue-900' : 'text-gray-900'}`, children: part.partName }), _jsx(Badge, { variant: "secondary", className: `text-xs ${isCurrentPart
+                                                    ? 'bg-blue-200 text-blue-800'
+                                                    : 'bg-gray-100 text-gray-700'}`, children: t('admin.exams.preview.questions', {
+                                                    count: String(part.questions.length),
+                                                }) })] }) }, part.partId || `part-detail-${part.partNo}`));
+                            }) }))] }))] }) }));
+}

package/dist/components/exams/ExamQuestionGrid.js

@@ -1 +1,37 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CheckCircle2 as r,Circle as a,ListOrdered as s,Zap as n}from"lucide-react";import{cn as i}from"../../shared/lib/utils";import{getPartByQuestionIndex as o,getSectionForQuestionIndex as d}from"./exam-template.utils";export function ExamQuestionGrid({template:l,currentQuestionIndex:c,completedQuestions:m,onQuestionChange:h}){const g=e=>{const t=(e=>e===c?"current":m.has(e)?"completed":"not-started")(e);return i("h-8 w-8 rounded-lg text-xs font-semibold transition-all duration-200","hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-1","border-2 cursor-pointer shadow-sm",{"bg-gradient-to-br from-blue-500 to-indigo-600 text-white border-transparent shadow-lg shadow-blue-300/50 ring-2 ring-blue-400 ring-offset-1":"current"===t,"bg-gradient-to-br from-green-400 to-emerald-500 text-white border-transparent hover:shadow-md hover:shadow-green-200":"completed"===t,"bg-white text-gray-500 border-gray-200 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700":"not-started"===t})},u=Array.from({length:l.totalQuestions},(e,t)=>t);return t("div",{className:"space-y-5",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-blue-600 shadow-sm",children:e(s,{className:"h-4 w-4 text-white"})}),t("div",{children:[e("h3",{className:"text-sm font-bold text-gray-900",children:"Danh sách câu hỏi"}),e("p",{className:"text-xs text-gray-500",children:"Click để chuyển câu"})]})]}),e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-b from-gray-50 to-white p-4 shadow-inner",children:e("div",{className:"grid max-h-[320px] grid-cols-6 gap-3 overflow-y-auto px-3 py-2 justify-center",children:u.map(t=>{const r=t+1,a=o(l,t),s=a?d(a,t):void 0,n=[`Câu ${r}`,a?.name||"Unknown Part"];return s&&n.push(s.name),e("button",{onClick:()=>h(t),className:g(t),title:n.join(" - "),children:r},t)})})}),t("div",{className:"rounded-xl border border-gray-100 bg-white p-3 shadow-sm",children:[e("div",{className:"mb-2 text-xs font-bold uppercase tracking-wide text-gray-400",children:"Chú thích"}),t("div",{className:"grid grid-cols-1 gap-2",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-md",children:e(n,{className:"h-3.5 w-3.5 text-white"})}),e("span",{className:"text-xs font-medium text-gray-700",children:"Câu đang làm"})]}),t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-green-400 to-emerald-500 shadow-sm",children:e(r,{className:"h-3.5 w-3.5 text-white"})}),e("span",{className:"text-xs font-medium text-gray-700",children:"Đã hoàn thành"})]}),t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg border-2 border-gray-200 bg-white",children:e(a,{className:"h-3.5 w-3.5 text-gray-400"})}),e("span",{className:"text-xs font-medium text-gray-700",children:"Chưa tạo"})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle2, Circle, ListOrdered, Zap } from 'lucide-react';
+import { cn } from '../../shared/lib/utils';
+import { getPartByQuestionIndex, getSectionForQuestionIndex } from './exam-template.utils';
+export function ExamQuestionGrid({ template, currentQuestionIndex, completedQuestions, onQuestionChange, }) {
+    const getQuestionStatus = (questionIndex) => {
+        if (questionIndex === currentQuestionIndex)
+            return 'current';
+        if (completedQuestions.has(questionIndex))
+            return 'completed';
+        return 'not-started';
+    };
+    const getQuestionButtonClass = (questionIndex) => {
+        const status = getQuestionStatus(questionIndex);
+        return cn('h-8 w-8 rounded-lg text-xs font-semibold transition-all duration-200', 'hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-1', 'border-2 cursor-pointer shadow-sm', {
+            // Current question - gradient blue with glow
+            'bg-gradient-to-br from-blue-500 to-indigo-600 text-white border-transparent shadow-lg shadow-blue-300/50 ring-2 ring-blue-400 ring-offset-1': status === 'current',
+            // Completed questions - gradient green
+            'bg-gradient-to-br from-green-400 to-emerald-500 text-white border-transparent hover:shadow-md hover:shadow-green-200': status === 'completed',
+            // Not started questions - subtle gray
+            'bg-white text-gray-500 border-gray-200 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700': status === 'not-started',
+        });
+    };
+    // Generate array of question numbers (1-200)
+    const questionNumbers = Array.from({ length: template.totalQuestions }, (_, i) => i);
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-blue-600 shadow-sm", children: _jsx(ListOrdered, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold text-gray-900", children: "Danh s\u00E1ch c\u00E2u h\u1ECFi" }), _jsx("p", { className: "text-xs text-gray-500", children: "Click \u0111\u1EC3 chuy\u1EC3n c\u00E2u" })] })] }), _jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-b from-gray-50 to-white p-4 shadow-inner", children: _jsx("div", { className: "grid max-h-[320px] grid-cols-6 gap-3 overflow-y-auto px-3 py-2 justify-center", children: questionNumbers.map((questionIndex) => {
+                        const questionNumber = questionIndex + 1;
+                        const part = getPartByQuestionIndex(template, questionIndex);
+                        const section = part ? getSectionForQuestionIndex(part, questionIndex) : undefined;
+                        const tooltipParts = [`Câu ${questionNumber}`, part?.name || 'Unknown Part'];
+                        if (section) {
+                            tooltipParts.push(section.name);
+                        }
+                        return (_jsx("button", { onClick: () => onQuestionChange(questionIndex), className: getQuestionButtonClass(questionIndex), title: tooltipParts.join(' - '), children: questionNumber }, questionIndex));
+                    }) }) }), _jsxs("div", { className: "rounded-xl border border-gray-100 bg-white p-3 shadow-sm", children: [_jsx("div", { className: "mb-2 text-xs font-bold uppercase tracking-wide text-gray-400", children: "Ch\u00FA th\u00EDch" }), _jsxs("div", { className: "grid grid-cols-1 gap-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-md", children: _jsx(Zap, { className: "h-3.5 w-3.5 text-white" }) }), _jsx("span", { className: "text-xs font-medium text-gray-700", children: "C\u00E2u \u0111ang l\u00E0m" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-green-400 to-emerald-500 shadow-sm", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-white" }) }), _jsx("span", { className: "text-xs font-medium text-gray-700", children: "\u0110\u00E3 ho\u00E0n th\u00E0nh" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg border-2 border-gray-200 bg-white", children: _jsx(Circle, { className: "h-3.5 w-3.5 text-gray-400" }) }), _jsx("span", { className: "text-xs font-medium text-gray-700", children: "Ch\u01B0a t\u1EA1o" })] })] })] })] }));
+}

package/dist/components/exams/ExamQuestionsPageContainer.js

@@ -1 +1,112 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Suspense as a,useEffect as i,useMemo as n,useRef as s,useState as r}from"react";import{ArrowLeft as o,Hash as l,Loader2 as m,Save as c}from"lucide-react";import{Badge as u}from"../../components/ui/badge";import{Button as d}from"../../components/ui/button";import{useToast as f}from"../../shared/lib/hooks/useToast";import{useT as h}from"../../shared/lib/i18n";import{transformApiQuestionsToFrontend as p}from"../../shared/lib/utils/question-reverse-transform";import{ExamCreator as x}from"./ExamCreator";import{initializeQuestionStatusesFromAPI as b}from"./exam-question-status";function g({api:a,examId:m,listPath:g="/manage/exams",onNavigate:w,texts:q}){const Q=h(),{error:k,success:E}=f(),L=s(null),[j,C]=r(null),[I,P]=r([]),[T,A]=r({}),[z,B]=r(!0),D=e=>{w?w(e):"undefined"!=typeof window&&(window.location.href=e)};i(()=>{let e=!1;return B(!0),Promise.all([a.getExam(m),a.getQuestions?.(m)]).then(([t,a])=>{if(e)return;const i=y(t),n=function(e){return 0===e.length?[]:e.some(e=>"question_type"in e||"questionType"in e)?p(e):e}((void 0===(s=a)?void 0:y(s))??[]);var s;C(i),P(n);const r=function(e){return e?.totalQuestions??0}(i.template);r>0&&b(m,n.map(e=>e.questionNumber??0),r)}).catch(e=>k({message:Q("admin.exams.questions.error"),description:e instanceof Error?e.message:Q("admin.exams.questions.loadError")})).finally(()=>!e&&B(!1)),()=>{e=!0}},[a,m,k,Q]);const S=n(()=>j?.template?function(e){return"name"in e?e:{...e,name:e.title,description:e.description||e.subTitle||"",level:e.examLevel,parts:e.parts.map(e=>({...e,name:e.name||e.title||""}))}}(j.template):null,[j?.template]);return z?e(v,{label:q?.questionsLoadingLabel??Q("admin.exams.questions.loading")}):j&&S?t("div",{className:"-m-4 flex h-[calc(100vh-4rem)] flex-col overflow-hidden md:-m-6 md:-mb-10",children:[t("div",{className:"flex flex-shrink-0 items-center gap-4 border-b border-gray-200/60 bg-white px-4 py-3",children:[e(d,{variant:"ghost",size:"icon",onClick:()=>D(g),className:"h-8 w-8",children:e(o,{className:"h-4 w-4"})}),e("div",{className:"min-w-0 flex-1",children:t("h1",{className:"truncate text-lg font-semibold tracking-tight text-gray-900",children:[j.name,j.code&&t(u,{variant:"outline",className:"ml-2 align-middle border-blue-200 bg-blue-50 text-blue-700 text-xs font-normal",children:[e(l,{className:"mr-0.5 h-3 w-3"}),j.code]})]})}),t(d,{onClick:()=>L.current?.(),className:"gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-sm",size:"sm",children:[e(c,{className:"h-4 w-4"}),q?.saveQuestionsLabel??"Lưu đề thi"]})]}),e(x,{template:S,examId:m,examDifficulty:j.difficulty,examLevel:j.examLevel??void 0,subjectId:j.subject?.id,initialQuestions:I,onSaveQuestion:a.saveQuestion,onSave:async e=>{S&&(await(a.saveExam?.({examId:m,questions:e.questions,template:S,examData:e})),D(g))},onCancel:()=>D(g),onPartAudioChange:a.updatePartAudio?async(e,t)=>{if(!S)return;const i=T[e];A(a=>({...a,[e]:t}));try{await(a.updatePartAudio?.({examId:m,partId:e,audioUrl:t,template:S})),E({message:Q("admin.exams.partEditor.audioFile"),description:"Đã lưu file âm thanh cho part."})}catch(t){A(t=>{const a={...t};return void 0===i?delete a[e]:a[e]=i,a}),k({message:Q("admin.exams.questions.error"),description:t instanceof Error?t.message:void 0})}}:void 0,partAudioOverrides:T,searchQuestions:a.searchQuestions,saveExamRef:L})]}):e(N,{onBack:()=>D(g),label:q?.questionsNoTemplateLabel??Q("admin.exams.questions.noTemplate")})}export function ExamQuestionsPageContainer(t){return e(a,{fallback:e(v,{label:"Loading..."}),children:e(g,{...t})})}function v({label:a}){return e("div",{className:"flex h-screen items-center justify-center",children:t("div",{className:"flex flex-col items-center gap-3",children:[e(m,{className:"h-8 w-8 animate-spin text-blue-600"}),e("p",{className:"text-sm text-gray-600",children:a})]})})}function N({label:a,onBack:i}){return e("div",{className:"flex h-screen items-center justify-center",children:t("div",{className:"text-center",children:[e("p",{className:"text-lg text-gray-900",children:a}),e(d,{onClick:i,className:"mt-4",children:"Quay lại"})]})})}function y(e){return"object"==typeof e&&null!==e&&"data"in e?e.data:e}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { ArrowLeft, Hash, Loader2, Save } from 'lucide-react';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { useToast } from '../../shared/lib/hooks/useToast';
+import { useT } from '../../shared/lib/i18n';
+import { transformApiQuestionsToFrontend } from '../../shared/lib/utils/question-reverse-transform';
+import { ExamCreator } from './ExamCreator';
+import { initializeQuestionStatusesFromAPI } from './exam-question-status';
+function ExamQuestionsContent({ api, examId, listPath = '/manage/exams', onNavigate, texts }) {
+    const t = useT();
+    const { error: errorToast, success } = useToast();
+    const saveExamRef = useRef(null);
+    const [exam, setExam] = useState(null);
+    const [questions, setQuestions] = useState([]);
+    const [partAudioOverrides, setPartAudioOverrides] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+    const navigate = (href) => {
+        if (onNavigate)
+            onNavigate(href);
+        else if (typeof window !== 'undefined')
+            window.location.href = href;
+    };
+    useEffect(() => {
+        let ignore = false;
+        setIsLoading(true);
+        Promise.all([api.getExam(examId), api.getQuestions?.(examId)])
+            .then(([examResult, questionResult]) => {
+            if (ignore)
+                return;
+            const loadedExam = unwrap(examResult);
+            const loadedQuestions = normalizeQuestions(unwrapOptional(questionResult) ?? []);
+            setExam(loadedExam);
+            setQuestions(loadedQuestions);
+            const totalQuestions = getTemplateTotalQuestions(loadedExam.template);
+            if (totalQuestions > 0) {
+                initializeQuestionStatusesFromAPI(examId, loadedQuestions.map((question) => question.questionNumber ?? 0), totalQuestions);
+            }
+        })
+            .catch((err) => errorToast({
+            message: t('admin.exams.questions.error'),
+            description: err instanceof Error ? err.message : t('admin.exams.questions.loadError'),
+        }))
+            .finally(() => !ignore && setIsLoading(false));
+        return () => { ignore = true; };
+    }, [api, examId, errorToast, t]);
+    const template = useMemo(() => exam?.template ? normalizeTemplate(exam.template) : null, [exam?.template]);
+    const handleSaveExam = async (examData) => {
+        if (!template)
+            return;
+        await api.saveExam?.({ examId, questions: examData.questions, template, examData });
+        navigate(listPath);
+    };
+    const handlePartAudioChange = async (partId, audioUrl) => {
+        if (!template)
+            return;
+        const previous = partAudioOverrides[partId];
+        setPartAudioOverrides((prev) => ({ ...prev, [partId]: audioUrl }));
+        try {
+            await api.updatePartAudio?.({ examId, partId, audioUrl, template });
+            success({ message: t('admin.exams.partEditor.audioFile'), description: 'Đã lưu file âm thanh cho part.' });
+        }
+        catch (err) {
+            setPartAudioOverrides((prev) => {
+                const next = { ...prev };
+                if (previous === undefined)
+                    delete next[partId];
+                else
+                    next[partId] = previous;
+                return next;
+            });
+            errorToast({ message: t('admin.exams.questions.error'), description: err instanceof Error ? err.message : undefined });
+        }
+    };
+    if (isLoading)
+        return _jsx(Loading, { label: texts?.questionsLoadingLabel ?? t('admin.exams.questions.loading') });
+    if (!exam || !template)
+        return _jsx(Empty, { onBack: () => navigate(listPath), label: texts?.questionsNoTemplateLabel ?? t('admin.exams.questions.noTemplate') });
+    return (_jsxs("div", { className: "-m-4 flex h-[calc(100vh-4rem)] flex-col overflow-hidden md:-m-6 md:-mb-10", children: [_jsxs("div", { className: "flex flex-shrink-0 items-center gap-4 border-b border-gray-200/60 bg-white px-4 py-3", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigate(listPath), className: "h-8 w-8", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("h1", { className: "truncate text-lg font-semibold tracking-tight text-gray-900", children: [exam.name, exam.code && _jsxs(Badge, { variant: "outline", className: "ml-2 align-middle border-blue-200 bg-blue-50 text-blue-700 text-xs font-normal", children: [_jsx(Hash, { className: "mr-0.5 h-3 w-3" }), exam.code] })] }) }), _jsxs(Button, { onClick: () => saveExamRef.current?.(), className: "gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-sm", size: "sm", children: [_jsx(Save, { className: "h-4 w-4" }), texts?.saveQuestionsLabel ?? 'Lưu đề thi'] })] }), _jsx(ExamCreator, { template: template, examId: examId, examDifficulty: exam.difficulty, examLevel: exam.examLevel ?? undefined, subjectId: exam.subject?.id, initialQuestions: questions, onSaveQuestion: api.saveQuestion, onSave: handleSaveExam, onCancel: () => navigate(listPath), onPartAudioChange: api.updatePartAudio ? handlePartAudioChange : undefined, partAudioOverrides: partAudioOverrides, searchQuestions: api.searchQuestions, saveExamRef: saveExamRef })] }));
+}
+export function ExamQuestionsPageContainer(props) {
+    return _jsx(Suspense, { fallback: _jsx(Loading, { label: "Loading..." }), children: _jsx(ExamQuestionsContent, { ...props }) });
+}
+function Loading({ label }) {
+    return _jsx("div", { className: "flex h-screen items-center justify-center", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-blue-600" }), _jsx("p", { className: "text-sm text-gray-600", children: label })] }) });
+}
+function Empty({ label, onBack }) {
+    return _jsx("div", { className: "flex h-screen items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-lg text-gray-900", children: label }), _jsx(Button, { onClick: onBack, className: "mt-4", children: "Quay l\u1EA1i" })] }) });
+}
+function unwrap(value) {
+    return typeof value === 'object' && value !== null && 'data' in value ? value.data : value;
+}
+function unwrapOptional(value) {
+    return value === undefined ? undefined : unwrap(value);
+}
+function normalizeTemplate(template) {
+    if ('name' in template)
+        return template;
+    return { ...template, name: template.title, description: template.description || template.subTitle || '', level: template.examLevel, parts: template.parts.map((part) => ({ ...part, name: part.name || part.title || '' })) };
+}
+function getTemplateTotalQuestions(template) {
+    return template?.totalQuestions ?? 0;
+}
+function normalizeQuestions(questions) {
+    if (questions.length === 0)
+        return [];
+    return questions.some((question) => 'question_type' in question || 'questionType' in question)
+        ? transformApiQuestionsToFrontend(questions)
+        : questions;
+}

package/dist/components/exams/ExamViewDialog.js

@@ -1 +1,61 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as n,DialogContent as i,DialogDescription as r,DialogFooter as s,DialogHeader as l,DialogTitle as t}from"../../components/ui/dialog";import{Button as o}from"../../components/ui/button";import{Badge as c}from"../../components/ui/badge";import{BookOpen as m,Clock as d,FileText as g,GraduationCap as b,Hash as u,Star as x,Target as h,X as N}from"lucide-react";import{useT as p}from"../../shared/lib/i18n";export const EXAM_DIFFICULTY={EASY:"EASY",MEDIUM:"MEDIUM",HARD:"HARD"};function v({exam:n}){return e("div",{className:"bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5 text-white",children:e(l,{className:"space-y-2",children:e("div",{className:"flex items-start justify-between",children:a("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-12 w-12 items-center justify-center rounded-xl bg-white/20 backdrop-blur-sm",children:e(g,{className:"h-6 w-6 text-white"})}),a("div",{children:[e(t,{className:"text-xl font-bold text-white",children:n.name}),e(r,{className:"text-blue-100 mt-1",children:a("span",{className:"inline-flex items-center gap-1.5",children:[e(u,{className:"h-3.5 w-3.5"}),n.code||n.id]})})]})]})})})})}function C({label:n,value:i,icon:r,iconContainerClassName:s,iconClassName:l,hoverClassName:t}){return e("div",{className:`rounded-xl border border-gray-200 bg-gray-50/50 p-4 transition-all ${t}`,children:a("div",{className:"flex items-center gap-3",children:[e("div",{className:`flex h-10 w-10 items-center justify-center rounded-lg ${s}`,children:e(r,{className:`h-5 w-5 ${l}`})}),a("div",{children:[e("p",{className:"text-xs font-medium text-gray-500 uppercase tracking-wide",children:n}),e("p",{className:"text-sm font-semibold text-gray-900 mt-0.5",children:i})]})]})})}function f({label:n,config:i}){const r=i.icon;return e("div",{className:"rounded-xl border border-gray-200 bg-gray-50/50 p-4 transition-all hover:border-gray-300",children:a("div",{className:"flex items-center gap-3",children:[e("div",{className:`flex h-10 w-10 items-center justify-center rounded-lg ${i.iconContainerClassName}`,children:e(r,{className:`h-5 w-5 ${i.iconClassName}`})}),a("div",{children:[e("p",{className:"text-xs font-medium text-gray-500 uppercase tracking-wide",children:n}),e(c,{className:`mt-1 ${i.badgeClassName} border`,children:i.label})]})]})})}function y({description:n,title:i}){return a("div",{className:"rounded-xl border border-gray-200 bg-gray-50/50 p-4",children:[a("h4",{className:"text-sm font-semibold text-gray-900 mb-2 flex items-center gap-2",children:[e(g,{className:"h-4 w-4 text-gray-500"}),i]}),e("p",{className:"text-sm text-gray-600 leading-relaxed",children:n})]})}function w({closeLabel:n,onClose:i}){return e(s,{className:"border-t border-gray-200 bg-gray-50/50 px-6 py-4",children:a(o,{variant:"outline",onClick:i,className:"gap-2",children:[e(N,{className:"h-4 w-4"}),n]})})}export function ExamViewDialog({open:r,onOpenChange:s,exam:l}){const t=p();if(!l)return null;const o=function(e,a){return{[EXAM_DIFFICULTY.EASY]:{label:a("admin.exams.difficulty.easy"),badgeClassName:"bg-green-50 text-green-700 border-green-200",iconContainerClassName:"bg-green-100",iconClassName:"text-green-600",icon:x},[EXAM_DIFFICULTY.MEDIUM]:{label:a("admin.exams.difficulty.medium"),badgeClassName:"bg-yellow-50 text-yellow-700 border-yellow-200",iconContainerClassName:"bg-yellow-100",iconClassName:"text-yellow-600",icon:x},[EXAM_DIFFICULTY.HARD]:{label:a("admin.exams.difficulty.hard"),badgeClassName:"bg-red-50 text-red-700 border-red-200",iconContainerClassName:"bg-red-100",iconClassName:"text-red-600",icon:x}}[e]}(l.difficulty,t);return e(n,{open:r,onOpenChange:s,children:a(i,{className:"max-w-2xl p-0 overflow-hidden",children:[e(v,{exam:l}),a("div",{className:"px-6 py-5 space-y-6",children:[a("div",{className:"grid grid-cols-2 md:grid-cols-3 gap-4",children:[e(C,{label:t("admin.exams.view.subject"),value:l.subject,icon:m,iconContainerClassName:"bg-blue-100",iconClassName:"text-blue-600",hoverClassName:"hover:border-blue-200 hover:bg-blue-50/30"}),e(C,{label:t("admin.exams.view.level"),value:l.level,icon:b,iconContainerClassName:"bg-purple-100",iconClassName:"text-purple-600",hoverClassName:"hover:border-purple-200 hover:bg-purple-50/30"}),e(C,{label:t("admin.exams.view.duration"),value:t("admin.exams.view.minutes",{count:String(l.duration)}),icon:d,iconContainerClassName:"bg-orange-100",iconClassName:"text-orange-600",hoverClassName:"hover:border-orange-200 hover:bg-orange-50/30"}),e(C,{label:t("admin.exams.view.questionCount"),value:t("admin.exams.view.questions",{count:String(l.questionCount)}),icon:g,iconContainerClassName:"bg-cyan-100",iconClassName:"text-cyan-600",hoverClassName:"hover:border-cyan-200 hover:bg-cyan-50/30"}),e(C,{label:t("admin.exams.view.totalPoints"),value:t("admin.exams.view.points",{count:String(l.totalPoints)}),icon:h,iconContainerClassName:"bg-green-100",iconClassName:"text-green-600",hoverClassName:"hover:border-green-200 hover:bg-green-50/30"}),e(f,{label:t("admin.exams.view.difficulty"),config:o})]}),l.description&&e(y,{title:t("admin.exams.view.description"),description:l.description})]}),e(w,{closeLabel:t("admin.exams.view.close"),onClose:()=>s(!1)})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../components/ui/dialog';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { BookOpen, Clock, FileText, GraduationCap, Hash, Star, Target, X, } from 'lucide-react';
+import { useT } from '../../shared/lib/i18n';
+export const EXAM_DIFFICULTY = {
+    EASY: 'EASY',
+    MEDIUM: 'MEDIUM',
+    HARD: 'HARD',
+};
+function getDifficultyConfig(difficulty, t) {
+    const configs = {
+        [EXAM_DIFFICULTY.EASY]: {
+            label: t('admin.exams.difficulty.easy'),
+            badgeClassName: 'bg-green-50 text-green-700 border-green-200',
+            iconContainerClassName: 'bg-green-100',
+            iconClassName: 'text-green-600',
+            icon: Star,
+        },
+        [EXAM_DIFFICULTY.MEDIUM]: {
+            label: t('admin.exams.difficulty.medium'),
+            badgeClassName: 'bg-yellow-50 text-yellow-700 border-yellow-200',
+            iconContainerClassName: 'bg-yellow-100',
+            iconClassName: 'text-yellow-600',
+            icon: Star,
+        },
+        [EXAM_DIFFICULTY.HARD]: {
+            label: t('admin.exams.difficulty.hard'),
+            badgeClassName: 'bg-red-50 text-red-700 border-red-200',
+            iconContainerClassName: 'bg-red-100',
+            iconClassName: 'text-red-600',
+            icon: Star,
+        },
+    };
+    return configs[difficulty];
+}
+function ExamHeader({ exam }) {
+    return (_jsx("div", { className: "bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5 text-white", children: _jsx(DialogHeader, { className: "space-y-2", children: _jsx("div", { className: "flex items-start justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-xl bg-white/20 backdrop-blur-sm", children: _jsx(FileText, { className: "h-6 w-6 text-white" }) }), _jsxs("div", { children: [_jsx(DialogTitle, { className: "text-xl font-bold text-white", children: exam.name }), _jsx(DialogDescription, { className: "text-blue-100 mt-1", children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Hash, { className: "h-3.5 w-3.5" }), exam.code || exam.id] }) })] })] }) }) }) }));
+}
+function ExamStatCard({ label, value, icon: Icon, iconContainerClassName, iconClassName, hoverClassName, }) {
+    return (_jsx("div", { className: `rounded-xl border border-gray-200 bg-gray-50/50 p-4 transition-all ${hoverClassName}`, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-lg ${iconContainerClassName}`, children: _jsx(Icon, { className: `h-5 w-5 ${iconClassName}` }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide", children: label }), _jsx("p", { className: "text-sm font-semibold text-gray-900 mt-0.5", children: value })] })] }) }));
+}
+function DifficultyStatCard({ label, config }) {
+    const DifficultyIcon = config.icon;
+    return (_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50/50 p-4 transition-all hover:border-gray-300", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-lg ${config.iconContainerClassName}`, children: _jsx(DifficultyIcon, { className: `h-5 w-5 ${config.iconClassName}` }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide", children: label }), _jsx(Badge, { className: `mt-1 ${config.badgeClassName} border`, children: config.label })] })] }) }));
+}
+function ExamDescription({ description, title }) {
+    return (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50/50 p-4", children: [_jsxs("h4", { className: "text-sm font-semibold text-gray-900 mb-2 flex items-center gap-2", children: [_jsx(FileText, { className: "h-4 w-4 text-gray-500" }), title] }), _jsx("p", { className: "text-sm text-gray-600 leading-relaxed", children: description })] }));
+}
+function ExamDialogFooter({ closeLabel, onClose }) {
+    return (_jsx(DialogFooter, { className: "border-t border-gray-200 bg-gray-50/50 px-6 py-4", children: _jsxs(Button, { variant: "outline", onClick: onClose, className: "gap-2", children: [_jsx(X, { className: "h-4 w-4" }), closeLabel] }) }));
+}
+export function ExamViewDialog({ open, onOpenChange, exam }) {
+    const t = useT();
+    if (!exam)
+        return null;
+    const difficultyConfig = getDifficultyConfig(exam.difficulty, t);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-2xl p-0 overflow-hidden", children: [_jsx(ExamHeader, { exam: exam }), _jsxs("div", { className: "px-6 py-5 space-y-6", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: [_jsx(ExamStatCard, { label: t('admin.exams.view.subject'), value: exam.subject, icon: BookOpen, iconContainerClassName: "bg-blue-100", iconClassName: "text-blue-600", hoverClassName: "hover:border-blue-200 hover:bg-blue-50/30" }), _jsx(ExamStatCard, { label: t('admin.exams.view.level'), value: exam.level, icon: GraduationCap, iconContainerClassName: "bg-purple-100", iconClassName: "text-purple-600", hoverClassName: "hover:border-purple-200 hover:bg-purple-50/30" }), _jsx(ExamStatCard, { label: t('admin.exams.view.duration'), value: t('admin.exams.view.minutes', { count: String(exam.duration) }), icon: Clock, iconContainerClassName: "bg-orange-100", iconClassName: "text-orange-600", hoverClassName: "hover:border-orange-200 hover:bg-orange-50/30" }), _jsx(ExamStatCard, { label: t('admin.exams.view.questionCount'), value: t('admin.exams.view.questions', { count: String(exam.questionCount) }), icon: FileText, iconContainerClassName: "bg-cyan-100", iconClassName: "text-cyan-600", hoverClassName: "hover:border-cyan-200 hover:bg-cyan-50/30" }), _jsx(ExamStatCard, { label: t('admin.exams.view.totalPoints'), value: t('admin.exams.view.points', { count: String(exam.totalPoints) }), icon: Target, iconContainerClassName: "bg-green-100", iconClassName: "text-green-600", hoverClassName: "hover:border-green-200 hover:bg-green-50/30" }), _jsx(DifficultyStatCard, { label: t('admin.exams.view.difficulty'), config: difficultyConfig })] }), exam.description && _jsx(ExamDescription, { title: t('admin.exams.view.description'), description: exam.description })] }), _jsx(ExamDialogFooter, { closeLabel: t('admin.exams.view.close'), onClose: () => onOpenChange(false) })] }) }));
+}

package/dist/components/exams/PartAudioUploader.js

@@ -1 +1,9 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Headphones as t,Music as o}from"lucide-react";import{Card as i,CardContent as r}from"../../components/ui/card";import{FileUpload as l}from"../../components/ui/file-upload";import{Label as s}from"../../components/ui/label";export function PartAudioUploader({partId:d,partName:n,audioUrl:c,onAudioChange:m,examId:h,isReadOnly:p=!1}){return a(i,{className:"mb-4 overflow-hidden border-0 bg-white shadow-lg shadow-sky-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-sky-500 via-cyan-500 to-teal-500"}),e(r,{className:"px-4 py-4",children:a("div",{className:"flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4",children:[a("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 to-cyan-600 shadow-md",children:e(t,{className:"h-5 w-5 text-white"})}),a("div",{children:[a(s,{className:"text-sm font-bold text-gray-900",children:["File âm thanh cho ",n]}),e("p",{className:"text-xs text-gray-500",children:"Audio dùng chung cho tất cả câu hỏi trong phần này."})]})]}),e("div",{className:"flex-1",children:e(l,{id:`part-audio-${d}`,label:"",accept:"audio/*",value:c||"",onChange:e=>!p&&m(e),placeholder:"Chọn file audio cho part này...",icon:e(o,{className:"h-4 w-4"}),maxSize:100,autoUpload:!0,examId:h,partId:d,showPlayButton:!0,disabled:p})})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Headphones, Music } from 'lucide-react';
+import { Card, CardContent } from '../../components/ui/card';
+import { FileUpload } from '../../components/ui/file-upload';
+import { Label } from '../../components/ui/label';
+export function PartAudioUploader({ partId, partName, audioUrl, onAudioChange, examId, isReadOnly = false }) {
+    return (_jsxs(Card, { className: "mb-4 overflow-hidden border-0 bg-white shadow-lg shadow-sky-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-sky-500 via-cyan-500 to-teal-500" }), _jsx(CardContent, { className: "px-4 py-4", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 to-cyan-600 shadow-md", children: _jsx(Headphones, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsxs(Label, { className: "text-sm font-bold text-gray-900", children: ["File \u00E2m thanh cho ", partName] }), _jsx("p", { className: "text-xs text-gray-500", children: "Audio d\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong ph\u1EA7n n\u00E0y." })] })] }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `part-audio-${partId}`, label: "", accept: "audio/*", value: audioUrl || '', onChange: (url) => !isReadOnly && onAudioChange(url), placeholder: "Ch\u1ECDn file audio cho part n\u00E0y...", icon: _jsx(Music, { className: "h-4 w-4" }), maxSize: 100, autoUpload: true, examId: examId, partId: partId, showPlayButton: true, disabled: isReadOnly }) })] }) })] }));
+}