Initial working commit

src/app/(protected)/[classSlug]/flashcards/[deckId]/page.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { FlashcardViewer } from "@/components/flashcards/FlashcardViewer";
+import { CardManager } from "@/components/flashcards/CardManager";
+import { ShareMenu } from "@/components/ui/ShareMenu";
+
+
+interface Card {
+  id: string;
+  front: string;
+  back: string;
+  sortOrder: number;
+}
+
+interface DeckData {
+  id: string;
+  name: string;
+  description: string | null;
+  cards: Card[];
+  class: { slug: string; name: string };
+  progress: Array<{
+    mode: "SEQUENTIAL" | "SHUFFLED";
+    currentIndex: number;
+    orderJson: string;
+    cardResultsJson: string | null;
+    updatedAt: string;
+  }>;
+}
+
+export default function DeckStudyPage() {
+  const params = useParams();
+  const router = useRouter();
+  const classSlug = params.classSlug as string;
+  const deckId = params.deckId as string;
+  const [deck, setDeck] = useState<DeckData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [view, setView] = useState<"study" | "manage">("study");
+  const [restartKey, setRestartKey] = useState(0);
+
+  async function handleRestart() {
+    if (!deck) return;
+    
+    // Clear progress in database for both modes
+    await Promise.all([
+      fetch("/api/progress", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ contentType: "DECK", contentId: deck.id, mode: "SEQUENTIAL" })
+      }).catch(() => {}),
+      fetch("/api/progress", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ contentType: "DECK", contentId: deck.id, mode: "SHUFFLED" })
+      }).catch(() => {})
+    ]);
+    
+    // Clear locally and force remount
+    setDeck({ ...deck, progress: [] });
+    setRestartKey(k => k + 1);
+  }
+
+  const fetchDeck = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/decks/${deckId}`);
+      if (!res.ok) throw new Error("Not found");
+      const data = await res.json();
+      setDeck(data);
+    } catch {
+      router.push(`/${classSlug}/flashcards`);
+    } finally {
+      setLoading(false);
+    }
+  }, [deckId, classSlug, router]);
+
+  useEffect(() => {
+    fetchDeck();
+  }, [fetchDeck]);
+
+  if (loading || !deck) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="animate-subtle-pulse">
+          <div className="h-8 bg-bg-surface-alt rounded w-1/3 mb-4" />
+          <div className="h-64 bg-bg-surface rounded-xl border border-border-light" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto w-full py-2 md:py-4">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <button
+            onClick={() => router.push(`/${classSlug}/flashcards`)}
+            className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-heading mb-2 transition-colors cursor-pointer"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to decks
+          </button>
+          <h1 className="text-xl font-bold text-text-heading">{deck.name}</h1>
+          {deck.description && (
+            <p className="text-sm text-text-secondary mt-1">{deck.description}</p>
+          )}
+        </div>
+
+        {/* View toggle & Share */}
+        <div className="flex items-center gap-2 md:gap-4">
+          {view === "study" && (
+            <button
+              onClick={handleRestart}
+              className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
+              title="Restart Session"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+          )}
+          <ShareMenu targetType="DECK" contentId={deck.id} classSlug={classSlug} />
+          
+          <div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
+            <button
+              onClick={() => setView("study")}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                view === "study"
+                  ? "bg-bg-surface text-text-heading shadow-sm"
+                  : "text-text-muted hover:text-text-heading"
+              }`}
+            >
+              Study
+            </button>
+            <button
+              onClick={() => setView("manage")}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                view === "manage"
+                  ? "bg-bg-surface text-text-heading shadow-sm"
+                  : "text-text-muted hover:text-text-heading"
+              }`}
+            >
+              Manage
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      {view === "study" ? (
+        <FlashcardViewer 
+          key={restartKey}
+          cards={deck.cards} 
+          deckId={deck.id} 
+          initialProgress={
+            deck.progress?.length 
+              ? deck.progress.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())[0] 
+              : null
+          }
+        />
+      ) : (
+        <CardManager
+          cards={deck.cards}
+          deckId={deck.id}
+          onCardsChanged={fetchDeck}
+        />
+      )}
+    </div>
+  );
+}

src/app/(protected)/[classSlug]/flashcards/page.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { ImportModal } from "@/components/import/ImportModal";
+
+interface DeckItem {
+  id: string;
+  name: string;
+  description: string | null;
+  _count: { cards: number };
+  progress: Array<{
+    mode: string;
+    currentIndex: number;
+    orderJson: string;
+    cardResultsJson: string | null;
+  }>;
+}
+
+export default function FlashcardsPage() {
+  const params = useParams();
+  const classSlug = params.classSlug as string;
+  const [decks, setDecks] = useState<DeckItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showImport, setShowImport] = useState(false);
+  const [classId, setClassId] = useState<string>("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState("");
+
+  const fetchDecks = useCallback(async (cId: string) => {
+    try {
+      const res = await fetch(`/api/decks/list?classId=${cId}`);
+      if (res.ok) {
+        const data = await res.json();
+        setDecks(Array.isArray(data) ? data : []);
+      }
+    } catch {
+      setDecks([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    async function init() {
+      try {
+        const classRes = await fetch("/api/classes");
+        const classes = await classRes.json();
+        const cls = classes.find((c: { slug: string }) => c.slug === classSlug);
+        if (!cls) {
+          setLoading(false);
+          return;
+        }
+        setClassId(cls.id);
+        fetchDecks(cls.id);
+      } catch {
+        setLoading(false);
+      }
+    }
+    init();
+  }, [classSlug, fetchDecks]);
+
+  async function handleDelete(id: string, name: string) {
+    if (!confirm(`Delete "${name}" and all its cards?`)) return;
+    await fetch(`/api/decks/${id}`, { method: "DELETE" });
+    setDecks((prev) => prev.filter((d) => d.id !== id));
+  }
+
+  async function handleRename(id: string) {
+    if (!editName.trim()) return;
+    await fetch(`/api/decks/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name: editName.trim() }),
+    });
+    setDecks((prev) =>
+      prev.map((d) => (d.id === id ? { ...d, name: editName.trim() } : d))
+    );
+    setEditingId(null);
+  }
+
+  function getProgressLabel(deck: DeckItem) {
+    if (!deck.progress?.length) return null;
+    const prog = deck.progress[0];
+    const order = JSON.parse(prog.orderJson) as string[];
+    const results = prog.cardResultsJson
+      ? (JSON.parse(prog.cardResultsJson) as Record<string, string>)
+      : {};
+    const correctCount = Object.values(results).filter((r) => r === "correct").length;
+    const total = order.length;
+    const current = Math.min(prog.currentIndex + 1, total);
+    const modeLabel = prog.mode === "SHUFFLED" ? "shuffled" : "sequential";
+    return `${current}/${total}, ${modeLabel} · ${correctCount} ✓`;
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-semibold text-text-heading">Flashcard Decks</h2>
+        <button
+          onClick={() => setShowImport(true)}
+          className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 shadow-sm cursor-pointer"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+          Import Deck
+        </button>
+      </div>
+
+      {/* Loading */}
+      {loading && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {[1, 2].map((i) => (
+            <div key={i} className="bg-bg-surface rounded-xl border border-border-light p-6 animate-subtle-pulse">
+              <div className="h-5 bg-bg-surface-alt rounded w-2/3 mb-3" />
+              <div className="h-4 bg-bg-surface-alt rounded w-1/3" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && decks.length === 0 && (
+        <div className="text-center py-16">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-callout mb-4">
+            <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          </div>
+          <h3 className="text-lg font-semibold text-text-heading mb-1">No flashcard decks yet</h3>
+          <p className="text-text-secondary mb-4">Import your first deck to start studying</p>
+          <button
+            onClick={() => setShowImport(true)}
+            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 cursor-pointer"
+          >
+            Import Deck
+          </button>
+        </div>
+      )}
+
+      {/* Deck grid */}
+      {!loading && decks.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {decks.map((deck) => {
+            const progressLabel = getProgressLabel(deck);
+
+            return (
+              <div
+                key={deck.id}
+                className="group bg-bg-surface rounded-xl border border-border-light shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] hover:border-primary/20 transition-all duration-300"
+              >
+                <div className="p-6">
+                  {/* Name (editable) */}
+                  {editingId === deck.id ? (
+                    <div className="flex gap-2 mb-3">
+                      <input
+                        type="text"
+                        value={editName}
+                        onChange={(e) => setEditName(e.target.value)}
+                        onKeyDown={(e) => e.key === "Enter" && handleRename(deck.id)}
+                        autoFocus
+                        className="flex-1 px-3 py-1.5 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
+                      />
+                      <button
+                        onClick={() => handleRename(deck.id)}
+                        className="text-sm text-primary hover:text-primary-hover cursor-pointer"
+                      >
+                        Save
+                      </button>
+                      <button
+                        onClick={() => setEditingId(null)}
+                        className="text-sm text-text-muted hover:text-text-heading cursor-pointer"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  ) : (
+                    <h3 className="text-lg font-semibold text-text-heading mb-1">
+                      {deck.name}
+                    </h3>
+                  )}
+
+                  {deck.description && (
+                    <p className="text-sm text-text-secondary mb-3 line-clamp-2">{deck.description}</p>
+                  )}
+
+                  {/* Stats */}
+                  <div className="flex items-center gap-3">
+                    <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-badge-bg text-badge-text text-xs font-medium">
+                      {deck._count.cards} {deck._count.cards === 1 ? "card" : "cards"}
+                    </span>
+                    {progressLabel && (
+                      <span className="text-xs text-text-muted">{progressLabel}</span>
+                    )}
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex items-center gap-2 mt-4 pt-4 border-t border-border-light">
+                    <Link
+                      href={`/${classSlug}/flashcards/${deck.id}`}
+                      className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200"
+                    >
+                      {deck.progress?.length ? "Continue" : "Study"}
+                    </Link>
+                    <button
+                      onClick={() => {
+                        setEditingId(deck.id);
+                        setEditName(deck.name);
+                      }}
+                      className="p-2 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
+                      title="Rename"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                    </button>
+                    <button
+                      onClick={() => handleDelete(deck.id, deck.name)}
+                      className="p-2 rounded-lg text-text-muted hover:text-error hover:bg-error-bg transition-all duration-200 cursor-pointer"
+                      title="Delete"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Import Modal */}
+      {showImport && (
+        <ImportModal
+          classId={classId}
+          importType="flashcards"
+          onClose={() => setShowImport(false)}
+          onImported={() => {
+            setShowImport(false);
+            setLoading(true);
+            // Re-fetch
+            window.location.reload();
+          }}
+        />
+      )}
+    </div>
+  );
+}

src/app/(protected)/[classSlug]/layout.tsx

@@ -0,0 +1,22 @@
+import { getClassBySlug } from "@/services/classService";
+import { notFound } from "next/navigation";
+import { ClassHeader } from "@/components/ui/ClassHeader";
+
+export default async function ClassLayout(props: LayoutProps<"/[classSlug]">) {
+  const { classSlug } = await props.params;
+  const classData = await getClassBySlug(classSlug);
+
+  if (!classData) {
+    notFound();
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Dynamic Header & Tabs */}
+      <ClassHeader classSlug={classSlug} className={classData.name} />
+
+      {/* Page content */}
+      {props.children}
+    </div>
+  );
+}

src/app/(protected)/[classSlug]/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+export default async function ClassPage(props: PageProps<"/[classSlug]">) {
+  const { classSlug } = await props.params;
+  redirect(`/${classSlug}/flashcards`);
+}

src/app/(protected)/[classSlug]/quizzes/[quizId]/page.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { QuizViewer } from "@/components/quizzes/QuizViewer";
+import { AttemptHistory } from "@/components/quizzes/AttemptHistory";
+import { ShareMenu } from "@/components/ui/ShareMenu";
+
+
+interface Option {
+  id: string;
+  text: string;
+  isCorrect: boolean;
+}
+
+interface Question {
+  id: string;
+  type: string;
+  prompt: string;
+  rationale: string;
+  category: string;
+  options: Option[];
+}
+
+interface QuizAttempt {
+  id: string;
+  score: number;
+  maxScore: number;
+  answersJson: string;
+  isPartialRetake: boolean;
+  completedAt: string;
+}
+
+interface QuizData {
+  id: string;
+  name: string;
+  description: string | null;
+  questions: Question[];
+  class: { slug: string; name: string };
+  progress: Array<{
+    mode: string;
+    currentIndex: number;
+    orderJson: string;
+    answersJson: string | null;
+  }>;
+}
+
+export default function QuizStudyPage() {
+  const params = useParams();
+  const router = useRouter();
+  const classSlug = params.classSlug as string;
+  const quizId = params.quizId as string;
+  
+  const [quiz, setQuiz] = useState<QuizData | null>(null);
+  const [attempts, setAttempts] = useState<QuizAttempt[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [view, setView] = useState<"history" | "take">("take");
+  const [retakeIds, setRetakeIds] = useState<string[] | null>(null);
+  
+  const fetchQuizAndAttempts = useCallback(async () => {
+    try {
+      const [quizRes, attemptsRes] = await Promise.all([
+        fetch(`/api/quizzes/${quizId}`),
+        fetch(`/api/quizzes/${quizId}/attempt`)
+      ]);
+      
+      if (!quizRes.ok) throw new Error("Not found");
+      
+      const [quizData, attemptsData] = await Promise.all([
+        quizRes.json(),
+        attemptsRes.ok ? attemptsRes.json() : []
+      ]);
+      
+      setQuiz(quizData);
+      setAttempts(attemptsData);
+      
+      // Optional: keep track of attempt count, but default view is already "take"
+      if (attemptsData.length > 0) {
+        // We can do something here if we wanted to auto-switch to history, but user wants take
+      }
+    } catch {
+      router.push(`/${classSlug}/quizzes`);
+    } finally {
+      setLoading(false);
+    }
+  }, [quizId, classSlug, router]);
+
+  useEffect(() => {
+    fetchQuizAndAttempts();
+  }, [fetchQuizAndAttempts]);
+
+  if (loading || !quiz) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="animate-subtle-pulse">
+          <div className="h-8 bg-bg-surface-alt rounded w-1/3 mb-4" />
+          <div className="h-64 bg-bg-surface rounded-xl border border-border-light" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto w-full py-2 md:py-4">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <button
+            onClick={() => router.push(`/${classSlug}/quizzes`)}
+            className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-heading mb-2 transition-colors cursor-pointer"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to quizzes
+          </button>
+          <h1 className="text-xl font-bold text-text-heading">{quiz.name}</h1>
+          {quiz.description && (
+            <p className="text-sm text-text-secondary mt-1">{quiz.description}</p>
+          )}
+        </div>
+
+        {/* View toggle & Share */}
+        <div className="flex items-center gap-4">
+          <ShareMenu targetType="QUIZ" contentId={quiz.id} classSlug={classSlug} />
+          
+          {attempts.length > 0 && (
+            <div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
+              <button
+                onClick={() => setView("history")}
+                className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                  view === "history"
+                    ? "bg-bg-surface text-text-heading shadow-sm"
+                    : "text-text-muted hover:text-text-heading"
+                }`}
+              >
+                History
+              </button>
+              <button
+                onClick={() => setView("take")}
+                className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                  view === "take"
+                    ? "bg-bg-surface text-text-heading shadow-sm"
+                    : "text-text-muted hover:text-text-heading"
+                }`}
+              >
+                Take Quiz
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      {view === "history" && attempts.length > 0 ? (
+        <AttemptHistory 
+          quiz={quiz} 
+          attempts={attempts} 
+          onRetake={(missedIds) => {
+            setRetakeIds(missedIds);
+            setView("take");
+          }} 
+        />
+      ) : (
+        <QuizViewer 
+          quiz={quiz} 
+          retakeIds={retakeIds}
+          onFinished={() => {
+            setRetakeIds(null);
+            fetchQuizAndAttempts();
+            setView("history");
+          }} 
+        />
+      )}
+    </div>
+  );
+}

src/app/(protected)/[classSlug]/quizzes/page.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { ImportModal } from "@/components/import/ImportModal";
+
+interface QuizItem {
+  id: string;
+  name: string;
+  description: string | null;
+  _count: { questions: number; attempts: number };
+}
+
+export default function QuizzesPage() {
+  const params = useParams();
+  const classSlug = params.classSlug as string;
+  const [quizzes, setQuizzes] = useState<QuizItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showImport, setShowImport] = useState(false);
+  const [classId, setClassId] = useState<string>("");
+
+  const fetchQuizzes = useCallback(async (cId: string) => {
+    try {
+      const res = await fetch(`/api/quizzes/list?classId=${cId}`);
+      if (res.ok) {
+        const data = await res.json();
+        setQuizzes(Array.isArray(data) ? data : []);
+      }
+    } catch {
+      setQuizzes([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    async function init() {
+      try {
+        const classRes = await fetch("/api/classes");
+        const classes = await classRes.json();
+        const cls = classes.find((c: { slug: string }) => c.slug === classSlug);
+        if (!cls) {
+          setLoading(false);
+          return;
+        }
+        setClassId(cls.id);
+        fetchQuizzes(cls.id);
+      } catch {
+        setLoading(false);
+      }
+    }
+    init();
+  }, [classSlug, fetchQuizzes]);
+
+  async function handleDelete(id: string, name: string) {
+    if (!confirm(`Delete "${name}" and all its questions and attempts?`)) return;
+    await fetch(`/api/quizzes/${id}`, { method: "DELETE" });
+    setQuizzes((prev) => prev.filter((q) => q.id !== id));
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-semibold text-text-heading">Quizzes</h2>
+        <button
+          onClick={() => setShowImport(true)}
+          className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 shadow-sm cursor-pointer"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+          Import Quiz
+        </button>
+      </div>
+
+      {/* Loading */}
+      {loading && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {[1, 2].map((i) => (
+            <div key={i} className="bg-bg-surface rounded-xl border border-border-light p-6 animate-subtle-pulse">
+              <div className="h-5 bg-bg-surface-alt rounded w-2/3 mb-3" />
+              <div className="h-4 bg-bg-surface-alt rounded w-1/3" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && quizzes.length === 0 && (
+        <div className="text-center py-16">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-callout mb-4">
+            <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+          </div>
+          <h3 className="text-lg font-semibold text-text-heading mb-1">No quizzes yet</h3>
+          <p className="text-text-secondary mb-4">Import your first quiz to start practicing</p>
+          <button
+            onClick={() => setShowImport(true)}
+            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 cursor-pointer"
+          >
+            Import Quiz
+          </button>
+        </div>
+      )}
+
+      {/* Quiz grid */}
+      {!loading && quizzes.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {quizzes.map((quiz) => (
+            <div
+              key={quiz.id}
+              className="group bg-bg-surface rounded-xl border border-border-light shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] hover:border-primary/20 transition-all duration-300"
+            >
+              <div className="p-6">
+                <h3 className="text-lg font-semibold text-text-heading mb-1">
+                  {quiz.name}
+                </h3>
+                {quiz.description && (
+                  <p className="text-sm text-text-secondary mb-3 line-clamp-2">
+                    {quiz.description}
+                  </p>
+                )}
+                <div className="flex items-center gap-3">
+                  <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-badge-bg text-badge-text text-xs font-medium">
+                    {quiz._count.questions} {quiz._count.questions === 1 ? "question" : "questions"}
+                  </span>
+                  {quiz._count.attempts > 0 && (
+                    <span className="text-xs text-text-muted">
+                      {quiz._count.attempts} {quiz._count.attempts === 1 ? "attempt" : "attempts"}
+                    </span>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-2 mt-4 pt-4 border-t border-border-light">
+                  <Link
+                    href={`/${classSlug}/quizzes/${quiz.id}`}
+                    className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200"
+                  >
+                    Start Quiz
+                  </Link>
+                  <button
+                    onClick={() => handleDelete(quiz.id, quiz.name)}
+                    className="p-2 rounded-lg text-text-muted hover:text-error hover:bg-error-bg transition-all duration-200 cursor-pointer"
+                    title="Delete"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Import Modal */}
+      {showImport && (
+        <ImportModal
+          classId={classId}
+          importType="quizzes"
+          onClose={() => setShowImport(false)}
+          onImported={() => {
+            setShowImport(false);
+            window.location.reload();
+          }}
+        />
+      )}
+    </div>
+  );
+}