Admin: quiz-detail view (raw files + structured Q&A) + student raw answers

chatkit/backend/app/admin.py

@@ -14,6 +14,9 @@ from .database import (
     admin_list_students,
     delete_session,
     delete_user,
+    get_parsed_data,
+    get_quiz_results,
+    get_raw_files,
     get_schema_version,
     get_session,
     get_stats,
@@ -22,6 +25,7 @@ from .database import (
     list_all_users,
     set_user_admin,
 )
+from .storage import create_signed_url
 
 router = APIRouter(prefix="/api/admin", tags=["admin"])
 
@@ -63,6 +67,32 @@ async def admin_sessions(_admin=Depends(get_current_admin)):
     return {"sessions": await admin_list_sessions()}
 
 
+@router.get("/sessions/{session_id}")
+async def admin_session_detail(session_id: int, _admin=Depends(get_current_admin)):
+    """Full quiz detail: raw files (signed URLs), structured parsed data, results."""
+    quiz = await get_session(session_id)
+    if not quiz:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    # Group structured parsed data by type (questions / student_answers / etc.)
+    parsed = {}
+    for item in await get_parsed_data(session_id):
+        parsed[item["data_type"]] = item["structured_data"]
+
+    # Raw files with short-lived signed download URLs (None if Storage disabled/missing).
+    raw_files = []
+    for f in await get_raw_files(session_id):
+        f["download_url"] = await create_signed_url(f.get("storage_path", ""))
+        raw_files.append(f)
+
+    return {
+        "quiz": quiz,
+        "raw_files": raw_files,
+        "parsed_data": parsed,
+        "results": await get_quiz_results(session_id),
+    }
+
+
 @router.delete("/sessions/{session_id}")
 async def admin_delete_session(session_id: int, _admin=Depends(get_current_admin)):
     if not await get_session(session_id):

chatkit/backend/app/database.py

@@ -561,6 +561,24 @@ async def admin_list_students(limit: int = 500) -> list[dict]:
         return out
 
 
+async def get_quiz_results(quiz_id: int) -> list[dict]:
+    """All student results for a quiz, joined with student name (admin detail)."""
+    async with get_sessionmaker()() as db:
+        res = await db.execute(
+            select(StudentResult, Student.name, Student.id)
+            .join(Student, StudentResult.student_id == Student.id)
+            .where(StudentResult.quiz_id == quiz_id)
+            .order_by(Student.name)
+        )
+        out = []
+        for sr, name, sid in res.all():
+            d = _row(sr)
+            d["student_name"] = name
+            d["student_id"] = sid
+            out.append(d)
+        return out
+
+
 async def get_schema_version() -> Optional[str]:
     """Current Alembic migration revision applied to the DB."""
     from sqlalchemy import text

chatkit/backend/app/storage.py

@@ -62,3 +62,23 @@ async def upload_raw_file(
     safe_name = file_name.replace("/", "_") or "file"
     path = f"quiz_{quiz_id}/{data_type}/{safe_name}"
     return await run_in_threadpool(_upload_sync, path, data, content_type)
+
+
+def _signed_url_sync(path: str, expires_in: int) -> Optional[str]:
+    s = get_settings()
+    client = _client()
+    res = client.storage.from_(s.supabase_storage_bucket).create_signed_url(path, expires_in)
+    # supabase-py has used both 'signedURL' and 'signedUrl' across versions
+    if isinstance(res, dict):
+        return res.get("signedURL") or res.get("signedUrl") or res.get("signed_url")
+    return None
+
+
+async def create_signed_url(storage_path: str, expires_in: int = 3600) -> Optional[str]:
+    """Return a short-lived download URL for a stored object, or None if unavailable."""
+    if not storage_path or not storage_enabled():
+        return None
+    try:
+        return await run_in_threadpool(_signed_url_sync, storage_path, expires_in)
+    except Exception:
+        return None

chatkit/frontend/src/components/admin/AdminDashboard.tsx

@@ -43,12 +43,51 @@ interface StudentRow {
 }
 
 interface TimelineEntry {
+  quiz_id: number;
   quiz_title: string;
   quiz_subject: string | null;
   quiz_created_at: string;
   total_questions: number;
   correct_count: number;
   score: number;
+  answers: { answers?: (string | null)[] };
+}
+
+interface QuestionMeta {
+  number: number;
+  text: string;
+  options: string[];
+}
+
+interface RawFile {
+  id: number;
+  data_type: string;
+  file_name: string;
+  content_type: string;
+  size_bytes: number;
+  storage_path: string;
+  download_url: string | null;
+}
+
+interface QuizResult {
+  student_id: number;
+  student_name: string;
+  total_questions: number;
+  correct_count: number;
+  score: number;
+  answers: { answers?: (string | null)[] };
+}
+
+interface QuizDetailData {
+  quiz: { id: number; title: string; subject: string | null; status: string; created_at: string };
+  raw_files: RawFile[];
+  parsed_data: {
+    questions?: { questions: QuestionMeta[] };
+    student_answers?: { students: { name: string; id?: string; answers: { question_number: number; answer: string }[] }[] };
+    teacher_answers?: { answers: { question_number: number; correct_answer: string; explanation?: string | null }[] };
+    answer_grid?: { total_questions: number; official_answers: (string | null)[]; students: { name: string; answers: (string | null)[] }[]; questions: QuestionMeta[] };
+  };
+  results: QuizResult[];
 }
 
 const TABS: { key: Tab; label: string }[] = [
@@ -187,6 +226,11 @@ function Teachers() {
 
 function Sessions() {
   const { data, loading, error, reload } = useFetch<{ sessions: SessionRow[] }>("/api/admin/sessions");
+  const [detailId, setDetailId] = useState<number | null>(null);
+
+  if (detailId !== null) {
+    return <QuizDetail quizId={detailId} onBack={() => setDetailId(null)} />;
+  }
   if (loading) return <Spinner />;
   if (error || !data) return <ErrorBox msg={error} />;
 
@@ -207,9 +251,14 @@ function Sessions() {
           <Td>{s.report_count}</Td>
           <Td>{new Date(s.created_at).toLocaleDateString()}</Td>
           <Td>
-            <button onClick={() => remove(s)} className="text-sm text-red-400 hover:underline">
-              刪除
-            </button>
+            <div className="flex gap-3">
+              <button onClick={() => setDetailId(s.id)} className="text-sm underline text-[var(--color-primary)]">
+                查看詳情
+              </button>
+              <button onClick={() => remove(s)} className="text-sm text-red-400 hover:underline">
+                刪除
+              </button>
+            </div>
           </Td>
         </tr>
       ))}
@@ -221,12 +270,11 @@ function Students() {
   const { data, loading, error } = useFetch<{ students: StudentRow[] }>("/api/admin/students");
   const [selected, setSelected] = useState<number | null>(null);
 
-  if (loading) return <Spinner />;
-  if (error || !data) return <ErrorBox msg={error} />;
-
   if (selected !== null) {
     return <StudentDetail studentId={selected} onBack={() => setSelected(null)} />;
   }
+  if (loading) return <Spinner />;
+  if (error || !data) return <ErrorBox msg={error} />;
 
   return (
     <Table headers={["姓名", "教師", "測驗次數", "平均分數", ""]}>
@@ -252,7 +300,12 @@ function StudentDetail({ studentId, onBack }: { studentId: number; onBack: () =>
     student: { name: string };
     timeline: TimelineEntry[];
   }>(`/api/admin/students/${studentId}`);
+  const [quizId, setQuizId] = useState<number | null>(null);
+  const [openRow, setOpenRow] = useState<number | null>(null);
 
+  if (quizId !== null) {
+    return <QuizDetail quizId={quizId} onBack={() => setQuizId(null)} />;
+  }
   if (loading) return <Spinner />;
   if (error || !data) return <ErrorBox msg={error} />;
 
@@ -267,25 +320,224 @@ function StudentDetail({ studentId, onBack }: { studentId: number; onBack: () =>
       {data.timeline.length === 0 ? (
         <p className="text-[var(--color-text-muted)]">尚無成績紀錄</p>
       ) : (
-        <Table headers={["測驗", "科目", "日期", "答對", "總題數", "分數"]}>
+        <div className="space-y-3">
           {data.timeline.map((t, i) => (
-            <tr key={i} className="border-t border-[var(--color-border)]">
-              <Td>{t.quiz_title}</Td>
-              <Td>{t.quiz_subject || "—"}</Td>
-              <Td>{new Date(t.quiz_created_at).toLocaleDateString()}</Td>
-              <Td>{t.correct_count}</Td>
-              <Td>{t.total_questions}</Td>
-              <Td>
-                <span className="font-semibold text-[var(--color-primary)]">{t.score}</span>
-              </Td>
-            </tr>
+            <div key={i} className="card p-4">
+              <div className="flex flex-wrap items-center justify-between gap-2">
+                <div>
+                  <span className="font-semibold text-[var(--color-text)]">{t.quiz_title}</span>
+                  <span className="text-sm text-[var(--color-text-muted)] ml-2">
+                    {t.quiz_subject || "—"} · {new Date(t.quiz_created_at).toLocaleDateString()}
+                  </span>
+                </div>
+                <div className="flex items-center gap-4 text-sm">
+                  <span>
+                    {t.correct_count}/{t.total_questions} 答對 ·{" "}
+                    <span className="font-semibold text-[var(--color-primary)]">{t.score} 分</span>
+                  </span>
+                  <button
+                    onClick={() => setOpenRow(openRow === i ? null : i)}
+                    className="underline text-[var(--color-primary)]"
+                  >
+                    {openRow === i ? "收合作答" : "查看作答"}
+                  </button>
+                  <button onClick={() => setQuizId(t.quiz_id)} className="underline text-[var(--color-primary)]">
+                    測驗詳情
+                  </button>
+                </div>
+              </div>
+              {openRow === i && (
+                <div className="mt-3 border-t border-[var(--color-border)] pt-3">
+                  <p className="text-xs text-[var(--color-text-muted)] mb-2">
+                    原始作答資料（= 代表答對；字母為作答選項；空白為未作答）
+                  </p>
+                  <AnswerChips answers={t.answers?.answers ?? []} />
+                </div>
+              )}
+            </div>
           ))}
-        </Table>
+        </div>
       )}
     </div>
   );
 }
 
+function QuizDetail({ quizId, onBack }: { quizId: number; onBack: () => void }) {
+  const { data, loading, error } = useFetch<QuizDetailData>(`/api/admin/sessions/${quizId}`);
+  const [view, setView] = useState<"questions" | "answers" | "raw">("questions");
+
+  if (loading) return <Spinner />;
+  if (error || !data) return <ErrorBox msg={error} />;
+
+  const questions = data.parsed_data.questions?.questions ?? [];
+  const grid = data.parsed_data.answer_grid;
+  const teacher = data.parsed_data.teacher_answers?.answers ?? [];
+
+  const subTabs: { key: typeof view; label: string }[] = [
+    { key: "questions", label: `題目結構資料 (${questions.length})` },
+    { key: "answers", label: `作答結構資料 (${data.results.length})` },
+    { key: "raw", label: `原始檔案 (${data.raw_files.length})` },
+  ];
+
+  return (
+    <div>
+      <button onClick={onBack} className="text-sm text-[var(--color-text-muted)] hover:underline mb-4">
+        ← 返回
+      </button>
+      <h3 className="font-display text-xl font-semibold mb-1 text-[var(--color-text)]">
+        測驗詳情：{data.quiz.title}
+      </h3>
+      <p className="text-sm text-[var(--color-text-muted)] mb-4">
+        {data.quiz.subject || "—"} · 狀態 {data.quiz.status} ·{" "}
+        {new Date(data.quiz.created_at).toLocaleString()}
+      </p>
+
+      <div className="flex gap-2 mb-4">
+        {subTabs.map((t) => (
+          <button
+            key={t.key}
+            onClick={() => setView(t.key)}
+            className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
+              view === t.key
+                ? "bg-[var(--color-primary)] text-white"
+                : "text-[var(--color-text-muted)] border border-[var(--color-border)]"
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {view === "questions" && (
+        questions.length === 0 ? (
+          <Empty msg="尚無題目結構資料" />
+        ) : (
+          <div className="space-y-2">
+            {questions.map((q, i) => {
+              // Prefer the number-keyed teacher answer (gap-tolerant); fall back to the
+              // positional grid cell. '=' means "no authoritative key" → don't show it.
+              const rawOfficial =
+                teacher.find((a) => a.question_number === q.number)?.correct_answer ??
+                grid?.official_answers?.[q.number - 1] ??
+                null;
+              const official = rawOfficial === "=" ? null : rawOfficial;
+              return (
+                <div key={`${q.number}-${i}`} className="card p-3">
+                  <div className="flex items-start gap-2">
+                    <span className="font-semibold text-[var(--color-primary)] shrink-0">Q{q.number}</span>
+                    <div className="min-w-0">
+                      <p className="text-sm text-[var(--color-text)] whitespace-pre-wrap break-words">{q.text || "（無題目文字）"}</p>
+                      {q.options?.length > 0 && (
+                        <ul className="mt-1 text-sm text-[var(--color-text-muted)] list-disc ml-5">
+                          {q.options.map((o, j) => <li key={j}>{o}</li>)}
+                        </ul>
+                      )}
+                      {official && (
+                        <p className="mt-1 text-sm">
+                          正解：<span className="font-semibold text-[var(--color-success)]">{official}</span>
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )
+      )}
+
+      {view === "answers" && (
+        <div className="space-y-4">
+          {grid?.official_answers && (
+            <div className="card p-3">
+              <p className="text-xs text-[var(--color-text-muted)] mb-2">標準答案</p>
+              <AnswerChips answers={grid.official_answers} hideEquals />
+            </div>
+          )}
+          {data.results.length === 0 ? (
+            <Empty msg="尚無學生作答結構資料" />
+          ) : (
+            data.results.map((r) => (
+              <div key={r.student_id} className="card p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="font-semibold text-[var(--color-text)]">{r.student_name}</span>
+                  <span className="text-sm">
+                    {r.correct_count}/{r.total_questions} ·{" "}
+                    <span className="font-semibold text-[var(--color-primary)]">{r.score} 分</span>
+                  </span>
+                </div>
+                <AnswerChips answers={r.answers?.answers ?? []} />
+              </div>
+            ))
+          )}
+        </div>
+      )}
+
+      {view === "raw" && (
+        data.raw_files.length === 0 ? (
+          <Empty msg="此測驗沒有原始檔案（PDF/CSV）。較早上傳的資料未保存原始檔；之後上傳的會自動保存到 Supabase Storage。" />
+        ) : (
+          <Table headers={["類型", "檔名", "格式", "大小", "下載"]}>
+            {data.raw_files.map((f) => (
+              <tr key={f.id} className="border-t border-[var(--color-border)]">
+                <Td>{f.data_type}</Td>
+                <Td>{f.file_name}</Td>
+                <Td>{f.content_type || "—"}</Td>
+                <Td>{f.size_bytes ? `${(f.size_bytes / 1024).toFixed(1)} KB` : "—"}</Td>
+                <Td>
+                  {f.download_url ? (
+                    <a href={f.download_url} target="_blank" rel="noreferrer" className="underline text-[var(--color-primary)]">
+                      下載 / 檢視
+                    </a>
+                  ) : (
+                    <span className="text-[var(--color-text-muted)]">不可用</span>
+                  )}
+                </Td>
+              </tr>
+            ))}
+          </Table>
+        )
+      )}
+    </div>
+  );
+}
+
+function AnswerChips({ answers, hideEquals }: { answers: (string | null)[]; hideEquals?: boolean }) {
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {answers.map((a, i) => {
+        const isEq = a === "=";
+        const blank = a === null || a === "";
+        // '=' means "answered correctly" in a student row (show ✓), but "no
+        // authoritative key" in the official-answer row (hideEquals → neutral).
+        const showCorrect = isEq && !hideEquals;
+        const neutral = blank || (isEq && hideEquals);
+        const label = neutral ? "·" : showCorrect ? "✓" : a;
+        return (
+          <span
+            key={i}
+            title={`Q${i + 1}`}
+            className={`inline-flex items-center justify-center min-w-[2.2rem] px-1.5 py-0.5 rounded text-xs border ${
+              showCorrect
+                ? "bg-[var(--color-success)]/10 border-[var(--color-success)]/30 text-[var(--color-success)]"
+                : neutral
+                ? "border-[var(--color-border)] text-[var(--color-text-muted)]"
+                : "border-[var(--color-border)] text-[var(--color-text)]"
+            }`}
+          >
+            <span className="opacity-50 mr-0.5">{i + 1}</span>
+            {label}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function Empty({ msg }: { msg: string }) {
+  return <div className="card p-6 text-center text-[var(--color-text-muted)] text-sm">{msg}</div>;
+}
+
 function Table({ headers, children }: { headers: string[]; children: React.ReactNode }) {
   return (
     <div className="card overflow-x-auto">