@octo-cyber/quiz-engine 0.5.0

package/web/pages/ExamRoomPage.tsx

@@ -0,0 +1,289 @@
+'use client'
+
+import { useEffect, useState, useCallback, useRef } from 'react'
+import { ChevronLeft, ChevronRight, Send, Clock } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@octo-cyber/ui/components/ui/card'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { Progress } from '@octo-cyber/ui/components/ui/progress'
+import { RadioGroup, RadioGroupItem } from '@octo-cyber/ui/components/ui/radio-group'
+import { Checkbox } from '@octo-cyber/ui/components/ui/checkbox'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import {
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from '@octo-cyber/ui/components/ui/alert-dialog'
+
+import { attemptApi } from '../services/attempt-service'
+import { examApi } from '../services/exam-service'
+import { paperApi } from '../services/paper-service'
+import { useQuizStore } from '../stores/quiz-store'
+import type { QuizExam, PaperWithQuestions, QuizAttempt } from '../types/quiz'
+
+interface ExamRoomPageProps {
+  examId: string
+}
+
+export default function ExamRoomPage({ examId }: ExamRoomPageProps) {
+  const t = useTranslations('quiz.examRoom')
+  const tc = useTranslations('common')
+
+  const { draftAnswers, setDraftAnswer, clearDraftAnswers, setCurrentAttemptId } = useQuizStore()
+
+  const [exam, setExam] = useState<QuizExam | null>(null)
+  const [detail, setDetail] = useState<PaperWithQuestions | null>(null)
+  const [attempt, setAttempt] = useState<QuizAttempt | null>(null)
+  const [currentIdx, setCurrentIdx] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [elapsed, setElapsed] = useState(0)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  useEffect(() => {
+    const init = async () => {
+      setLoading(true)
+      try {
+        const e = await examApi.get(examId)
+        setExam(e)
+        const d = await paperApi.getWithQuestions(e.paperId)
+        setDetail(d)
+        const a = await attemptApi.start(examId)
+        setAttempt(a)
+        setCurrentAttemptId(a.id)
+      } catch (err) {
+        toast.error(t('startFailed'))
+      } finally {
+        setLoading(false)
+      }
+    }
+    init()
+    return () => { clearDraftAnswers() }
+  }, [examId])
+
+  useEffect(() => {
+    timerRef.current = setInterval(() => setElapsed((prev) => prev + 1), 1000)
+    return () => { if (timerRef.current) clearInterval(timerRef.current) }
+  }, [])
+
+  const formatTime = (secs: number) => {
+    const m = Math.floor(secs / 60).toString().padStart(2, '0')
+    const s = (secs % 60).toString().padStart(2, '0')
+    return `${m}:${s}`
+  }
+
+  const handleSubmit = async () => {
+    if (!attempt) return
+    setSubmitting(true)
+    try {
+      const answers = Object.entries(draftAnswers).map(([questionId, userAnswer]) => ({
+        questionId,
+        userAnswer,
+      }))
+      const result = await attemptApi.submit(attempt.id, answers, elapsed)
+      setAttempt(result)
+      clearDraftAnswers()
+      if (timerRef.current) clearInterval(timerRef.current)
+      toast.success(t('submitSuccess', { score: result.totalScore }))
+    } catch {
+      toast.error(t('submitFailed'))
+    } finally {
+      setSubmitting(false)
+      setConfirmOpen(false)
+    }
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-64 text-muted-foreground">{tc('loading')}</div>
+  }
+
+  if (!exam || !detail) {
+    return <div className="text-center py-12 text-muted-foreground">{t('loadFailed')}</div>
+  }
+
+  if (attempt?.status === 'SUBMITTED' || attempt?.status === 'GRADED') {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh] space-y-4">
+        <div className="text-6xl">✅</div>
+        <h2 className="text-2xl font-bold">{t('submitted')}</h2>
+        <p className="text-muted-foreground">{t('yourScore')}: <strong className="text-2xl">{attempt.totalScore}</strong></p>
+        {attempt.isPassed ? (
+          <Badge className="text-lg px-4 py-1">{t('passed')}</Badge>
+        ) : (
+          <Badge variant="destructive" className="text-lg px-4 py-1">{t('failed')}</Badge>
+        )}
+      </div>
+    )
+  }
+
+  const questions = detail.questions
+  const current = questions[currentIdx]
+  const answeredCount = Object.keys(draftAnswers).length
+  const progress = (answeredCount / questions.length) * 100
+
+  return (
+    <div className="space-y-4 max-w-3xl mx-auto">
+      <div className="flex items-center justify-between">
+        <PageHeader title={exam.title} description={`${t('question')} ${currentIdx + 1} / ${questions.length}`} />
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1 text-sm text-muted-foreground">
+            <Clock className="h-4 w-4" />
+            <span>{formatTime(elapsed)}</span>
+          </div>
+          <Button size="sm" variant="default" onClick={() => setConfirmOpen(true)}>
+            <Send className="mr-1 h-4 w-4" />
+            {t('submit')}
+          </Button>
+        </div>
+      </div>
+
+      <Progress value={progress} className="h-2" />
+      <p className="text-xs text-muted-foreground">{t('answered', { count: answeredCount, total: questions.length })}</p>
+
+      {current && (
+        <Card className="dark:bg-zinc-900 dark:border-zinc-800">
+          <CardHeader>
+            <div className="flex items-start gap-3">
+              <Badge variant="outline" className="shrink-0">{currentIdx + 1}</Badge>
+              <div className="space-y-1">
+                <div className="flex gap-2">
+                  <Badge variant="secondary">
+                    {t(`types.${current.questionDetail.type.toLowerCase()}`)}
+                  </Badge>
+                  <span className="text-sm text-muted-foreground">{t('score')}: {current.score}</span>
+                </div>
+                <CardTitle className="text-base font-normal leading-relaxed">
+                  {current.questionDetail.content}
+                </CardTitle>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <QuestionInput
+              question={current.questionDetail}
+              value={draftAnswers[current.questionId]}
+              onChange={(v) => setDraftAnswer(current.questionId, v)}
+              t={t}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="flex justify-between">
+        <Button variant="outline" disabled={currentIdx <= 0} onClick={() => setCurrentIdx(currentIdx - 1)}>
+          <ChevronLeft className="mr-1 h-4 w-4" />
+          {tc('previous')}
+        </Button>
+        <div className="flex flex-wrap gap-1">
+          {questions.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => setCurrentIdx(i)}
+              className={`w-8 h-8 text-xs rounded border font-medium transition-colors ${
+                i === currentIdx ? 'bg-primary text-primary-foreground border-primary' :
+                draftAnswers[questions[i].questionId] !== undefined ? 'bg-green-100 text-green-700 border-green-300 dark:bg-green-900 dark:text-green-300' :
+                'bg-background dark:bg-zinc-900 hover:bg-muted'
+              }`}
+            >
+              {i + 1}
+            </button>
+          ))}
+        </div>
+        <Button variant="outline" disabled={currentIdx >= questions.length - 1} onClick={() => setCurrentIdx(currentIdx + 1)}>
+          {tc('next')}
+          <ChevronRight className="ml-1 h-4 w-4" />
+        </Button>
+      </div>
+
+      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('confirmSubmitTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('confirmSubmitDesc', { answered: answeredCount, total: questions.length })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{tc('cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleSubmit} disabled={submitting}>
+              {submitting ? tc('saving') : t('submit')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}
+
+import type { QuizQuestion } from '../types/quiz'
+
+function QuestionInput({
+  question,
+  value,
+  onChange,
+  t,
+}: {
+  question: QuizQuestion
+  value: string | string[] | undefined
+  onChange: (v: string | string[]) => void
+  t: (key: string, options?: Record<string, unknown>) => string
+}) {
+  if (question.type === 'SINGLE_CHOICE' || question.type === 'TRUE_FALSE') {
+    const options = question.type === 'TRUE_FALSE'
+      ? [{ key: 'true', text: t('trueLabel') }, { key: 'false', text: t('falseLabel') }]
+      : (question.options ?? [])
+    return (
+      <RadioGroup value={String(value ?? '')} onValueChange={onChange}>
+        {options.map((opt) => (
+          <div key={opt.key} className="flex items-center gap-3 py-2 px-3 rounded hover:bg-muted dark:hover:bg-zinc-800">
+            <RadioGroupItem value={opt.key} id={`opt-${opt.key}`} />
+            <Label htmlFor={`opt-${opt.key}`} className="cursor-pointer flex-1">
+              <span className="font-medium mr-2">{opt.key.toUpperCase()}.</span>{opt.text}
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+    )
+  }
+
+  if (question.type === 'MULTIPLE_CHOICE') {
+    const selected = Array.isArray(value) ? value : (value ? [value] : [])
+    const options = question.options ?? []
+    return (
+      <div className="space-y-2">
+        {options.map((opt) => (
+          <div key={opt.key} className="flex items-center gap-3 py-2 px-3 rounded hover:bg-muted dark:hover:bg-zinc-800">
+            <Checkbox
+              id={`opt-${opt.key}`}
+              checked={selected.includes(opt.key)}
+              onCheckedChange={(checked) => {
+                const next = checked
+                  ? [...selected, opt.key]
+                  : selected.filter((k) => k !== opt.key)
+                onChange(next)
+              }}
+            />
+            <Label htmlFor={`opt-${opt.key}`} className="cursor-pointer flex-1">
+              <span className="font-medium mr-2">{opt.key.toUpperCase()}.</span>{opt.text}
+            </Label>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <Textarea
+      rows={6}
+      placeholder={question.type === 'FILL_BLANK' ? t('fillBlankPlaceholder') : t('essayPlaceholder')}
+      value={typeof value === 'string' ? value : ''}
+      onChange={(e) => onChange(e.target.value)}
+      className="resize-none"
+    />
+  )
+}

package/web/pages/ExamsPage.tsx

@@ -0,0 +1,248 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { Plus, RefreshCw, PlayCircle, Clock } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@octo-cyber/ui/components/ui/card'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from '@octo-cyber/ui/components/ui/dialog'
+import { Input } from '@octo-cyber/ui/components/ui/input'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@octo-cyber/ui/components/ui/select'
+import { Switch } from '@octo-cyber/ui/components/ui/switch'
+
+import { examApi } from '../services/exam-service'
+import { paperApi } from '../services/paper-service'
+import type { QuizExam, QuizPaper } from '../types/quiz'
+
+const statusColor: Record<string, string> = {
+  DRAFT: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+  SCHEDULED: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+  ONGOING: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+  ENDED: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
+  CANCELLED: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+}
+
+export default function ExamsPage() {
+  const t = useTranslations('quiz.exam')
+  const tc = useTranslations('common')
+
+  const [items, setItems] = useState<QuizExam[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(true)
+  const [papers, setPapers] = useState<QuizPaper[]>([])
+  const [createOpen, setCreateOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState({
+    title: '', paperId: '', description: '',
+    maxAttempts: 1, shuffleQuestions: false, shuffleOptions: false, showAnswerAfterSubmit: false,
+    startTime: '', endTime: '',
+  })
+
+  const pageSize = 20
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await examApi.list({ page: String(page), pageSize: String(pageSize) })
+      setItems(res.items)
+      setTotal(res.total)
+    } catch {
+      toast.error(tc('loadDataFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [page, tc])
+
+  useEffect(() => { loadData() }, [loadData])
+
+  useEffect(() => {
+    paperApi.list({ pageSize: '100' }).then((r) => setPapers(r.items)).catch(() => {})
+  }, [])
+
+  const handleCreate = async () => {
+    if (!form.title.trim() || !form.paperId) { toast.error(t('formRequired')); return }
+    setSaving(true)
+    try {
+      await examApi.create({
+        ...form,
+        startTime: form.startTime || null as unknown as string,
+        endTime: form.endTime || null as unknown as string,
+      })
+      toast.success(t('createSuccess'))
+      setCreateOpen(false)
+      await loadData()
+    } catch {
+      toast.error(t('createFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleActivate = async (id: string, status: string) => {
+    const next = status === 'DRAFT' ? 'SCHEDULED' : status === 'SCHEDULED' ? 'ONGOING' : 'ENDED'
+    try {
+      await examApi.update(id, { status: next as QuizExam['status'] })
+      toast.success(t('statusUpdated'))
+      await loadData()
+    } catch {
+      toast.error(t('updateFailed'))
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await examApi.delete(id)
+      toast.success(t('deleteSuccess'))
+      await loadData()
+    } catch {
+      toast.error(t('deleteFailed'))
+    }
+  }
+
+  const totalPages = Math.ceil(total / pageSize)
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <Button variant="outline" size="sm" onClick={loadData} disabled={loading}>
+          <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+          {tc('refresh')}
+        </Button>
+        <Button size="sm" onClick={() => setCreateOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          {t('create')}
+        </Button>
+      </PageHeader>
+
+      {loading ? (
+        <div className="text-center py-12 text-muted-foreground">{tc('loading')}</div>
+      ) : items.length === 0 ? (
+        <div className="text-center py-12 text-muted-foreground">{t('noData')}</div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2">
+          {items.map((exam) => (
+            <Card key={exam.id} className="dark:bg-zinc-900 dark:border-zinc-800">
+              <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2">
+                <div className="flex items-center gap-2">
+                  <PlayCircle className="h-5 w-5 text-primary" />
+                  <CardTitle className="text-base">{exam.title}</CardTitle>
+                </div>
+                <span className={`text-xs px-2 py-1 rounded-full font-medium ${statusColor[exam.status] ?? ''}`}>
+                  {t(`statuses.${exam.status.toLowerCase()}`)}
+                </span>
+              </CardHeader>
+              <CardContent>
+                {exam.description && (
+                  <p className="text-sm text-muted-foreground mb-2 line-clamp-1">{exam.description}</p>
+                )}
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground mb-3">
+                  <span className="flex items-center gap-1">
+                    <Clock className="h-3 w-3" />
+                    {exam.startTime ? new Date(exam.startTime).toLocaleString() : tc('unlimited')}
+                  </span>
+                  <span>{t('maxAttempts')}: {exam.maxAttempts === 0 ? tc('unlimited') : exam.maxAttempts}</span>
+                </div>
+                <div className="flex gap-2">
+                  {exam.status !== 'ENDED' && exam.status !== 'CANCELLED' && (
+                    <Button size="sm" variant="outline" onClick={() => handleActivate(exam.id, exam.status)}>
+                      {exam.status === 'DRAFT' ? t('schedule')
+                        : exam.status === 'SCHEDULED' ? t('start')
+                        : t('end')}
+                    </Button>
+                  )}
+                  <Button size="sm" variant="ghost" className="text-destructive hover:text-destructive"
+                    onClick={() => handleDelete(exam.id)}>
+                    {tc('delete')}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
+            {tc('pagination.previous')}
+          </Button>
+          <span className="text-sm text-muted-foreground">
+            {tc('pagination.page', { current: page, total: totalPages })}
+          </span>
+          <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
+            {tc('pagination.next')}
+          </Button>
+        </div>
+      )}
+
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader><DialogTitle>{t('createTitle')}</DialogTitle></DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>{t('col.title')}</Label>
+              <Input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
+            </div>
+            <div className="space-y-2">
+              <Label>{t('col.paper')}</Label>
+              <Select value={form.paperId} onValueChange={(v) => setForm({ ...form, paperId: v })}>
+                <SelectTrigger><SelectValue placeholder={t('selectPaper')} /></SelectTrigger>
+                <SelectContent>
+                  {papers.map((p) => <SelectItem key={p.id} value={p.id}>{p.title}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>{t('col.description')}</Label>
+              <Textarea rows={2} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>{t('startTime')}</Label>
+                <Input type="datetime-local" value={form.startTime}
+                  onChange={(e) => setForm({ ...form, startTime: e.target.value })} />
+              </div>
+              <div className="space-y-2">
+                <Label>{t('endTime')}</Label>
+                <Input type="datetime-local" value={form.endTime}
+                  onChange={(e) => setForm({ ...form, endTime: e.target.value })} />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>{t('maxAttempts')} (0={tc('unlimited')})</Label>
+              <Input type="number" min={0} value={form.maxAttempts}
+                onChange={(e) => setForm({ ...form, maxAttempts: Number(e.target.value) })} />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label>{t('shuffleQuestions')}</Label>
+              <Switch checked={form.shuffleQuestions}
+                onCheckedChange={(v) => setForm({ ...form, shuffleQuestions: v })} />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label>{t('showAnswerAfterSubmit')}</Label>
+              <Switch checked={form.showAnswerAfterSubmit}
+                onCheckedChange={(v) => setForm({ ...form, showAnswerAfterSubmit: v })} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateOpen(false)}>{tc('cancel')}</Button>
+            <Button onClick={handleCreate} disabled={saving}>
+              {saving ? tc('saving') : tc('save')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}