feat(frontend): admin card management with excel import/export

packages/frontend/src/pages/AdminLesson.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import type { Card } from '@flashcard/shared';
+import { cardsApi } from '../api/cards.js';
+import { CardTable } from '../components/CardTable.js';
+import { ImportDialog } from '../components/ImportDialog.js';
+
+export function AdminLessonPage() {
+  const { id } = useParams();
+  const lessonId = Number(id);
+  const [cards, setCards] = useState<Card[]>([]);
+  const [showImport, setShowImport] = useState(false);
+
+  async function refresh() { setCards(await cardsApi.list(lessonId)); }
+  useEffect(() => { refresh(); }, [lessonId]);
+
+  return (
+    <div className="mx-auto max-w-4xl p-6">
+      <Link to="/admin" className="text-sm text-blue-600">← Lessen</Link>
+      <h1 className="my-3 text-2xl font-semibold">Kaarten</h1>
+      <div className="mb-4 flex gap-2">
+        <button className="rounded bg-slate-200 px-3 py-1 dark:bg-slate-800" onClick={() => setShowImport(true)}>Importeer Excel</button>
+        <a className="rounded bg-slate-200 px-3 py-1 dark:bg-slate-800" href={cardsApi.exportUrl(lessonId, false)}>Exporteer Excel</a>
+        <a className="rounded bg-slate-200 px-3 py-1 dark:bg-slate-800" href={cardsApi.exportUrl(lessonId, true)}>Exporteer + sublessen</a>
+        <Link to={`/practice/${lessonId}/setup`} className="ml-auto rounded bg-green-600 px-3 py-1 text-white">Start oefenen →</Link>
+      </div>
+      <CardTable lessonId={lessonId} cards={cards} onChange={refresh} />
+      {showImport && <ImportDialog lessonId={lessonId} onClose={() => setShowImport(false)} onDone={refresh} />}
+    </div>
+  );
+}