Phase 6: Plan-Ansicht — solution list + weekly grid view

Frontend additions in studio-v2:
  - types.ts adds TimetableSolution, TimetableLesson, SolutionStatus,
    CreateTimetableSolution mirroring the Go models.
  - lib/stundenplan/api.ts adds solutionsApi with list/get/create/remove/
    lessons. Solve trigger is POST /timetable/solutions — school-service
    forwards to the solver-service over the Docker network.
  - _components/plan/SolutionList: table of past solves with status
    badges, hard/soft score, Anzeigen + Loeschen buttons, and a
    'Neuen Plan generieren' trigger. Auto-polls every 4 s while any
    solution is pending/running, clears the interval otherwise.
  - _components/plan/PlanView: Mo–Fr × period weekly grid. Three
    perspectives (Klasse / Lehrer / Raum) toggleable via test-id'd
    buttons; selector below lists every unique resource with at least
    one lesson. Cells colour-coded by tt_subject.color.
  - _components/plan/PlanHub orchestrates list + view; default tab in
    page.tsx switches from 'klassen' to 'plan'.

Tests:
  - mockSchoolApi helper extracted to e2e/_helpers.ts so the spec file
    stays under 500 LOC. Helper now also mocks /solutions GET/POST/DELETE
    and /solutions/:id/lessons; solutions kept in a closure so POST
    appears in the next GET.
  - 8 new tests across two suites: SolutionList empty state, list
    render, completed-vs-failed Anzeigen visibility, solve trigger;
    PlanView placeholder when no selection, grid render, perspective
    switching.
  - Existing Klassen CRUD tests now click the Klassen tab first
    (Plan is the new default landing tab).

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

studio-v2/app/stundenplan/_components/plan/PlanHub.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useState } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { SolutionList } from './SolutionList'
+import { PlanView } from './PlanView'
+
+export function PlanHub() {
+  const { isDark } = useTheme()
+  const [selected, setSelected] = useState<string | null>(null)
+
+  return (
+    <div className="space-y-6" data-testid="plan-hub">
+      <SolutionList onView={setSelected} selectedId={selected} />
+
+      {selected ? (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+              Plan-Ansicht
+            </h3>
+            <button
+              onClick={() => setSelected(null)}
+              className={`text-sm ${isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'}`}
+            >
+              Schliessen
+            </button>
+          </div>
+          <PlanView solutionId={selected} />
+        </div>
+      ) : (
+        <div className={`rounded-2xl border backdrop-blur-xl p-6 text-center text-sm ${
+          isDark ? 'bg-white/5 border-white/10 text-white/60' : 'bg-white/80 border-black/10 text-slate-500'
+        }`}>
+          Waehle einen abgeschlossenen Plan oben, um die Wochenansicht zu sehen.
+        </div>
+      )}
+    </div>
+  )
+}

studio-v2/app/stundenplan/_components/plan/PlanView.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { solutionsApi, subjectsApi } from '@/lib/stundenplan/api'
+import type { TimetableLesson, TimetableSubject } from '@/app/stundenplan/types'
+
+interface PlanViewProps {
+  solutionId: string
+}
+
+const DAYS = [
+  { v: 1, label: 'Mo' },
+  { v: 2, label: 'Di' },
+  { v: 3, label: 'Mi' },
+  { v: 4, label: 'Do' },
+  { v: 5, label: 'Fr' },
+]
+
+type Perspective = 'class' | 'teacher' | 'room'
+
+const PERSPECTIVE_LABEL: Record<Perspective, string> = {
+  class: 'Klasse',
+  teacher: 'Lehrer',
+  room: 'Raum',
+}
+
+interface Resource {
+  id: string
+  label: string
+}
+
+export function PlanView({ solutionId }: PlanViewProps) {
+  const { isDark } = useTheme()
+  const [lessons, setLessons] = useState<TimetableLesson[]>([])
+  const [subjects, setSubjects] = useState<TimetableSubject[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [perspective, setPerspective] = useState<Perspective>('class')
+  const [selectedResource, setSelectedResource] = useState<string>('')
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const [ls, sub] = await Promise.all([
+        solutionsApi.lessons(solutionId),
+        subjectsApi.list(),
+      ])
+      setLessons(ls || [])
+      setSubjects(sub || [])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Laden fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }, [solutionId])
+
+  useEffect(() => { load() }, [load])
+
+  // Unique resources for the chosen perspective.
+  const resources: Resource[] = useMemo(() => {
+    const seen = new Map<string, Resource>()
+    for (const l of lessons) {
+      let id = ''
+      let label = ''
+      if (perspective === 'class') {
+        id = l.class_id
+        label = l.class_name || id.slice(0, 8)
+      } else if (perspective === 'teacher') {
+        id = l.teacher_id
+        label = l.teacher_name || id.slice(0, 8)
+      } else if (perspective === 'room') {
+        id = l.room_id || 'kein-raum'
+        label = l.room_name || (l.room_id ? l.room_id.slice(0, 8) : '— kein Raum —')
+      }
+      if (!seen.has(id)) seen.set(id, { id, label })
+    }
+    return Array.from(seen.values()).sort((a, b) => a.label.localeCompare(b.label))
+  }, [lessons, perspective])
+
+  // Reset selected resource when perspective changes or list refreshes.
+  useEffect(() => {
+    if (resources.length > 0 && !resources.some(r => r.id === selectedResource)) {
+      setSelectedResource(resources[0].id)
+    }
+  }, [resources, selectedResource])
+
+  const visibleLessons = useMemo(() => {
+    if (!selectedResource) return []
+    return lessons.filter(l => {
+      if (perspective === 'class') return l.class_id === selectedResource
+      if (perspective === 'teacher') return l.teacher_id === selectedResource
+      return (l.room_id || 'kein-raum') === selectedResource
+    })
+  }, [lessons, perspective, selectedResource])
+
+  const subjectColor = useCallback((id: string): string => {
+    const s = subjects.find(x => x.id === id)
+    return s?.color || (isDark ? '#475569' : '#cbd5e1')
+  }, [subjects, isDark])
+
+  const periodIndices = useMemo(() => {
+    const set = new Set<number>()
+    for (const l of lessons) set.add(l.period_index)
+    return Array.from(set).sort((a, b) => a - b)
+  }, [lessons])
+
+  const cellLesson = (day: number, periodIdx: number): TimetableLesson | undefined =>
+    visibleLessons.find(l => l.day_of_week === day && l.period_index === periodIdx)
+
+  const cardClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white/80 border-black/10 text-slate-900'
+  const selectClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-slate-300 text-slate-900'
+
+  return (
+    <div className="space-y-4" data-testid="plan-view">
+      <div className={`p-4 rounded-2xl border backdrop-blur-xl ${cardClass}`}>
+        <div className="flex flex-wrap items-center gap-3">
+          <div>
+            <label className="block text-xs mb-1 opacity-70">Perspektive</label>
+            <div className="flex gap-1">
+              {(['class', 'teacher', 'room'] as Perspective[]).map(p => (
+                <button
+                  key={p}
+                  onClick={() => setPerspective(p)}
+                  data-testid={`perspective-${p}`}
+                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                    perspective === p
+                      ? isDark ? 'bg-indigo-500 text-white' : 'bg-indigo-600 text-white'
+                      : isDark ? 'bg-white/10 text-white/70 hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
+                  }`}
+                >
+                  {PERSPECTIVE_LABEL[p]}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="flex-1 min-w-[200px]">
+            <label className="block text-xs mb-1 opacity-70">{PERSPECTIVE_LABEL[perspective]}</label>
+            <select value={selectedResource} onChange={e => setSelectedResource(e.target.value)} className={`w-full px-3 py-1.5 rounded-lg border ${selectClass}`}>
+              {resources.length === 0 && <option value="">— keine Daten —</option>}
+              {resources.map(r => <option key={r.id} value={r.id}>{r.label}</option>)}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {error && <div className="p-3 rounded-xl bg-red-500/20 border border-red-500/40 text-red-300">{error}</div>}
+
+      {loading ? (
+        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>Laedt…</div>
+      ) : lessons.length === 0 ? (
+        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>
+          Keine Lessons in diesem Plan.
+        </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-3 py-3 text-sm font-medium opacity-70 w-16">Stunde</th>
+                {DAYS.map(d => (
+                  <th key={d.v} className="text-left px-3 py-3 text-sm font-medium opacity-70">{d.label}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {periodIndices.map(idx => (
+                <tr key={idx} className={isDark ? 'border-t border-white/10' : 'border-t border-slate-200'}>
+                  <td className="px-3 py-2 font-medium text-sm">{idx}.</td>
+                  {DAYS.map(d => {
+                    const lesson = cellLesson(d.v, idx)
+                    if (!lesson) {
+                      return <td key={d.v} className="px-3 py-2 opacity-20 text-xs">—</td>
+                    }
+                    const color = subjectColor(lesson.subject_id)
+                    return (
+                      <td key={d.v} className="px-2 py-1">
+                        <div
+                          className="rounded-md p-2 text-xs space-y-0.5"
+                          style={{ backgroundColor: color + (isDark ? '40' : '30'), borderLeft: `3px solid ${color}` }}
+                          data-testid={`cell-${d.v}-${idx}`}
+                        >
+                          <div className="font-semibold">{lesson.subject_name || '?'}</div>
+                          {perspective !== 'class' && lesson.class_name && (
+                            <div className="opacity-80">{lesson.class_name}</div>
+                          )}
+                          {perspective !== 'teacher' && lesson.teacher_name && (
+                            <div className="opacity-70">{lesson.teacher_name.split(',')[0]}</div>
+                          )}
+                          {perspective !== 'room' && lesson.room_name && (
+                            <div className="opacity-60">{lesson.room_name}</div>
+                          )}
+                        </div>
+                      </td>
+                    )
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

studio-v2/app/stundenplan/_components/plan/SolutionList.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { solutionsApi } from '@/lib/stundenplan/api'
+import type { TimetableSolution, SolutionStatus } from '@/app/stundenplan/types'
+
+interface SolutionListProps {
+  onView: (solutionId: string) => void
+  selectedId?: string | null
+}
+
+const STATUS_LABEL: Record<SolutionStatus, string> = {
+  pending: 'Wartet',
+  running: 'Laeuft',
+  completed: 'Fertig',
+  failed: 'Fehler',
+  infeasible: 'Nicht loesbar',
+}
+
+const STATUS_BADGE: Record<SolutionStatus, string> = {
+  pending: 'bg-slate-500/30 text-slate-200',
+  running: 'bg-blue-500/30 text-blue-200',
+  completed: 'bg-emerald-500/30 text-emerald-200',
+  failed: 'bg-red-500/30 text-red-200',
+  infeasible: 'bg-amber-500/30 text-amber-200',
+}
+
+export function SolutionList({ onView, selectedId }: SolutionListProps) {
+  const { isDark } = useTheme()
+  const [items, setItems] = useState<TimetableSolution[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const [name, setName] = useState('')
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const load = useCallback(async () => {
+    try {
+      const data = await solutionsApi.list()
+      setItems(data || [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Laden fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  // Poll every 4 s while at least one solution is pending/running.
+  useEffect(() => {
+    const inFlight = items.some(s => s.status === 'pending' || s.status === 'running')
+    if (inFlight && pollingRef.current === null) {
+      pollingRef.current = setInterval(load, 4000)
+    } else if (!inFlight && pollingRef.current !== null) {
+      clearInterval(pollingRef.current)
+      pollingRef.current = null
+    }
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current)
+        pollingRef.current = null
+      }
+    }
+  }, [items, load])
+
+  const handleSolve = async () => {
+    setSubmitting(true)
+    setError(null)
+    try {
+      await solutionsApi.create({ name: name || `Plan ${new Date().toLocaleString('de-DE')}` })
+      setName('')
+      await load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Solve fehlgeschlagen')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Plan wirklich loeschen? Alle Lessons gehen verloren.')) return
+    try {
+      await solutionsApi.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" data-testid="solution-list">
+      <div className={`p-4 rounded-2xl border backdrop-blur-xl ${cardClass}`}>
+        <div className="flex items-end gap-3">
+          <div className="flex-1">
+            <label className="block text-sm mb-1 opacity-70">Name (optional)</label>
+            <input value={name} onChange={e => setName(e.target.value)} placeholder="z.B. Schuljahr 26/27 Variante 1" className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+          </div>
+          <button
+            onClick={handleSolve}
+            disabled={submitting}
+            data-testid="solve-trigger"
+            className="px-5 py-2 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-white font-medium disabled:opacity-50"
+          >
+            {submitting ? 'Startet…' : 'Neuen Plan generieren'}
+          </button>
+        </div>
+        <p className={`mt-2 text-xs ${isDark ? 'text-white/40' : 'text-slate-500'}`}>
+          Solver laeuft im Hintergrund (bis zu 60 Sekunden). Status erscheint in der Liste.
+        </p>
+      </div>
+
+      {error && <div className="p-3 rounded-xl bg-red-500/20 border border-red-500/40 text-red-300">{error}</div>}
+
+      {loading ? (
+        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>Laedt…</div>
+      ) : items.length === 0 ? (
+        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>Noch keine Plaene generiert.</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">Status</th>
+                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Score</th>
+                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Erstellt</th>
+                <th className="px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map(sol => {
+                const isSelected = sol.id === selectedId
+                return (
+                  <tr key={sol.id} className={`${isDark ? 'border-t border-white/10' : 'border-t border-slate-200'} ${isSelected ? (isDark ? 'bg-indigo-500/10' : 'bg-indigo-50') : ''}`}>
+                    <td className="px-4 py-3 font-medium">{sol.name || sol.id.slice(0, 8) + '…'}</td>
+                    <td className="px-4 py-3">
+                      <span className={`px-2 py-1 text-xs rounded-md ${STATUS_BADGE[sol.status]}`}>{STATUS_LABEL[sol.status]}</span>
+                      {sol.error_message && <span className="ml-2 text-xs opacity-70" title={sol.error_message}>ℹ</span>}
+                    </td>
+                    <td className="px-4 py-3 text-sm">
+                      {sol.hard_score !== null && sol.hard_score !== undefined
+                        ? `${sol.hard_score}H / ${sol.soft_score ?? 0}S`
+                        : '—'}
+                    </td>
+                    <td className="px-4 py-3 text-sm opacity-70">{new Date(sol.created_at).toLocaleString('de-DE')}</td>
+                    <td className="px-4 py-3 text-right space-x-3 whitespace-nowrap">
+                      {sol.status === 'completed' && (
+                        <button onClick={() => onView(sol.id)} className="text-indigo-300 hover:text-indigo-200 text-sm font-medium">
+                          {isSelected ? 'Ausgewaehlt' : 'Anzeigen'}
+                        </button>
+                      )}
+                      <button onClick={() => handleDelete(sol.id)} className="text-red-400 hover:text-red-300 text-sm">Loeschen</button>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

studio-v2/app/stundenplan/page.tsx

@@ -13,11 +13,13 @@ import { PeriodsManager } from './_components/PeriodsManager'
 import { CurriculumManager } from './_components/CurriculumManager'
 import { AssignmentsManager } from './_components/AssignmentsManager'
 import { RegelnHub } from './_components/regeln/RegelnHub'
+import { PlanHub } from './_components/plan/PlanHub'
 import { setStundenplanToken, getStundenplanToken } from '@/lib/stundenplan/api'
 
-type Tab = 'klassen' | 'lehrer' | 'faecher' | 'raeume' | 'periods' | 'curriculum' | 'assignments' | 'regeln'
+type Tab = 'plan' | 'klassen' | 'lehrer' | 'faecher' | 'raeume' | 'periods' | 'curriculum' | 'assignments' | 'regeln'
 
 const TABS: { id: Tab; label: string }[] = [
+  { id: 'plan', label: 'Plan' },
   { id: 'klassen', label: 'Klassen' },
   { id: 'lehrer', label: 'Lehrer' },
   { id: 'faecher', label: 'Faecher' },
@@ -30,7 +32,7 @@ const TABS: { id: Tab; label: string }[] = [
 
 export default function StundenplanPage() {
   const { isDark } = useTheme()
-  const [tab, setTab] = useState<Tab>('klassen')
+  const [tab, setTab] = useState<Tab>('plan')
   const [token, setToken] = useState(getStundenplanToken())
 
   const handleSaveToken = () => {
@@ -108,6 +110,7 @@ export default function StundenplanPage() {
         </nav>
 
         <section>
+          {tab === 'plan' && <PlanHub />}
           {tab === 'klassen' && <KlassenManager />}
           {tab === 'lehrer' && <LehrerManager />}
           {tab === 'faecher' && <FaecherManager />}

studio-v2/app/stundenplan/types.ts

@@ -224,3 +224,41 @@ export interface RoomUnavailable extends ConstraintBase {
   day_of_week: number
   period_index: number
 }
+
+// ---------- Solutions (Phase 5+) ----------
+
+export type SolutionStatus = 'pending' | 'running' | 'completed' | 'failed' | 'infeasible'
+
+export interface TimetableSolution {
+  id: string
+  created_by_user_id: string
+  name?: string
+  status: SolutionStatus
+  hard_score?: number | null
+  soft_score?: number | null
+  error_message?: string
+  started_at?: string | null
+  finished_at?: string | null
+  created_at: string
+}
+
+export interface TimetableLesson {
+  id: string
+  solution_id: string
+  class_id: string
+  subject_id: string
+  teacher_id: string
+  room_id?: string | null
+  day_of_week: number
+  period_index: number
+  pinned: boolean
+  created_at: string
+  class_name?: string
+  subject_name?: string
+  teacher_name?: string
+  room_name?: string
+}
+
+export interface CreateTimetableSolution {
+  name?: string
+}