Add Stundenplan frontend scaffolding in studio-v2

Phase 3 — initial UI for the timetable scheduler:
  - app/stundenplan/page.tsx with tab navigation (Klassen / Lehrer /
    Faecher / Raeume / Zeitraster / Stundentafel / Lehrauftraege /
    Regeln) and a dev-mode JWT entry to authenticate against
    school-service until full auth is wired up.
  - app/stundenplan/_components/KlassenManager.tsx as the working
    prototype for one entity (list / create / delete). Pattern can be
    copied for the other 6 stammdaten + 15 constraint editors.
  - lib/stundenplan/api.ts exposing typed clients for all 22 endpoints
    (7 stammdaten + 15 constraint tables). Constraints use a factory
    to keep the file tight.
  - app/api/school/[...path]/route.ts proxies the browser through
    Next.js to school-service so HTTPS studio-v2 can reach the plain
    HTTP backend.
  - Sidebar.tsx gains a Stundenplan entry with 26-language labels.
  - docker-compose.yml exposes SCHOOL_SERVICE_URL to studio-v2 and
    declares the school-service dependency.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

studio-v2/app/stundenplan/_components/KlassenManager.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { classesApi } from '@/lib/stundenplan/api'
+import type { TimetableClass, CreateTimetableClass } from '@/app/stundenplan/types'
+
+export function KlassenManager() {
+  const { isDark } = useTheme()
+  const [classes, setClasses] = useState<TimetableClass[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showForm, setShowForm] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [form, setForm] = useState<CreateTimetableClass>({
+    name: '',
+    grade_level: 5,
+    student_count: 0,
+    notes: '',
+  })
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await classesApi.list()
+      setClasses(data || [])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Laden fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitting(true)
+    setError(null)
+    try {
+      await classesApi.create(form)
+      setForm({ name: '', grade_level: 5, student_count: 0, notes: '' })
+      setShowForm(false)
+      await load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Anlegen fehlgeschlagen')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Klasse wirklich loeschen?')) return
+    try {
+      await classesApi.remove(id)
+      await load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Loeschen fehlgeschlagen')
+    }
+  }
+
+  const cardClass = isDark
+    ? 'bg-white/10 border-white/20 text-white'
+    : 'bg-white/80 border-black/10 text-slate-900'
+  const inputClass = isDark
+    ? 'bg-white/10 border-white/20 text-white placeholder-white/40'
+    : 'bg-white border-slate-300 text-slate-900 placeholder-slate-400'
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+          Klassen ({classes.length})
+        </h2>
+        <button
+          onClick={() => setShowForm(s => !s)}
+          className={`px-4 py-2 rounded-xl font-medium transition-colors ${
+            isDark
+              ? 'bg-indigo-500 hover:bg-indigo-600 text-white'
+              : 'bg-indigo-600 hover:bg-indigo-700 text-white'
+          }`}
+        >
+          {showForm ? 'Abbrechen' : '+ Neue Klasse'}
+        </button>
+      </div>
+
+      {error && (
+        <div className="p-3 rounded-xl bg-red-500/20 border border-red-500/40 text-red-300">
+          {error}
+        </div>
+      )}
+
+      {showForm && (
+        <form
+          onSubmit={handleSubmit}
+          className={`p-4 rounded-2xl border backdrop-blur-xl ${cardClass}`}
+        >
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+            <div>
+              <label className="block text-sm mb-1 opacity-70">Name</label>
+              <input
+                required
+                value={form.name}
+                onChange={e => setForm({ ...form, name: e.target.value })}
+                placeholder="z.B. 5a"
+                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+              />
+            </div>
+            <div>
+              <label className="block text-sm mb-1 opacity-70">Klassenstufe</label>
+              <input
+                type="number"
+                min={1}
+                max={13}
+                required
+                value={form.grade_level}
+                onChange={e => setForm({ ...form, grade_level: parseInt(e.target.value) || 0 })}
+                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+              />
+            </div>
+            <div>
+              <label className="block text-sm mb-1 opacity-70">Schueleranzahl</label>
+              <input
+                type="number"
+                min={0}
+                value={form.student_count}
+                onChange={e => setForm({ ...form, student_count: parseInt(e.target.value) || 0 })}
+                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+              />
+            </div>
+            <div className="flex items-end">
+              <button
+                type="submit"
+                disabled={submitting}
+                className="w-full px-4 py-2 rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white font-medium disabled:opacity-50"
+              >
+                {submitting ? 'Speichert...' : 'Anlegen'}
+              </button>
+            </div>
+          </div>
+          <div className="mt-3">
+            <label className="block text-sm mb-1 opacity-70">Notizen (optional)</label>
+            <input
+              value={form.notes || ''}
+              onChange={e => setForm({ ...form, notes: e.target.value })}
+              className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+            />
+          </div>
+        </form>
+      )}
+
+      {loading ? (
+        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>
+          Laedt…
+        </div>
+      ) : classes.length === 0 ? (
+        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>
+          Noch keine Klassen angelegt.
+        </div>
+      ) : (
+        <div className={`rounded-2xl border backdrop-blur-xl overflow-hidden ${cardClass}`}>
+          <table className="w-full">
+            <thead className={isDark ? 'bg-white/5' : 'bg-slate-100'}>
+              <tr>
+                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Name</th>
+                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Stufe</th>
+                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Schueler</th>
+                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Notizen</th>
+                <th className="px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {classes.map(c => (
+                <tr key={c.id} className={isDark ? 'border-t border-white/10' : 'border-t border-slate-200'}>
+                  <td className="px-4 py-3 font-medium">{c.name}</td>
+                  <td className="px-4 py-3">{c.grade_level}</td>
+                  <td className="px-4 py-3">{c.student_count}</td>
+                  <td className="px-4 py-3 text-sm opacity-70">{c.notes || '—'}</td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      onClick={() => handleDelete(c.id)}
+                      className="text-red-400 hover:text-red-300 text-sm"
+                    >
+                      Loeschen
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}