@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.7

package/dist/components/questions/types/listen-and-speak-odd-one-out/ListenAndSpeakOddOneOutCreator.js

@@ -1,21 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Card, CardContent, CardHeader } from '../../../../components/ui/card';
 import { Label } from '../../../../components/ui/label';
 import { Button } from '../../../../components/ui/button';
 import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../../components/ui/form';
 import { FileUpload } from '../../../../components/ui/file-upload';
-import { PointsInput } from '../../../../components/ui/points-input';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 // Hooks
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
 import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { listenAndSpeakOddOneOutSchema, } from '../../../../shared/lib/validation/listen-and-speak-odd-one-out.validation';
 // Icons
-import { Plus, Trash2, Volume2, ImageIcon, MessageSquareText, HelpCircle, BookOpen, Eye, Pencil, Info, ListChecks, CircleOff, Check } from 'lucide-react';
-import { CreatorGuide } from '../../components/CreatorGuide';
+import { Plus, Trash2, Volume2, ImageIcon, MessageSquareText, HelpCircle, Info, ListChecks, CircleOff, Check } from 'lucide-react';
 import { ListenAndSpeakOddOneOutClient } from './ListenAndSpeakOddOneOutClient';
 const REQUIRED_IMAGE_COUNT = 4;
 // ─── Sub-component: Image preview with presigned URL ─────────────────────────
@@ -210,7 +208,7 @@ export function ListenAndSpeakOddOneOutCreator({ initialData, onChange, onUnsave
     const [isClientMode, setIsClientMode] = useState(false);
     // ─── Preview Mode ────────────────────────────────────────────────
     if (isClientMode) {
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { className: "text-lg font-bold", children: "\uD83D\uDC41\uFE0F Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc (Preview)" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(ListenAndSpeakOddOneOutClient, { questionData: {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ListenAndSpeakOddOneOutClient, { questionData: {
                         audioUrl: watchedAudioUrl,
                         images: watchedImages,
                         oddOneOutIndex: watchedOddOneOutIndex,
@@ -219,29 +217,31 @@ export function ListenAndSpeakOddOneOutCreator({ initialData, onChange, onUnsave
                         explanation: watchedExplanation,
                     } })] }));
     }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
-                    { text: 'Upload đúng 4 hình ảnh — 3 hình cùng loại và 1 hình khác loại' },
-                    { text: 'Upload audio câu hỏi cho mỗi câu — giám khảo hỏi hình nào khác loại và tại sao' },
-                    { text: 'Nhập đáp án mong muốn: tên hình khác loại + lý do', highlight: true },
-                    { text: 'Thêm giải thích chi tiết vì sao hình đó khác loại' },
-                ], tips: ['Sự khác biệt nên rõ ràng về chủ đề hoặc danh mục, không phải về hình thức'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(ListChecks, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Odd One Out \u2014 H\u00ECnh n\u00E0o kh\u00E1c lo\u1EA1i?" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nh\u00ECn 4 h\u00ECnh v\u00E0 ch\u1EC9 ra h\u00ECnh kh\u00E1c lo\u1EA1i, gi\u1EA3i th\u00EDch l\u00FD do" })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !watchedAudioUrl, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 disabled:opacity-50", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Form, { ...form, children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-amber-500 via-orange-500 to-red-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", 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-amber-500 to-orange-600 shadow-md", children: _jsx(ImageIcon, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "4 H\u00ECnh \u1EA3nh" }), _jsx("p", { className: "text-sm text-gray-500", children: "Upload \u0111\u00FAng 4 h\u00ECnh \u2014 1 h\u00ECnh s\u1EBD l\u00E0 h\u00ECnh kh\u00E1c lo\u1EA1i" })] })] }), _jsxs("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ${uploadedCount === 4
-                                                ? 'bg-green-100 text-green-700 border border-green-200'
-                                                : 'bg-orange-100 text-orange-600 border border-orange-200'}`, children: [uploadedCount, "/", REQUIRED_IMAGE_COUNT, " \u1EA3nh"] })] }) }), _jsx(CardContent, { children: _jsx(FormField, { control: control, name: "images", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "grid grid-cols-2 gap-5", children: Array.from({ length: REQUIRED_IMAGE_COUNT }).map((_, index) => {
-                                                    const imgUrl = watchedImages[index] || '';
-                                                    const isSelected = watchedOddOneOutIndex === index;
-                                                    return (_jsxs(Card, { className: `relative border-2 transition-all duration-300 overflow-hidden ${isSelected
-                                                            ? 'border-red-400 bg-gradient-to-b from-red-50/60 to-white shadow-lg shadow-red-100/60 ring-1 ring-red-200'
-                                                            : 'border-gray-200 hover:border-gray-300 hover:shadow-md'}`, children: [isSelected && (_jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-red-400 via-rose-500 to-red-400" })), _jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-semibold text-gray-600 flex items-center gap-2", children: [_jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold transition-colors duration-200 ${isSelected ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}`, children: index + 1 }), "\u1EA2nh ", index + 1, isSelected && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-2 py-0.5 text-xs font-bold text-red-700 animate-in fade-in slide-in-from-left-1 duration-200", children: [_jsx(CircleOff, { className: "h-3 w-3" }), "Kh\u00E1c lo\u1EA1i"] }))] }), _jsx("div", { className: "flex items-center gap-1", children: imgUrl && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => clearImage(index), className: "h-7 w-7 rounded-full text-red-400 hover:text-red-600 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })) })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [imgUrl ? (_jsx(ImagePreview, { imageUrl: imgUrl, index: index, isOddOneOut: isSelected })) : (_jsx(FileUpload, { id: `odd-one-out-img-${index}`, label: "", accept: "image/*", value: "", onChange: (url) => handleImageChange(index, url), placeholder: `Upload ảnh ${index + 1}`, maxSize: 5, autoUpload: true, prefix: "questions/odd-one-out" })), form.formState.errors?.images?.[index] && (_jsxs("p", { className: "text-sm font-medium text-destructive", children: ["Vui l\u00F2ng t\u1EA3i l\u00EAn \u1EA3nh ", index + 1] })), _jsxs("button", { type: "button", onClick: () => {
-                                                                            form.setValue('oddOneOutIndex', index, { shouldValidate: true, shouldDirty: true });
-                                                                            clearErrors('oddOneOutIndex');
-                                                                        }, className: `group/toggle w-full flex items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-all duration-200 cursor-pointer ${isSelected
-                                                                            ? 'bg-red-50 border border-red-200'
-                                                                            : 'bg-gray-50 border border-gray-200 hover:bg-red-50/50 hover:border-red-200/60'}`, children: [_jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 ${isSelected
-                                                                                    ? 'border-red-500 bg-red-500 shadow-sm shadow-red-200'
-                                                                                    : 'border-gray-300 bg-white group-hover/toggle:border-red-300'}`, children: isSelected && (_jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 })) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("span", { className: `text-xs font-semibold transition-colors duration-200 ${isSelected
-                                                                                        ? 'text-red-700'
-                                                                                        : 'text-gray-500 group-hover/toggle:text-red-600'}`, children: isSelected ? 'Đã đánh dấu là hình khác loại' : 'Đánh dấu là hình khác loại' }) }), _jsx(CircleOff, { className: `h-3.5 w-3.5 shrink-0 transition-colors duration-200 ${isSelected
-                                                                                    ? 'text-red-400'
-                                                                                    : 'text-gray-300 group-hover/toggle:text-red-300'}` })] })] })] }, index));
-                                                }) }), form.formState.errors?.images?.message && (_jsx(FormMessage, {})), form.formState.errors?.oddOneOutIndex?.message && (_jsxs("p", { className: "mt-3 text-sm font-medium text-destructive flex items-center gap-2", children: [_jsx(CircleOff, { className: "h-4 w-4" }), form.formState.errors.oddOneOutIndex.message] }))] })) }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(HelpCircle, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "C\u00E2u h\u1ECFi: H\u00ECnh n\u00E0o kh\u00E1c lo\u1EA1i?" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nghe c\u00E2u h\u1ECFi, nh\u00ECn 4 h\u00ECnh v\u00E0 n\u00F3i h\u00ECnh n\u00E0o kh\u00E1c lo\u1EA1i + l\u00FD do" })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsx("div", { className: "flex-1", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.formState.errors?.points?.message }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "File Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: "audio-odd-one-out", label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "\u0110\u00E1p \u00E1n mong mu\u1ED1n" }), _jsxs("p", { className: "text-sm text-gray-500", children: [watchedExpectedAnswers.filter(a => a.trim()).length, " \u0111\u00E1p \u00E1n \u0111\u00E3 nh\u1EADp"] })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2 text-xs text-blue-700", children: [_jsx(Info, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: "H\u1ECDc sinh ph\u1EA3i ch\u1EC9 ra h\u00ECnh kh\u00E1c lo\u1EA1i V\u00C0 gi\u1EA3i th\u00EDch l\u00FD do t\u1EA1i sao." })] }), _jsx(FormField, { control: control, name: "expectedAnswers", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "space-y-3", children: watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 text-sm font-bold mt-1", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `VD: ${index === 0 ? 'The beach — because the others are classrooms.' : 'It\'s the odd one out because...'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "mt-0.5 h-8 w-8 rounded-full text-gray-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))) }), form.formState.errors?.expectedAnswers?.message && (_jsx(FormMessage, {}))] })) })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", 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-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none", rows: 3 }) })] })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ListChecks, { className: "h-3.5 w-3.5" }), title: "Odd One Out \u2014 H\u00ECnh n\u00E0o kh\u00E1c lo\u1EA1i?", points: {
+                        value: watchedPoints,
+                        onValueChange: (value) => form.setValue('points', value, { shouldValidate: true }),
+                        error: form.formState.errors?.points?.message,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: !watchedAudioUrl,
+                    } }), contentClassName: "hidden", children: null }), _jsxs(Form, { ...form, children: [_jsx(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "4 H\u00ECnh \u1EA3nh" })] }), _jsxs("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ${uploadedCount === 4
+                                        ? 'bg-green-100 text-green-700 border border-green-200'
+                                        : 'bg-orange-100 text-orange-600 border border-orange-200'}`, children: [uploadedCount, "/", REQUIRED_IMAGE_COUNT, " \u1EA3nh"] })] }), children: _jsx(FormField, { control: control, name: "images", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "grid grid-cols-2 gap-5", children: Array.from({ length: REQUIRED_IMAGE_COUNT }).map((_, index) => {
+                                            const imgUrl = watchedImages[index] || '';
+                                            const isSelected = watchedOddOneOutIndex === index;
+                                            return (_jsxs(Card, { className: `relative border-2 transition-all duration-300 overflow-hidden ${isSelected
+                                                    ? 'border-red-400 bg-gradient-to-b from-red-50/60 to-white shadow-lg shadow-red-100/60 ring-1 ring-red-200'
+                                                    : 'border-gray-200 hover:border-gray-300 hover:shadow-md'}`, children: [isSelected && (_jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-red-400 via-rose-500 to-red-400" })), _jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-semibold text-gray-600 flex items-center gap-2", children: [_jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold transition-colors duration-200 ${isSelected ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}`, children: index + 1 }), "\u1EA2nh ", index + 1, isSelected && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-2 py-0.5 text-xs font-bold text-red-700 animate-in fade-in slide-in-from-left-1 duration-200", children: [_jsx(CircleOff, { className: "h-3 w-3" }), "Kh\u00E1c lo\u1EA1i"] }))] }), _jsx("div", { className: "flex items-center gap-1", children: imgUrl && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => clearImage(index), className: "h-7 w-7 rounded-full text-red-400 hover:text-red-600 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })) })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [imgUrl ? (_jsx(ImagePreview, { imageUrl: imgUrl, index: index, isOddOneOut: isSelected })) : (_jsx(FileUpload, { id: `odd-one-out-img-${index}`, label: "", accept: "image/*", value: "", onChange: (url) => handleImageChange(index, url), placeholder: `Upload ảnh ${index + 1}`, maxSize: 5, autoUpload: true, prefix: "questions/odd-one-out" })), form.formState.errors?.images?.[index] && (_jsxs("p", { className: "text-sm font-medium text-destructive", children: ["Vui l\u00F2ng t\u1EA3i l\u00EAn \u1EA3nh ", index + 1] })), _jsxs("button", { type: "button", onClick: () => {
+                                                                    form.setValue('oddOneOutIndex', index, { shouldValidate: true, shouldDirty: true });
+                                                                    clearErrors('oddOneOutIndex');
+                                                                }, className: `group/toggle w-full flex items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-all duration-200 cursor-pointer ${isSelected
+                                                                    ? 'bg-red-50 border border-red-200'
+                                                                    : 'bg-gray-50 border border-gray-200 hover:bg-red-50/50 hover:border-red-200/60'}`, children: [_jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 ${isSelected
+                                                                            ? 'border-red-500 bg-red-500 shadow-sm shadow-red-200'
+                                                                            : 'border-gray-300 bg-white group-hover/toggle:border-red-300'}`, children: isSelected && (_jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 })) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("span", { className: `text-xs font-semibold transition-colors duration-200 ${isSelected
+                                                                                ? 'text-red-700'
+                                                                                : 'text-gray-500 group-hover/toggle:text-red-600'}`, children: isSelected ? 'Đã đánh dấu là hình khác loại' : 'Đánh dấu là hình khác loại' }) }), _jsx(CircleOff, { className: `h-3.5 w-3.5 shrink-0 transition-colors duration-200 ${isSelected
+                                                                            ? 'text-red-400'
+                                                                            : 'text-gray-300 group-hover/toggle:text-red-300'}` })] })] })] }, index));
+                                        }) }), form.formState.errors?.images?.message && (_jsx(FormMessage, {})), form.formState.errors?.oddOneOutIndex?.message && (_jsxs("p", { className: "mt-3 text-sm font-medium text-destructive flex items-center gap-2", children: [_jsx(CircleOff, { className: "h-4 w-4" }), form.formState.errors.oddOneOutIndex.message] }))] })) }) }), _jsx(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(HelpCircle, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi: H\u00ECnh n\u00E0o kh\u00E1c lo\u1EA1i?" })] }), children: _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "File Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: "audio-odd-one-out", label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] }) }), _jsxs(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(MessageSquareText, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n mong mu\u1ED1n" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2 text-xs text-blue-700", children: [_jsx(Info, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: "H\u1ECDc sinh ph\u1EA3i ch\u1EC9 ra h\u00ECnh kh\u00E1c lo\u1EA1i V\u00C0 gi\u1EA3i th\u00EDch l\u00FD do t\u1EA1i sao." })] }), _jsx(FormField, { control: control, name: "expectedAnswers", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "space-y-3", children: watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 text-sm font-bold mt-1", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `VD: ${index === 0 ? 'The beach — because the others are classrooms.' : 'It\'s the odd one out because...'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "mt-0.5 h-8 w-8 rounded-full text-gray-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))) }), form.formState.errors?.expectedAnswers?.message && (_jsx(FormMessage, {}))] })) })] }), _jsx(CompactExplanationToggle, { value: watchedExplanation || '', onValueChange: (value) => form.setValue('explanation', value, { shouldValidate: true }), defaultVisible: Boolean(watchedExplanation) })] })] }));
 }

package/dist/components/questions/types/listen-and-speak-question-list/ListenAndSpeakQuestionListClient.js

@@ -13,7 +13,7 @@ function QuestionAudioPlayer({ audioUrl }) {
 // ─── Main Client Component ───────────────────────────────────────────────────
 export function ListenAndSpeakQuestionListClient({ questionData, isReviewMode = false, }) {
     const { audioUrl, expectedAnswers, activeQuestionId, questions = [], explanation } = questionData;
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(ListChecks, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (Danh s\u00E1ch c\u00E2u h\u1ECFi)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), questions.length > 0 ? (_jsx("div", { className: "rounded-xl border border-gray-100 bg-gradient-to-b from-gray-50/80 to-white p-5 space-y-2.5", children: questions.map((q, idx) => {
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gray-50 px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-gray-600", children: _jsx(ListChecks, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (Danh s\u00E1ch c\u00E2u h\u1ECFi)" })] }) }), _jsxs("div", { className: "p-3 space-y-3", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), questions.length > 0 ? (_jsx("div", { className: "rounded-xl border border-gray-100 bg-gradient-to-b from-gray-50/80 to-white p-5 space-y-2.5", children: questions.map((q, idx) => {
                                     const isActive = q.id === activeQuestionId;
                                     return (_jsxs("div", { className: cn('flex items-center gap-3 rounded-lg px-4 py-3 transition-all duration-200', isActive
                                             ? 'bg-blue-50 border-[2px] border-blue-300 shadow-sm shadow-blue-100/50'

package/dist/components/questions/types/listen-and-speak-question-list/ListenAndSpeakQuestionListCreator.js

@@ -1,15 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Label } from '../../../../components/ui/label';
 import { Button } from '../../../../components/ui/button';
 import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../../components/ui/form';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../components/ui/select';
 import { FileUpload } from '../../../../components/ui/file-upload';
-import { PointsInput } from '../../../../components/ui/points-input';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 // Stores & hooks
 import { useQuestionListGroup } from '../../_shared/hooks/useQuestionListGroup';
 import { generateObjectId } from '../../_shared/utils/id-generator';
@@ -17,10 +15,9 @@ import { generateObjectId } from '../../_shared/utils/id-generator';
 import { ListenAndSpeakQuestionListClient } from './ListenAndSpeakQuestionListClient';
 import { listenAndSpeakQuestionListFormSchema } from '../../../../shared/lib/validation/listen-and-speak-question-list.validation';
 // Utilities & Icons
-import { Plus, Trash2, Mic, Volume2, ListChecks, MessageSquareText, Info, BookOpen, Eye, Pencil } from 'lucide-react';
+import { Plus, Trash2, Mic, Volume2, ListChecks, MessageSquareText, Info } from 'lucide-react';
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks/useDebouncedCallback';
-import { CreatorGuide } from '../../components/CreatorGuide';
 export function ListenAndSpeakQuestionListCreator({ questionIndex, initialData, onChange, validationRef, isFirstInGroup: isFirstInGroupProp, partId, groups, questionIndexInPart, }) {
     const [isClientMode, setIsClientMode] = useState(false);
     const isGrouped = Boolean(groups && groups.length > 0);
@@ -241,16 +238,15 @@ export function ListenAndSpeakQuestionListCreator({ questionIndex, initialData,
             questions,
             groupNumber: isGrouped ? currentGroupNumber : undefined,
         };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Nghe & Tr\u1EA3 l\u1EDDi theo danh s\u00E1ch c\u00E2u h\u1ECFi (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ListenAndSpeakQuestionListClient, { questionData: questionData, isReviewMode: true })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ListenAndSpeakQuestionListClient, { questionData: questionData, isReviewMode: true })] }));
     }
     // ─── Creator UI ────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
-                    { text: 'Nhập danh sách câu hỏi cho nhóm — câu hỏi đầu tiên sẽ quản lý danh sách chung' },
-                    { text: 'Upload audio câu hỏi cho từng câu trong nhóm' },
-                    { text: 'Chọn câu hỏi đang active (active question) tương ứng với câu đang hỏi', highlight: true },
-                    { text: 'Nhập các đáp án mong muốn cho mỗi câu' },
-                    { text: 'Thêm giải thích nếu cần thiết' },
-                ], tips: ['Câu hỏi nên ngắn gọn, rõ ràng và phù hợp với trình độ học sinh'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", 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-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(ListChecks, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Nh\u00F3m \u0111\u00E1p \u00E1n" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["Nh\u00F3m ", currentGroupNumber, " \u2014 D\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi"] })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !watchedAudioUrl || watchedExpectedAnswers.filter((a) => a.trim()).length === 0, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 disabled:opacity-50", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), isFirstInGroup ? (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-cyan-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-cyan-400 to-sky-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-cyan-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-cyan-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Danh s\u00E1ch c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-indigo-300 bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700", children: ["Nh\u00F3m ", currentGroupNumber] })] }), _jsx("p", { className: "text-sm text-gray-500", children: "D\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong nh\u00F3m \u2014 Th\u00EAm c\u00E1c c\u00E2u h\u1ECFi text \u0111\u1EC3 h\u1ECDc sinh ch\u1ECDn v\u00E0 tr\u1EA3 l\u1EDDi" })] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("div", { className: "space-y-3", children: questions.map((q, index) => (_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700 font-semibold text-sm shadow-sm", children: index + 1 }), _jsx(Input, { value: q.text, onChange: (e) => handleUpdateListQuestion(index, e.target.value), placeholder: "VD: Now, how old are you?", className: "flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleRemoveListQuestion(index), className: "shrink-0 text-gray-400 hover:text-red-600 hover:bg-red-50", "aria-label": `Xóa câu hỏi ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, q.id))) }), questions.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-indigo-200 bg-indigo-50/50 py-8 px-4 text-center", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 mb-3", children: _jsx(ListChecks, { className: "h-6 w-6 text-indigo-500" }) }), _jsx("p", { className: "text-sm font-medium text-gray-700", children: "Ch\u01B0a c\u00F3 c\u00E2u h\u1ECFi n\u00E0o" }), _jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Vui l\u00F2ng th\u00EAm \u00EDt nh\u1EA5t m\u1ED9t c\u00E2u h\u1ECFi cho nh\u00F3m n\u00E0y" })] })), _jsxs(Button, { type: "button", variant: "outline", onClick: handleAddListQuestion, className: "w-full gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:border-indigo-300", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] })] })) : (
-            /* Read-only view of the shared question list for non-first questions in the group */
-            _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow shadow-indigo-100/30", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 via-blue-400 to-cyan-400" }), _jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-100 shadow-sm", children: _jsx(ListChecks, { className: "h-4 w-4 text-indigo-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Danh s\u00E1ch c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500", children: ["Nh\u00F3m ", currentGroupNumber, " \u2014 Ch\u1EC9 \u0111\u1ECDc"] })] }), _jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: "\u0110\u01B0\u1EE3c qu\u1EA3n l\u00FD b\u1EDFi c\u00E2u h\u1ECFi \u0111\u1EA7u ti\u00EAn trong nh\u00F3m" })] })] }) }), _jsx(CardContent, { className: "pt-0", children: questions.length > 0 ? (_jsx("div", { className: "space-y-2", children: questions.map((q, index) => (_jsxs("div", { className: "flex gap-2.5 items-center px-3 py-2 rounded-lg bg-gray-50 border border-gray-100", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-indigo-50 text-indigo-600 font-semibold text-xs", children: index + 1 }), _jsx("span", { className: "text-sm text-gray-700", children: q.text || _jsx("span", { className: "italic text-gray-400", children: "(Ch\u01B0a nh\u1EADp n\u1ED9i dung)" }) })] }, q.id))) })) : (_jsx("div", { className: "text-center py-4 text-sm text-gray-400 italic", children: "Ch\u01B0a c\u00F3 c\u00E2u h\u1ECFi n\u00E0o trong nh\u00F3m" })) })] })), _jsxs(Form, { ...form, children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(Mic, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "C\u00E2u h\u1ECFi Nghe & Tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nghe \u00E2m thanh v\u00E0 n\u00F3i c\u00E2u tr\u1EA3 l\u1EDDi" })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx("div", { className: "flex flex-col gap-4", children: _jsx("div", { className: "w-full md:w-1/2", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.formState.errors?.points?.message }) }) }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi \u0111\u01B0\u1EE3c h\u1ECFi trong audio ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Ch\u1ECDn c\u00E2u h\u1ECFi m\u00E0 h\u1ECDc sinh s\u1EBD nghe trong \u0111o\u1EA1n audio n\u00E0y." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 M\u1ED7i audio t\u01B0\u01A1ng \u1EE9ng m\u1ED9t c\u00E2u h\u1ECFi:" }), " X\u00E1c \u0111\u1ECBnh c\u00E2u h\u1ECFi n\u00E0o t\u1EEB danh s\u00E1ch \u0111ang \u0111\u01B0\u1EE3c h\u1ECFi trong audio."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Hi\u1EC3n th\u1ECB cho h\u1ECDc sinh:" }), " H\u1ECDc sinh s\u1EBD th\u1EA5y danh s\u00E1ch c\u00E2u h\u1ECFi v\u00E0 c\u1EA7n ch\u1ECDn \u0111\u00FAng c\u00E2u h\u1ECFi kh\u1EDBp v\u1EDBi audio \u0111\u1EC3 tr\u1EA3 l\u1EDDi."] })] })] }), _jsx(FormField, { control: control, name: "activeQuestionId", render: ({ field }) => (_jsxs(FormItem, { children: [_jsxs(Select, { value: field.value || '', onValueChange: field.onChange, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { className: "w-full bg-white border-gray-200 transition-all focus:border-indigo-300 focus:ring-indigo-200", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn c\u00E2u h\u1ECFi t\u1EEB danh s\u00E1ch" }) }) }), _jsxs(SelectContent, { children: [questions.map((q, idx) => (_jsxs(SelectItem, { value: q.id, children: [idx + 1, ". ", q.text || '(Chưa nhập nội dung)'] }, q.id))), questions.length === 0 && (_jsx("div", { className: "p-3 text-sm text-gray-500 italic text-center", children: "Vui l\u00F2ng t\u1EA1o c\u00E2u h\u1ECFi \u1EDF nh\u00F3m tr\u00EAn tr\u01B0\u1EDBc" }))] })] }), _jsx(FormMessage, {})] })) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "\u00C2m thanh c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: `audio-question-${displayQuestionNumber}`, label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", 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-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsx("div", { children: _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n mong mu\u1ED1n (", watchedExpectedAnswers.filter((a) => a.trim()).length, ")"] }) })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Nh\u1EADp c\u00E1c c\u00E2u tr\u1EA3 l\u1EDDi mong mu\u1ED1n. C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n n\u1EBFu c\u00F3 nhi\u1EC1u c\u00E1ch tr\u1EA3 l\u1EDDi \u0111\u00FAng." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m th\u1EE7 c\u00F4ng:" }), " Gi\u00E1o vi\u00EAn d\u00F9ng c\u00E1c \u0111\u00E1p \u00E1n n\u00E0y l\u00E0m tham kh\u1EA3o \u0111\u1EC3 ch\u1EA5m \u0111i\u1EC3m."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng (AI):" }), " H\u1EC7 th\u1ED1ng d\u00F9ng AI so s\u00E1nh gi\u1ECDng n\u00F3i c\u1EE7a h\u1ECDc sinh v\u1EDBi c\u00E1c \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m."] })] })] }), _jsx(FormField, { control: control, name: "expectedAnswers", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "space-y-3", children: watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `Ví dụ: ${index === 0 ? 'I am doing well' : 'I feel great'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))) }), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] })) })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", 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-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0 'I am 7 years old' v\u00EC c\u00E2u h\u1ECFi h\u1ECFi v\u1EC1 tu\u1ED5i...", className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none", rows: 3 }) })] })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ListChecks, { className: "h-3.5 w-3.5" }), title: "Nh\u00F3m \u0111\u00E1p \u00E1n", extraActions: _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600", children: ["Nh\u00F3m ", currentGroupNumber] }), points: {
+                        value: watchedPoints,
+                        onValueChange: (value) => form.setValue('points', value, { shouldValidate: true }),
+                        error: form.formState.errors?.points?.message,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: !watchedAudioUrl || watchedExpectedAnswers.filter((a) => a.trim()).length === 0,
+                    } }), contentClassName: "hidden", children: null }), isFirstInGroup ? (_jsxs(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Danh s\u00E1ch c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-indigo-300 bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700", children: ["Nh\u00F3m ", currentGroupNumber] })] }), _jsx("p", { className: "text-sm text-gray-500", children: "D\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong nh\u00F3m \u2014 Th\u00EAm c\u00E1c c\u00E2u h\u1ECFi text \u0111\u1EC3 h\u1ECDc sinh ch\u1ECDn v\u00E0 tr\u1EA3 l\u1EDDi" })] })] }), children: [_jsx("div", { className: "space-y-3", children: questions.map((q, index) => (_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700 font-semibold text-sm shadow-sm", children: index + 1 }), _jsx(Input, { value: q.text, onChange: (e) => handleUpdateListQuestion(index, e.target.value), placeholder: "VD: Now, how old are you?", className: "flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleRemoveListQuestion(index), className: "shrink-0 text-gray-400 hover:text-red-600 hover:bg-red-50", "aria-label": `Xóa câu hỏi ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, q.id))) }), questions.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-indigo-200 bg-indigo-50/50 py-8 px-4 text-center", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 mb-3", children: _jsx(ListChecks, { className: "h-6 w-6 text-indigo-500" }) }), _jsx("p", { className: "text-sm font-medium text-gray-700", children: "Ch\u01B0a c\u00F3 c\u00E2u h\u1ECFi n\u00E0o" }), _jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Vui l\u00F2ng th\u00EAm \u00EDt nh\u1EA5t m\u1ED9t c\u00E2u h\u1ECFi cho nh\u00F3m n\u00E0y" })] })), _jsxs(Button, { type: "button", variant: "outline", onClick: handleAddListQuestion, className: "w-full gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:border-indigo-300", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] })) : (_jsx(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Danh s\u00E1ch c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500", children: ["Nh\u00F3m ", currentGroupNumber, " \u2014 Ch\u1EC9 \u0111\u1ECDc"] })] }), _jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: "\u0110\u01B0\u1EE3c qu\u1EA3n l\u00FD b\u1EDFi c\u00E2u h\u1ECFi \u0111\u1EA7u ti\u00EAn trong nh\u00F3m" })] })] }), children: questions.length > 0 ? (_jsx("div", { className: "space-y-2", children: questions.map((q, index) => (_jsxs("div", { className: "flex gap-2.5 items-center px-3 py-2 rounded-lg bg-gray-50 border border-gray-100", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-indigo-50 text-indigo-600 font-semibold text-xs", children: index + 1 }), _jsx("span", { className: "text-sm text-gray-700", children: q.text || _jsx("span", { className: "italic text-gray-400", children: "(Ch\u01B0a nh\u1EADp n\u1ED9i dung)" }) })] }, q.id))) })) : (_jsx("div", { className: "text-center py-4 text-sm text-gray-400 italic", children: "Ch\u01B0a c\u00F3 c\u00E2u h\u1ECFi n\u00E0o trong nh\u00F3m" })) })), _jsxs(Form, { ...form, children: [_jsxs(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(Mic, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi Nghe & Tr\u1EA3 l\u1EDDi" })] }), children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi \u0111\u01B0\u1EE3c h\u1ECFi trong audio ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Ch\u1ECDn c\u00E2u h\u1ECFi m\u00E0 h\u1ECDc sinh s\u1EBD nghe trong \u0111o\u1EA1n audio n\u00E0y." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 M\u1ED7i audio t\u01B0\u01A1ng \u1EE9ng m\u1ED9t c\u00E2u h\u1ECFi:" }), " X\u00E1c \u0111\u1ECBnh c\u00E2u h\u1ECFi n\u00E0o t\u1EEB danh s\u00E1ch \u0111ang \u0111\u01B0\u1EE3c h\u1ECFi trong audio."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Hi\u1EC3n th\u1ECB cho h\u1ECDc sinh:" }), " H\u1ECDc sinh s\u1EBD th\u1EA5y danh s\u00E1ch c\u00E2u h\u1ECFi v\u00E0 c\u1EA7n ch\u1ECDn \u0111\u00FAng c\u00E2u h\u1ECFi kh\u1EDBp v\u1EDBi audio \u0111\u1EC3 tr\u1EA3 l\u1EDDi."] })] })] }), _jsx(FormField, { control: control, name: "activeQuestionId", render: ({ field }) => (_jsxs(FormItem, { children: [_jsxs(Select, { value: field.value || '', onValueChange: field.onChange, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { className: "w-full bg-white border-gray-200 transition-all focus:border-indigo-300 focus:ring-indigo-200", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn c\u00E2u h\u1ECFi t\u1EEB danh s\u00E1ch" }) }) }), _jsxs(SelectContent, { children: [questions.map((q, idx) => (_jsxs(SelectItem, { value: q.id, children: [idx + 1, ". ", q.text || '(Chưa nhập nội dung)'] }, q.id))), questions.length === 0 && (_jsx("div", { className: "p-3 text-sm text-gray-500 italic text-center", children: "Vui l\u00F2ng t\u1EA1o c\u00E2u h\u1ECFi \u1EDF nh\u00F3m tr\u00EAn tr\u01B0\u1EDBc" }))] })] }), _jsx(FormMessage, {})] })) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "\u00C2m thanh c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: `audio-question-${displayQuestionNumber}`, label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] })] }), _jsxs(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100", children: _jsx(MessageSquareText, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("p", { className: "text-sm font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n mong mu\u1ED1n (", watchedExpectedAnswers.filter((a) => a.trim()).length, ")"] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Nh\u1EADp c\u00E1c c\u00E2u tr\u1EA3 l\u1EDDi mong mu\u1ED1n. C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n n\u1EBFu c\u00F3 nhi\u1EC1u c\u00E1ch tr\u1EA3 l\u1EDDi \u0111\u00FAng." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m th\u1EE7 c\u00F4ng:" }), " Gi\u00E1o vi\u00EAn d\u00F9ng c\u00E1c \u0111\u00E1p \u00E1n n\u00E0y l\u00E0m tham kh\u1EA3o \u0111\u1EC3 ch\u1EA5m \u0111i\u1EC3m."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng (AI):" }), " H\u1EC7 th\u1ED1ng d\u00F9ng AI so s\u00E1nh gi\u1ECDng n\u00F3i c\u1EE7a h\u1ECDc sinh v\u1EDBi c\u00E1c \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m."] })] })] }), _jsx(FormField, { control: control, name: "expectedAnswers", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "space-y-3", children: watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `Ví dụ: ${index === 0 ? 'I am doing well' : 'I feel great'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))) }), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] })) })] }), _jsx(CompactExplanationToggle, { value: watchedExplanation || '', onValueChange: (value) => form.setValue('explanation', value, { shouldValidate: true }), defaultVisible: Boolean(watchedExplanation) })] })] }));
 }

package/dist/components/questions/types/listen-and-speak-with-story-images/ListenAndSpeakWithStoryImagesClient.js

@@ -20,7 +20,7 @@ function StoryImagePreview({ imageUrl, index }) {
 // ─── Main Client Component ───────────────────────────────────────────────────
 export function ListenAndSpeakWithStoryImagesClient({ questionData, isReviewMode = false, }) {
     const { audioUrl, images, expectedAnswers = [], explanation } = questionData;
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(BookImage, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (K\u1EC3 chuy\u1EC7n theo h\u00ECnh)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), images && images.length > 0 && (_jsx("div", { className: "bg-gradient-to-br from-purple-50/80 to-fuchsia-50/60 rounded-2xl p-6 border border-purple-100/80 shadow-sm", children: _jsx("div", { className: "grid gap-4", style: {
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gray-50 px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-gray-600", children: _jsx(BookImage, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (K\u1EC3 chuy\u1EC7n theo h\u00ECnh)" })] }) }), _jsxs("div", { className: "p-3 space-y-3", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), images && images.length > 0 && (_jsx("div", { className: "bg-gradient-to-br from-purple-50/80 to-fuchsia-50/60 rounded-2xl p-6 border border-purple-100/80 shadow-sm", children: _jsx("div", { className: "grid gap-4", style: {
                                         gridTemplateColumns: `repeat(${Math.min(images.length, 4)}, 1fr)`,
                                     }, children: images.map((imgUrl, index) => (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-200 text-purple-800 text-xs font-bold", children: index + 1 }) }), _jsx("div", { className: "relative aspect-square rounded-xl overflow-hidden border-[3px] border-purple-300 bg-white shadow-md ring-2 ring-purple-100", children: imgUrl ? (_jsx(StoryImagePreview, { imageUrl: imgUrl, index: index })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-400", children: _jsx(ImageIcon, { className: "h-6 w-6" }) })) })] }, index))) }) })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh s\u1EBD nh\u1EA5n n\u00FAt ghi \u00E2m v\u00E0 n\u00F3i c\u00E2u tr\u1EA3 l\u1EDDi t\u1EA1i \u0111\u00E2y" })] }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n mong mu\u1ED1n" })] }), _jsx("div", { className: "space-y-2", children: expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] })), isReviewMode && explanation && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-indigo-600" }), _jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-indigo-700 leading-relaxed", children: explanation })] }))] })] })] }));
 }

package/dist/components/questions/types/listen-and-speak-with-story-images/ListenAndSpeakWithStoryImagesCreator.js

@@ -1,21 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Card, CardContent, CardHeader } from '../../../../components/ui/card';
 import { Label } from '../../../../components/ui/label';
 import { Button } from '../../../../components/ui/button';
 import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../../components/ui/form';
 import { FileUpload } from '../../../../components/ui/file-upload';
-import { PointsInput } from '../../../../components/ui/points-input';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 // Hooks
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
 import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { listenAndSpeakWithStoryImagesSchema, } from '../../../../shared/lib/validation/listen-and-speak-with-story-images.validation';
 // Icons
-import { Plus, Trash2, Volume2, ImageIcon, MessageSquareText, Mic, BookOpen, Eye, Pencil, Info, ListChecks } from 'lucide-react';
-import { CreatorGuide } from '../../components/CreatorGuide';
+import { Plus, Trash2, Volume2, ImageIcon, MessageSquareText, Mic, BookOpen, Info, ListChecks } from 'lucide-react';
 import { ListenAndSpeakWithStoryImagesClient } from './ListenAndSpeakWithStoryImagesClient';
 // ─── Sub-component: Image preview with presigned URL ─────────────────────────
 function ImagePreview({ imageUrl, index }) {
@@ -216,15 +214,16 @@ export function ListenAndSpeakWithStoryImagesCreator({ initialData, onChange, on
             points: watchedPoints,
             isBackup: watchedIsBackup,
         };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Nghe v\u00E0 n\u00F3i \u2014 K\u1EC3 c\u00E2u chuy\u1EC7n (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Preview mode" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ListenAndSpeakWithStoryImagesClient, { questionData: questionData, isReviewMode: true })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ListenAndSpeakWithStoryImagesClient, { questionData: questionData, isReviewMode: true })] }));
     }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
-                    { text: 'Upload các hình ảnh câu chuyện theo thứ tự — học sinh sẽ kể lại câu chuyện dựa trên hình' },
-                    { text: 'Có thể thêm hoặc xóa hình ảnh linh hoạt' },
-                    { text: 'Upload audio câu hỏi cho từng câu — giám khảo sẽ hỏi về nội dung câu chuyện' },
-                    { text: 'Nhập các đáp án mong muốn cho mỗi câu hỏi', highlight: true },
-                    { text: 'Thêm giải thích nếu cần' },
-                ], tips: ['Hình ảnh nên sắp xếp theo trình tự thời gian rõ ràng, mỗi hình thể hiện một sự kiện'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-md", children: _jsx(ListChecks, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "K\u1EC3 c\u00E2u chuy\u1EC7n theo h\u00ECnh" }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "H\u1ECDc sinh nh\u00ECn h\u00ECnh \u1EA3nh v\u00E0 k\u1EC3 l\u1EA1i c\u00E2u chuy\u1EC7n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !watchedAudioUrl || watchedExpectedAnswers.filter((a) => a.trim()).length === 0, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Form, { ...form, children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-fuchsia-500 to-pink-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", 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-purple-500 to-fuchsia-600 shadow-md", children: _jsx(BookOpen, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "H\u00ECnh \u1EA3nh c\u00E2u chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-gray-500", children: "Th\u00EAm h\u00ECnh \u1EA3nh theo th\u1EE9 t\u1EF1 \u2014 H\u1ECDc sinh s\u1EBD nh\u00ECn h\u00ECnh v\u00E0 k\u1EC3 l\u1EA1i c\u00E2u chuy\u1EC7n" })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ${uploadedCount > 0
-                                                        ? 'bg-green-100 text-green-700 border border-green-200'
-                                                        : 'bg-orange-100 text-orange-600 border border-orange-200'}`, children: [uploadedCount, " \u1EA3nh"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addImage, className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u1EA3nh"] })] })] }) }), _jsx(CardContent, { children: _jsx(FormField, { control: control, name: "images", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: watchedImages.map((imgUrl, index) => (_jsxs(Card, { className: "border border-gray-200", children: [_jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-semibold text-gray-600 flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100 text-purple-700 text-xs font-bold", children: index + 1 }), "\u1EA2nh ", index + 1] }), _jsxs("div", { className: "flex items-center gap-1", children: [imgUrl && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => clearImage(index), className: "h-7 w-7 rounded-full text-orange-400 hover:text-orange-600 hover:bg-orange-50", title: "X\u00F3a \u1EA3nh", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5" }) })), watchedImages.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeImage(index), className: "h-7 w-7 rounded-full text-red-400 hover:text-red-600 hover:bg-red-50", title: "X\u00F3a slot", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }) }), _jsxs(CardContent, { className: "space-y-2 px-4 pb-4", children: [imgUrl ? (_jsx(ImagePreview, { imageUrl: imgUrl, index: index })) : (_jsx(FileUpload, { id: `story-img-${index}`, label: "", accept: "image/*", value: "", onChange: (url) => handleImageChange(index, url), placeholder: `Upload ảnh ${index + 1}`, maxSize: 5, autoUpload: true, prefix: "questions/story-images" })), form.formState.errors?.images?.[index] && (_jsxs("p", { className: "text-sm font-medium text-destructive", children: ["Vui l\u00F2ng t\u1EA3i l\u00EAn \u1EA3nh ", index + 1] }))] })] }, index))) }), form.formState.errors?.images?.message && (_jsx(FormMessage, {}))] })) }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(Mic, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi: K\u1EC3 c\u00E2u chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nghe audio, nh\u00ECn c\u00E1c h\u00ECnh \u1EA3nh v\u00E0 m\u00F4 t\u1EA3 c\u00E2u chuy\u1EC7n b\u1EB1ng l\u1EDDi" })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsx("div", { className: "flex-1", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.formState.errors?.points?.message }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "File Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: "audio-story-images", label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", 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-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsx("div", { children: _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n mong mu\u1ED1n (", watchedExpectedAnswers.filter((a) => a.trim()).length, ")"] }) })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Nh\u1EADp c\u00E1c c\u00E2u tr\u1EA3 l\u1EDDi mong mu\u1ED1n. C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n n\u1EBFu c\u00F3 nhi\u1EC1u c\u00E1ch tr\u1EA3 l\u1EDDi \u0111\u00FAng." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m th\u1EE7 c\u00F4ng:" }), " Gi\u00E1o vi\u00EAn d\u00F9ng c\u00E1c \u0111\u00E1p \u00E1n n\u00E0y l\u00E0m tham kh\u1EA3o \u0111\u1EC3 ch\u1EA5m \u0111i\u1EC3m."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng (AI):" }), " H\u1EC7 th\u1ED1ng d\u00F9ng AI so s\u00E1nh gi\u1ECDng n\u00F3i c\u1EE7a h\u1ECDc sinh v\u1EDBi c\u00E1c \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m."] })] })] }), _jsxs("div", { className: "space-y-3", children: [watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `VD: ${index === 0 ? 'First, the boy went to the park.' : 'Then he saw a dog and played with it.'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", 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-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none", rows: 3 }) })] })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ListChecks, { className: "h-3.5 w-3.5" }), title: "K\u1EC3 c\u00E2u chuy\u1EC7n theo h\u00ECnh", points: {
+                        value: watchedPoints,
+                        onValueChange: (value) => form.setValue('points', value, { shouldValidate: true }),
+                        error: form.formState.errors?.points?.message,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: !watchedAudioUrl || watchedExpectedAnswers.filter((a) => a.trim()).length === 0,
+                    } }), contentClassName: "hidden", children: null }), _jsxs(Form, { ...form, children: [_jsx(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "H\u00ECnh \u1EA3nh c\u00E2u chuy\u1EC7n" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ${uploadedCount > 0
+                                                ? 'bg-green-100 text-green-700 border border-green-200'
+                                                : 'bg-orange-100 text-orange-600 border border-orange-200'}`, children: [uploadedCount, " \u1EA3nh"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addImage, className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u1EA3nh"] })] })] }), children: _jsx(FormField, { control: control, name: "images", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: watchedImages.map((imgUrl, index) => (_jsxs(Card, { className: "border border-gray-200", children: [_jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-semibold text-gray-600 flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100 text-purple-700 text-xs font-bold", children: index + 1 }), "\u1EA2nh ", index + 1] }), _jsxs("div", { className: "flex items-center gap-1", children: [imgUrl && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => clearImage(index), className: "h-7 w-7 rounded-full text-orange-400 hover:text-orange-600 hover:bg-orange-50", title: "X\u00F3a \u1EA3nh", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5" }) })), watchedImages.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeImage(index), className: "h-7 w-7 rounded-full text-red-400 hover:text-red-600 hover:bg-red-50", title: "X\u00F3a slot", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }) }), _jsxs(CardContent, { className: "space-y-2 px-4 pb-4", children: [imgUrl ? (_jsx(ImagePreview, { imageUrl: imgUrl, index: index })) : (_jsx(FileUpload, { id: `story-img-${index}`, label: "", accept: "image/*", value: "", onChange: (url) => handleImageChange(index, url), placeholder: `Upload ảnh ${index + 1}`, maxSize: 5, autoUpload: true, prefix: "questions/story-images" })), form.formState.errors?.images?.[index] && (_jsxs("p", { className: "text-sm font-medium text-destructive", children: ["Vui l\u00F2ng t\u1EA3i l\u00EAn \u1EA3nh ", index + 1] }))] })] }, index))) }), form.formState.errors?.images?.message && (_jsx(FormMessage, {}))] })) }) }), _jsx(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(Mic, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi: K\u1EC3 c\u00E2u chuy\u1EC7n" })] }), children: _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "File Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: "audio-story-images", label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] }) }), _jsxs(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100", children: _jsx(MessageSquareText, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("p", { className: "text-sm font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n mong mu\u1ED1n (", watchedExpectedAnswers.filter((a) => a.trim()).length, ")"] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Nh\u1EADp c\u00E1c c\u00E2u tr\u1EA3 l\u1EDDi mong mu\u1ED1n. C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n n\u1EBFu c\u00F3 nhi\u1EC1u c\u00E1ch tr\u1EA3 l\u1EDDi \u0111\u00FAng." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m th\u1EE7 c\u00F4ng:" }), " Gi\u00E1o vi\u00EAn d\u00F9ng c\u00E1c \u0111\u00E1p \u00E1n n\u00E0y l\u00E0m tham kh\u1EA3o \u0111\u1EC3 ch\u1EA5m \u0111i\u1EC3m."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng (AI):" }), " H\u1EC7 th\u1ED1ng d\u00F9ng AI so s\u00E1nh gi\u1ECDng n\u00F3i c\u1EE7a h\u1ECDc sinh v\u1EDBi c\u00E1c \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m."] })] })] }), _jsxs("div", { className: "space-y-3", children: [watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `VD: ${index === 0 ? 'First, the boy went to the park.' : 'Then he saw a dog and played with it.'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] })] }), _jsx(CompactExplanationToggle, { value: watchedExplanation || '', onValueChange: (value) => form.setValue('explanation', value, { shouldValidate: true }), defaultVisible: Boolean(watchedExplanation) })] })] }));
 }

package/dist/components/questions/types/match-by-writing-answer/MatchByWritingAnswerClient.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent } from '../../../../components/ui/card';
 import { Input } from '../../../../components/ui/input';
 import { Label } from '../../../../components/ui/label';
-import { CheckCircle2, XCircle, BookOpen } from 'lucide-react';
+import { CheckCircle2, XCircle, BookOpen, Grid3X3 } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { useState } from 'react';
 function OptionCard({ option }) {
@@ -27,7 +27,7 @@ export function MatchByWritingAnswerClient({ questionData, onSubmit, isReviewMod
     const isCorrect = isReviewMode && userAnswer !== undefined
         ? userAnswer.trim().toLowerCase() === questionData.correctAnswer.trim().toLowerCase()
         : undefined;
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-500" }), _jsxs(CardContent, { className: "p-6 space-y-6", children: [questionData.options && questionData.options.length > 0 && (_jsxs("div", { className: "rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-purple-700", children: "C\u00E1c l\u1EF1a ch\u1ECDn:" }), _jsx("div", { className: `grid gap-3 ${questionData.options.some((o) => o.imageUrl) ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4' : 'grid-cols-1 sm:grid-cols-2'}`, children: questionData.options.map((option, index) => (_jsx(OptionCard, { option: option }, index))) })] })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold text-amber-700 uppercase tracking-wide", children: "Example" })] })), _jsxs("div", { className: "flex items-center gap-4", children: [(questionImageUrl || questionData.imageUrl) ? (_jsx("div", { className: "relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm", children: _jsx("img", { src: questionImageUrl || questionData.imageUrl, alt: questionData.question, className: "h-full w-full object-contain" }) })) : null, _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: questionData.question }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Input, { value: displayedAnswer, onChange: (e) => {
+    return (_jsxs(Card, { className: "overflow-hidden border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-teal-500 to-cyan-600 text-white", children: _jsx(Grid3X3, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Gh\u00E9p \u0111\u00E1p \u00E1n b\u1EB1ng c\u00E1ch vi\u1EBFt" })] }) }), _jsxs(CardContent, { className: "space-y-3 p-3", children: [questionData.options && questionData.options.length > 0 && (_jsxs("div", { className: "rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-purple-700", children: "C\u00E1c l\u1EF1a ch\u1ECDn:" }), _jsx("div", { className: `grid gap-3 ${questionData.options.some((o) => o.imageUrl) ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4' : 'grid-cols-1 sm:grid-cols-2'}`, children: questionData.options.map((option, index) => (_jsx(OptionCard, { option: option }, index))) })] })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold text-amber-700 uppercase tracking-wide", children: "Example" })] })), _jsxs("div", { className: "flex items-center gap-4", children: [(questionImageUrl || questionData.imageUrl) ? (_jsx("div", { className: "relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm", children: _jsx("img", { src: questionImageUrl || questionData.imageUrl, alt: questionData.question, className: "h-full w-full object-contain" }) })) : null, _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: questionData.question }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Input, { value: displayedAnswer, onChange: (e) => {
                                                             setAnswer(e.target.value);
                                                             onSubmit?.(e.target.value);
                                                         }, placeholder: "Vi\u1EBFt \u0111\u00E1p \u00E1n...", disabled: isReviewMode || isExample, className: `max-w-xs border-2 text-lg font-medium ${isReviewMode