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>
2026-05-21 22:25:18 +02:00
parent 64e7176267
commit f21ecf293b
7 changed files with 757 additions and 0 deletions
@@ -0,0 +1,121 @@
+'use client'
+
+import { useState } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { Sidebar } from '@/components/Sidebar'
+import { ThemeToggle } from '@/components/ThemeToggle'
+import { LanguageDropdown } from '@/components/LanguageDropdown'
+import { KlassenManager } from './_components/KlassenManager'
+import { setStundenplanToken, getStundenplanToken } from '@/lib/stundenplan/api'
+
+type Tab = 'klassen' | 'lehrer' | 'faecher' | 'raeume' | 'periods' | 'curriculum' | 'assignments' | 'regeln'
+
+const TABS: { id: Tab; label: string }[] = [
+  { id: 'klassen', label: 'Klassen' },
+  { id: 'lehrer', label: 'Lehrer' },
+  { id: 'faecher', label: 'Faecher' },
+  { id: 'raeume', label: 'Raeume' },
+  { id: 'periods', label: 'Zeitraster' },
+  { id: 'curriculum', label: 'Stundentafel' },
+  { id: 'assignments', label: 'Lehrauftraege' },
+  { id: 'regeln', label: 'Regeln (Constraints)' },
+]
+
+export default function StundenplanPage() {
+  const { isDark } = useTheme()
+  const [tab, setTab] = useState<Tab>('klassen')
+  const [token, setToken] = useState(getStundenplanToken())
+
+  const handleSaveToken = () => {
+    setStundenplanToken(token)
+    alert('Token gespeichert. Seite neu laden um die Aenderung zu uebernehmen.')
+  }
+
+  return (
+    <div className={`flex min-h-screen p-4 gap-4 ${isDark ? 'bg-slate-900' : 'bg-slate-50'}`}>
+      <Sidebar selectedTab="stundenplan" />
+
+      <main className="flex-1 max-w-7xl mx-auto">
+        <header className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+              Stundenplan
+            </h1>
+            <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
+              Stammdaten und Regeln fuer den Solver
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <ThemeToggle />
+            <LanguageDropdown />
+          </div>
+        </header>
+
+        <div
+          className={`mb-4 p-3 rounded-xl border backdrop-blur-xl ${
+            isDark ? 'bg-amber-500/10 border-amber-500/30 text-amber-200' : 'bg-amber-50 border-amber-200 text-amber-900'
+          }`}
+        >
+          <details>
+            <summary className="cursor-pointer text-sm font-medium">
+              Dev: JWT-Token setzen (Anmeldung noch nicht integriert)
+            </summary>
+            <div className="mt-2 flex gap-2">
+              <input
+                type="password"
+                value={token}
+                onChange={e => setToken(e.target.value)}
+                placeholder="Bearer-Token"
+                className={`flex-1 px-3 py-1.5 rounded-lg text-sm ${
+                  isDark ? 'bg-white/10 border border-white/20 text-white' : 'bg-white border border-slate-300 text-slate-900'
+                }`}
+              />
+              <button
+                onClick={handleSaveToken}
+                className="px-3 py-1.5 rounded-lg bg-amber-500 hover:bg-amber-600 text-white text-sm font-medium"
+              >
+                Speichern
+              </button>
+            </div>
+          </details>
+        </div>
+
+        <nav className="flex flex-wrap gap-2 mb-6">
+          {TABS.map(t => (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors ${
+                tab === t.id
+                  ? isDark
+                    ? 'bg-white/20 text-white'
+                    : 'bg-indigo-100 text-indigo-900'
+                  : isDark
+                    ? 'bg-white/5 text-white/70 hover:bg-white/10'
+                    : 'bg-white text-slate-700 hover:bg-slate-100 border border-slate-200'
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </nav>
+
+        <section>
+          {tab === 'klassen' && <KlassenManager />}
+          {tab !== 'klassen' && (
+            <div
+              className={`rounded-2xl border backdrop-blur-xl p-8 text-center ${
+                isDark ? 'bg-white/5 border-white/10 text-white/60' : 'bg-white/80 border-black/10 text-slate-500'
+              }`}
+            >
+              <p className="text-lg">Noch nicht implementiert: {TABS.find(t => t.id === tab)?.label}</p>
+              <p className="text-sm mt-2">
+                Das Klassen-Modul ist der Prototyp. Die anderen Stammdaten und alle 15 Constraints folgen dem gleichen Muster.
+              </p>
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  )
+}