Phase 9b: Schul-Events CRUD + Schuljahres-Rollover

Backend (school-service):
  - calendar_events.go — Create/List/Delete on cal_school_event with
    UUID[] handling for affected_class_ids. Default lead-days [7,1]
    if caller omits the array.
  - calendar_rollover.go — single-transaction promotion: graduating
    classes (grade >= 13) get deleted first so the +1 update doesn't
    bump them to invalid grade 14. defaultSchoolYearDates() picks the
    next Aug-Jul pair when the caller doesn't specify.
  - Handlers + routes: GET/POST /calendar/events,
    DELETE /calendar/events/:id, POST /calendar/school-year-rollover.

Frontend (studio-v2):
  - EventModal: form with Title / Typ / Datum/Zeit / unterrichtsfrei /
    Beschreibung / Sichtbarkeit + Notification-Checkboxen. Per-Type
    Farb-Mapping in types.ts.
  - DayDetail: Modal das beim Klick auf einen Kalender-Tag aufgeht und
    Feiertage + Schulferien + Schul-Events fuer diesen Tag listet,
    inkl. Loeschen-Button pro Event.
  - RolloverWizard: zwei-Schritt-Dialog mit Datums-Auswahl + Tipp-
    Bestaetigung ("SCHULJAHR WECHSELN") gegen versehentliche Auslo-
    sung, danach Ergebnis-Card mit promoted/graduated-Counts.
  - MonthView gewinnt onDayClick + onAddEvent + onRollover Props,
    rendert farb-codierte Punkte fuer School-Events am Tagesrand.
  - Page laed Events parallel mit Holidays und reicht alle Handler
    nach unten.

Tests:
  - Go: 3 neue Tests fuer defaultSchoolYearDates + parseClassIDs.
    Validator-Test fuer CreateSchoolEventRequest existiert bereits.
    80 Subtests gesamt, alle gruen.
  - Playwright: mockCalendarApi gewinnt Routes fuer events GET/POST/
    DELETE und school-year-rollover. 6 neue Tests (EventModal open,
    submit, DayDetail open, Rollover-Trigger, Confirm-Schutz,
    Ergebnis-Anzeige).

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

studio-v2/app/schulkalender/_components/RolloverWizard.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { useState } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { calendarApi } from '@/lib/schulkalender/api'
+import type { SchoolYearRolloverResult } from '@/app/schulkalender/types'
+
+interface RolloverWizardProps {
+  onClose: () => void
+  onDone: () => void
+}
+
+function nextSchoolYearISO(): { start: string; end: string } {
+  const now = new Date()
+  let y = now.getFullYear()
+  if (now.getMonth() + 1 >= 8) y++ // Aug → bumped to next year
+  return { start: `${y}-08-01`, end: `${y + 1}-07-31` }
+}
+
+export function RolloverWizard({ onClose, onDone }: RolloverWizardProps) {
+  const { isDark } = useTheme()
+  const defaults = nextSchoolYearISO()
+  const [start, setStart] = useState(defaults.start)
+  const [end, setEnd] = useState(defaults.end)
+  const [confirm, setConfirm] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [result, setResult] = useState<SchoolYearRolloverResult | null>(null)
+
+  const expected = 'SCHULJAHR WECHSELN'
+
+  const handleSubmit = async () => {
+    setSaving(true)
+    setError(null)
+    try {
+      const r = await calendarApi.rolloverSchoolYear(start, end)
+      setResult(r)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Rollover fehlgeschlagen')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const cardClass = isDark ? 'bg-slate-900/95 border-white/20 text-white' : 'bg-white border-black/10 text-slate-900'
+  const inputClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-slate-300 text-slate-900'
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur" data-testid="rollover-wizard">
+      <div className={`w-full max-w-xl rounded-2xl border p-6 space-y-4 max-h-[90vh] overflow-y-auto ${cardClass}`}>
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold">Schuljahres-Wechsel</h2>
+          <button onClick={onClose} className="opacity-60 hover:opacity-100">✕</button>
+        </div>
+
+        {result ? (
+          <div className="space-y-3" data-testid="rollover-result">
+            <div className={`p-4 rounded-xl ${isDark ? 'bg-emerald-500/20 border border-emerald-500/40' : 'bg-emerald-50 border border-emerald-200'}`}>
+              <div className="font-medium mb-2">Rollover erfolgreich</div>
+              <ul className="text-sm space-y-1 opacity-90">
+                <li>{result.classes_promoted} Klassen um eine Stufe aufgerueckt</li>
+                <li>{result.classes_graduated} Abschlussklassen entfernt</li>
+                <li>Neues Schuljahr: {result.new_year_start} – {result.new_year_end}</li>
+              </ul>
+            </div>
+            <button onClick={onDone} className="w-full px-4 py-2 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-white font-medium">
+              Schliessen
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className={`p-3 rounded-lg text-sm ${isDark ? 'bg-amber-500/10 border border-amber-500/30 text-amber-100' : 'bg-amber-50 border border-amber-200 text-amber-900'}`}>
+              <p className="font-medium mb-1">Was passiert?</p>
+              <ul className="list-disc list-inside space-y-1 opacity-90">
+                <li>Alle Klassen ruecken eine Stufe hoeher (5a → 6, 6a → 7, …)</li>
+                <li>Abschlussklassen (Stufe 13) werden entfernt</li>
+                <li>Lehrer, Faecher, Raeume, Zeitraster bleiben unveraendert</li>
+                <li>Vorhandene Stundenplaene bleiben als Historie erhalten</li>
+              </ul>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-sm mb-1 opacity-70">Schuljahr-Beginn</label>
+                <input type="date" value={start} onChange={e => setStart(e.target.value)} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+              </div>
+              <div>
+                <label className="block text-sm mb-1 opacity-70">Schuljahr-Ende</label>
+                <input type="date" value={end} onChange={e => setEnd(e.target.value)} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm mb-1 opacity-70">
+                Bestaetigung — tippe <code className={`px-1 rounded ${isDark ? 'bg-white/10' : 'bg-slate-100'}`}>{expected}</code> zur Bestaetigung
+              </label>
+              <input
+                value={confirm}
+                onChange={e => setConfirm(e.target.value)}
+                data-testid="rollover-confirm"
+                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+              />
+            </div>
+
+            {error && (
+              <div className="p-2 rounded-lg bg-red-500/20 border border-red-500/40 text-red-300 text-sm">{error}</div>
+            )}
+
+            <div className="flex gap-2">
+              <button
+                onClick={handleSubmit}
+                disabled={saving || confirm !== expected}
+                data-testid="rollover-submit"
+                className="flex-1 px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white font-medium disabled:opacity-30"
+              >
+                {saving ? 'Wechselt…' : 'Schuljahr wechseln'}
+              </button>
+              <button onClick={onClose} className={`px-4 py-2 rounded-lg ${isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-slate-100 hover:bg-slate-200'}`}>
+                Abbrechen
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}