@octo-cyber/quiz-engine 0.5.0

package/web/pages/PapersPage.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { Plus, RefreshCw, FileText, Eye } 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 { paperApi } from '../services/paper-service'
+import type { QuizPaper } from '../types/quiz'
+
+const statusVariant: Record<string, 'default' | 'secondary' | 'outline'> = {
+  DRAFT: 'secondary',
+  PUBLISHED: 'default',
+  ARCHIVED: 'outline',
+}
+
+export default function PapersPage() {
+  const t = useTranslations('quiz.paper')
+  const tc = useTranslations('common')
+
+  const [items, setItems] = useState<QuizPaper[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(true)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState({ title: '', description: '', passingScore: 60, timeLimit: 0 })
+
+  const pageSize = 20
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await paperApi.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])
+
+  const handleCreate = async () => {
+    if (!form.title.trim()) { toast.error(t('titleRequired')); return }
+    setSaving(true)
+    try {
+      await paperApi.create(form)
+      toast.success(t('createSuccess'))
+      setCreateOpen(false)
+      setForm({ title: '', description: '', passingScore: 60, timeLimit: 0 })
+      await loadData()
+    } catch {
+      toast.error(t('createFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handlePublish = async (id: string) => {
+    try {
+      await paperApi.update(id, { status: 'PUBLISHED' })
+      toast.success(t('publishSuccess'))
+      await loadData()
+    } catch {
+      toast.error(t('publishFailed'))
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await paperApi.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 lg:grid-cols-3">
+          {items.map((paper) => (
+            <Card key={paper.id} className="hover:shadow-md transition-shadow 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">
+                  <FileText className="h-5 w-5 text-primary" />
+                  <CardTitle className="text-base">{paper.title}</CardTitle>
+                </div>
+                <Badge variant={statusVariant[paper.status] ?? 'outline'}>
+                  {t(`statuses.${paper.status.toLowerCase()}`)}
+                </Badge>
+              </CardHeader>
+              <CardContent>
+                {paper.description && (
+                  <p className="text-sm text-muted-foreground mb-3 line-clamp-2">{paper.description}</p>
+                )}
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground mb-3">
+                  <span>{t('totalScore')}: <strong>{paper.totalScore}</strong></span>
+                  <span>{t('passingScore')}: <strong>{paper.passingScore}</strong></span>
+                  <span>{t('timeLimit')}: <strong>{paper.timeLimit > 0 ? `${paper.timeLimit}min` : tc('unlimited')}</strong></span>
+                </div>
+                <div className="flex gap-2">
+                  {paper.status === 'DRAFT' && (
+                    <Button size="sm" variant="outline" onClick={() => handlePublish(paper.id)}>
+                      {t('publish')}
+                    </Button>
+                  )}
+                  <Button size="sm" variant="ghost" className="text-destructive hover:text-destructive"
+                    onClick={() => handleDelete(paper.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>
+          <DialogHeader><DialogTitle>{t('createTitle')}</DialogTitle></DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>{t('col.title')}</Label>
+              <Input placeholder={t('titlePlaceholder')} value={form.title}
+                onChange={(e) => setForm({ ...form, title: e.target.value })} />
+            </div>
+            <div className="space-y-2">
+              <Label>{t('col.description')}</Label>
+              <Textarea rows={3} 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('passingScore')}</Label>
+                <Input type="number" min={0} value={form.passingScore}
+                  onChange={(e) => setForm({ ...form, passingScore: Number(e.target.value) })} />
+              </div>
+              <div className="space-y-2">
+                <Label>{t('timeLimit')} (min, 0={tc('unlimited')})</Label>
+                <Input type="number" min={0} value={form.timeLimit}
+                  onChange={(e) => setForm({ ...form, timeLimit: Number(e.target.value) })} />
+              </div>
+            </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>
+  )
+}

package/web/pages/QuestionBankPage.tsx

@@ -0,0 +1,263 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { Plus, RefreshCw, Search, BookOpen, Filter } 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 { Input } from '@octo-cyber/ui/components/ui/input'
+import { Card, CardContent } from '@octo-cyber/ui/components/ui/card'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@octo-cyber/ui/components/ui/select'
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from '@octo-cyber/ui/components/ui/dialog'
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@octo-cyber/ui/components/ui/table'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+
+import { questionApi } from '../services/question-service'
+import { categoryApi } from '../services/category-service'
+import type { QuizQuestion, QuizCategory, QuestionType } from '../types/quiz'
+
+const QUESTION_TYPES: QuestionType[] = ['SINGLE_CHOICE', 'MULTIPLE_CHOICE', 'TRUE_FALSE', 'FILL_BLANK', 'ESSAY']
+const DIFFICULTIES = [1, 2, 3, 4, 5]
+
+const difficultyLabel: Record<number, string> = {
+  1: '★', 2: '★★', 3: '★★★', 4: '★★★★', 5: '★★★★★',
+}
+
+export default function QuestionBankPage() {
+  const t = useTranslations('quiz.question')
+  const tc = useTranslations('common')
+
+  const [items, setItems] = useState<QuizQuestion[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [typeFilter, setTypeFilter] = useState('all')
+  const [categoryFilter, setCategoryFilter] = useState('all')
+  const [difficultyFilter, setDifficultyFilter] = useState('all')
+  const [categories, setCategories] = useState<QuizCategory[]>([])
+  const [loading, setLoading] = useState(true)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<Partial<QuizQuestion>>({ type: 'SINGLE_CHOICE', difficulty: 3, defaultScore: 1 })
+
+  const pageSize = 20
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params: Record<string, string> = { page: String(page), pageSize: String(pageSize) }
+      if (search) params.search = search
+      if (typeFilter !== 'all') params.type = typeFilter
+      if (categoryFilter !== 'all') params.categoryId = categoryFilter
+      if (difficultyFilter !== 'all') params.difficulty = difficultyFilter
+      const res = await questionApi.list(params)
+      setItems(res.items)
+      setTotal(res.total)
+    } catch {
+      toast.error(tc('loadDataFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [page, search, typeFilter, categoryFilter, difficultyFilter, tc])
+
+  useEffect(() => { loadData() }, [loadData])
+
+  useEffect(() => {
+    categoryApi.list().then(setCategories).catch(() => {})
+  }, [])
+
+  const handleCreate = async () => {
+    setSaving(true)
+    try {
+      await questionApi.create(form)
+      toast.success(t('createSuccess'))
+      setCreateOpen(false)
+      setForm({ type: 'SINGLE_CHOICE', difficulty: 3, defaultScore: 1 })
+      await loadData()
+    } catch {
+      toast.error(t('createFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await questionApi.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>
+
+      <Card>
+        <CardContent className="pt-6">
+          <div className="mb-4 flex flex-wrap gap-3">
+            <div className="relative flex-1 min-w-48">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input className="pl-9" placeholder={t('searchPlaceholder')} value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1) }} />
+            </div>
+            <Select value={typeFilter} onValueChange={(v) => { setTypeFilter(v); setPage(1) }}>
+              <SelectTrigger className="w-40">
+                <SelectValue placeholder={t('filterType')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{tc('all')}</SelectItem>
+                {QUESTION_TYPES.map((qt) => (
+                  <SelectItem key={qt} value={qt}>{t(`types.${qt.toLowerCase()}`)}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select value={categoryFilter} onValueChange={(v) => { setCategoryFilter(v); setPage(1) }}>
+              <SelectTrigger className="w-40">
+                <SelectValue placeholder={t('filterCategory')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{tc('all')}</SelectItem>
+                {categories.map((c) => (
+                  <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select value={difficultyFilter} onValueChange={(v) => { setDifficultyFilter(v); setPage(1) }}>
+              <SelectTrigger className="w-36">
+                <SelectValue placeholder={t('filterDifficulty')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{tc('all')}</SelectItem>
+                {DIFFICULTIES.map((d) => (
+                  <SelectItem key={d} value={String(d)}>{difficultyLabel[d]}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-16">{t('col.type')}</TableHead>
+                <TableHead>{t('col.content')}</TableHead>
+                <TableHead className="w-24">{t('col.difficulty')}</TableHead>
+                <TableHead className="w-20">{t('col.score')}</TableHead>
+                <TableHead className="w-20">{t('col.useCount')}</TableHead>
+                <TableHead className="w-32">{tc('actions')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow><TableCell colSpan={6} className="text-center py-8 text-muted-foreground">{tc('loading')}</TableCell></TableRow>
+              ) : items.length === 0 ? (
+                <TableRow><TableCell colSpan={6} className="text-center py-8 text-muted-foreground">{t('noData')}</TableCell></TableRow>
+              ) : items.map((q) => (
+                <TableRow key={q.id}>
+                  <TableCell>
+                    <Badge variant="outline">{t(`types.${q.type.toLowerCase()}`)}</Badge>
+                  </TableCell>
+                  <TableCell className="max-w-xs truncate">{q.content}</TableCell>
+                  <TableCell>{difficultyLabel[q.difficulty]}</TableCell>
+                  <TableCell>{q.defaultScore}</TableCell>
+                  <TableCell>{q.useCount}</TableCell>
+                  <TableCell>
+                    <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive"
+                      onClick={() => handleDelete(q.id)}>
+                      {tc('delete')}
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          {totalPages > 1 && (
+            <div className="mt-4 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>
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader><DialogTitle>{t('createTitle')}</DialogTitle></DialogHeader>
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>{t('col.type')}</Label>
+                <Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v as QuestionType })}>
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {QUESTION_TYPES.map((qt) => (
+                      <SelectItem key={qt} value={qt}>{t(`types.${qt.toLowerCase()}`)}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>{t('col.difficulty')}</Label>
+                <Select value={String(form.difficulty ?? 3)} onValueChange={(v) => setForm({ ...form, difficulty: Number(v) })}>
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {DIFFICULTIES.map((d) => <SelectItem key={d} value={String(d)}>{difficultyLabel[d]}</SelectItem>)}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>{t('col.content')}</Label>
+              <Textarea rows={4} placeholder={t('contentPlaceholder')}
+                value={form.content ?? ''}
+                onChange={(e) => setForm({ ...form, content: e.target.value })} />
+            </div>
+            <div className="space-y-2">
+              <Label>{t('col.score')}</Label>
+              <Input type="number" min={0} step={0.5}
+                value={form.defaultScore ?? 1}
+                onChange={(e) => setForm({ ...form, defaultScore: Number(e.target.value) })} />
+            </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>
+  )
+}

package/web/pages/StatisticsPage.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { BarChart2, Trophy, Users, TrendingUp } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import { Card, CardContent, CardHeader, CardTitle } from '@octo-cyber/ui/components/ui/card'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@octo-cyber/ui/components/ui/select'
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@octo-cyber/ui/components/ui/table'
+
+import { statisticsApi } from '../services/statistics-service'
+import { examApi } from '../services/exam-service'
+import type { ExamStats, RankingEntry, QuizExam } from '../types/quiz'
+
+export default function StatisticsPage() {
+  const t = useTranslations('quiz.statistics')
+  const tc = useTranslations('common')
+
+  const [exams, setExams] = useState<QuizExam[]>([])
+  const [selectedExamId, setSelectedExamId] = useState('')
+  const [stats, setStats] = useState<ExamStats | null>(null)
+  const [ranking, setRanking] = useState<RankingEntry[]>([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    examApi.list({ pageSize: '100' }).then((r) => {
+      setExams(r.items)
+      if (r.items.length > 0) setSelectedExamId(r.items[0].id)
+    }).catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    if (!selectedExamId) return
+    setLoading(true)
+    Promise.all([
+      statisticsApi.getExamStats(selectedExamId),
+      statisticsApi.getRanking(selectedExamId),
+    ]).then(([s, r]) => {
+      setStats(s)
+      setRanking(r)
+    }).catch(() => {
+      toast.error(tc('loadDataFailed'))
+    }).finally(() => setLoading(false))
+  }, [selectedExamId, tc])
+
+  const kpis = stats ? [
+    { label: t('totalAttempts'), value: stats.totalAttempts, icon: Users, color: 'text-blue-500' },
+    { label: t('gradedAttempts'), value: stats.gradedAttempts, icon: BarChart2, color: 'text-green-500' },
+    { label: t('averageScore'), value: stats.averageScore.toFixed(1), icon: TrendingUp, color: 'text-yellow-500' },
+    { label: t('passRate'), value: `${(stats.passRate * 100).toFixed(0)}%`, icon: Trophy, color: 'text-purple-500' },
+  ] : []
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <Select value={selectedExamId} onValueChange={setSelectedExamId}>
+          <SelectTrigger className="w-64">
+            <SelectValue placeholder={t('selectExam')} />
+          </SelectTrigger>
+          <SelectContent>
+            {exams.map((e) => <SelectItem key={e.id} value={e.id}>{e.title}</SelectItem>)}
+          </SelectContent>
+        </Select>
+      </PageHeader>
+
+      {loading ? (
+        <div className="text-center py-12 text-muted-foreground">{tc('loading')}</div>
+      ) : !stats ? (
+        <div className="text-center py-12 text-muted-foreground">{t('selectExamHint')}</div>
+      ) : (
+        <>
+          <div className="grid gap-4 grid-cols-2 md:grid-cols-4">
+            {kpis.map((kpi) => (
+              <Card key={kpi.label} className="dark:bg-zinc-900 dark:border-zinc-800">
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-3">
+                    <kpi.icon className={`h-8 w-8 ${kpi.color}`} />
+                    <div>
+                      <p className="text-sm text-muted-foreground">{kpi.label}</p>
+                      <p className="text-2xl font-bold">{kpi.value}</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <Card className="dark:bg-zinc-900 dark:border-zinc-800">
+              <CardHeader><CardTitle className="text-base">{t('scoreDistribution')}</CardTitle></CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {stats.scoreDistribution.map((d) => {
+                    const maxCount = Math.max(...stats.scoreDistribution.map((x) => x.count), 1)
+                    const pct = (d.count / maxCount) * 100
+                    return (
+                      <div key={d.range} className="flex items-center gap-3">
+                        <span className="text-sm w-16 shrink-0">{d.range}</span>
+                        <div className="flex-1 bg-muted rounded-full h-4 overflow-hidden">
+                          <div
+                            className="h-full bg-primary transition-all duration-500"
+                            style={{ width: `${pct}%` }}
+                          />
+                        </div>
+                        <span className="text-sm w-8 text-right">{d.count}</span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="dark:bg-zinc-900 dark:border-zinc-800">
+              <CardHeader>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Trophy className="h-4 w-4 text-yellow-500" />
+                  {t('ranking')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {ranking.length === 0 ? (
+                  <p className="text-sm text-muted-foreground text-center py-4">{t('noRanking')}</p>
+                ) : (
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-16">{t('rank')}</TableHead>
+                        <TableHead>{t('userId')}</TableHead>
+                        <TableHead className="w-20 text-right">{t('score')}</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {ranking.map((entry) => (
+                        <TableRow key={entry.userId}>
+                          <TableCell>
+                            {entry.rank <= 3 ? (
+                              <Badge className={entry.rank === 1 ? 'bg-yellow-500' : entry.rank === 2 ? 'bg-gray-400' : 'bg-amber-600'}>
+                                #{entry.rank}
+                              </Badge>
+                            ) : `#${entry.rank}`}
+                          </TableCell>
+                          <TableCell className="font-mono text-sm">{entry.userId.slice(0, 8)}...</TableCell>
+                          <TableCell className="text-right font-bold">{entry.score}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          <Card className="dark:bg-zinc-900 dark:border-zinc-800">
+            <CardContent className="pt-6">
+              <div className="flex flex-wrap gap-6 text-sm">
+                <div>
+                  <span className="text-muted-foreground">{t('highestScore')}: </span>
+                  <strong className="text-lg">{stats.highestScore}</strong>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">{t('lowestScore')}: </span>
+                  <strong className="text-lg">{stats.lowestScore}</strong>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  )
+}