5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1058 lines
57 KiB
TypeScript
1058 lines
57 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Companion Module Developer Dashboard
|
|
*
|
|
* Zentrales Dashboard fuer die Entwicklung des Companion/Lesson-Modus:
|
|
* - Entwicklungsroadmap mit Phasen
|
|
* - Feature Tracking
|
|
* - Lehrer-Feedback Sammlung
|
|
* - Backlog Management
|
|
* - System-Infos
|
|
*/
|
|
|
|
import AdminLayout from '@/components/admin/AdminLayout'
|
|
import SystemInfoSection, { SYSTEM_INFO_CONFIGS } from '@/components/admin/SystemInfoSection'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
// ==================== TYPES ====================
|
|
|
|
interface RoadmapPhase {
|
|
id: string
|
|
name: string
|
|
status: 'completed' | 'in_progress' | 'planned' | 'future'
|
|
progress: number
|
|
startDate?: string
|
|
endDate?: string
|
|
description: string
|
|
features: string[]
|
|
}
|
|
|
|
interface Feature {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
priority: 'critical' | 'high' | 'medium' | 'low'
|
|
status: 'done' | 'in_progress' | 'todo' | 'backlog'
|
|
phase: string
|
|
effort: 'small' | 'medium' | 'large' | 'epic'
|
|
assignee?: string
|
|
dueDate?: string
|
|
feedback?: string[]
|
|
}
|
|
|
|
interface TeacherFeedback {
|
|
id: string
|
|
teacher: string
|
|
date: string
|
|
type: 'bug' | 'feature_request' | 'improvement' | 'praise' | 'question'
|
|
priority: 'critical' | 'high' | 'medium' | 'low'
|
|
status: 'new' | 'acknowledged' | 'planned' | 'implemented' | 'declined'
|
|
title: string
|
|
description: string
|
|
relatedFeature?: string
|
|
response?: string
|
|
}
|
|
|
|
// ==================== INITIAL DATA ====================
|
|
|
|
const roadmapPhases: RoadmapPhase[] = [
|
|
{
|
|
id: 'phase-1',
|
|
name: 'Phase 1: Core Engine',
|
|
status: 'completed',
|
|
progress: 100,
|
|
startDate: '2026-01-10',
|
|
endDate: '2026-01-14',
|
|
description: 'Grundlegende State Machine und API-Endpunkte',
|
|
features: [
|
|
'Finite State Machine (5 Phasen)',
|
|
'Timer Service mit Countdown',
|
|
'Phasenspezifische Suggestions',
|
|
'REST API Endpoints',
|
|
'In-Memory Session Storage',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-2',
|
|
name: 'Phase 2: Frontend Integration',
|
|
status: 'completed',
|
|
progress: 100,
|
|
startDate: '2026-01-14',
|
|
endDate: '2026-01-14',
|
|
description: 'Integration in das Studio-Frontend',
|
|
features: [
|
|
'Lesson-Modus im Companion',
|
|
'Timer-Anzeige mit Warning/Overtime',
|
|
'Phasen-Timeline Visualisierung',
|
|
'Suggestions pro Phase',
|
|
'Session Start/End UI',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-2b',
|
|
name: 'Phase 2b: Teacher UX Optimierung',
|
|
status: 'completed',
|
|
progress: 100,
|
|
startDate: '2026-01-15',
|
|
endDate: '2026-01-15',
|
|
description: 'Forschungsbasierte UX-Verbesserungen fuer intuitive Lehrer-Bedienung',
|
|
features: [
|
|
'Visual Pie Timer (Kreis statt Zahlen)',
|
|
'Phasen-Farbschema (Blau→Orange→Gruen→Lila→Grau)',
|
|
'Quick Actions Bar (+5min, Pause, Skip)',
|
|
'Tablet-First Responsive Design',
|
|
'Large Touch Targets (48x48px min)',
|
|
'High Contrast fuer Beamer',
|
|
'Audio Cues (sanfte Toene)',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-3',
|
|
name: 'Phase 3: Persistenz',
|
|
status: 'completed',
|
|
progress: 100,
|
|
startDate: '2026-01-15',
|
|
endDate: '2026-01-15',
|
|
description: 'Datenbank-Anbindung und Session-Persistenz',
|
|
features: [
|
|
'PostgreSQL Integration (done)',
|
|
'SQLAlchemy Models (done)',
|
|
'Session Repository (done)',
|
|
'Alembic Migration Scripts (done)',
|
|
'Session History API (done)',
|
|
'Hybrid Storage (Memory+DB) (done)',
|
|
'Lehrer-spezifische Settings (backlog)',
|
|
'Keycloak Auth Integration (backlog)',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-4',
|
|
name: 'Phase 4: Content Integration',
|
|
status: 'completed',
|
|
progress: 100,
|
|
startDate: '2026-01-15',
|
|
endDate: '2026-01-15',
|
|
description: 'Verknuepfung mit Learning Units',
|
|
features: [
|
|
'Lesson Templates (done)',
|
|
'Fachspezifische Unit-Vorschlaege (done)',
|
|
'Hausaufgaben-Tracker (done)',
|
|
'Material-Verknuepfung (done)',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-5',
|
|
name: 'Phase 5: Analytics',
|
|
status: 'completed',
|
|
progress: 100,
|
|
startDate: '2026-01-15',
|
|
endDate: '2026-01-15',
|
|
description: 'Unterrichtsanalyse und Optimierung (ohne wertende Metriken)',
|
|
features: [
|
|
'Phasen-Dauer Statistiken (done)',
|
|
'Overtime-Analyse (done)',
|
|
'Post-Lesson Reflection API (done)',
|
|
'Lehrer-Dashboard UI (done)',
|
|
'HTML/PDF Export (done)',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-6',
|
|
name: 'Phase 6: Real-time',
|
|
status: 'completed',
|
|
progress: 100,
|
|
startDate: '2026-01-15',
|
|
endDate: '2026-01-15',
|
|
description: 'WebSocket-basierte Echtzeit-Updates',
|
|
features: [
|
|
'WebSocket API Endpoint (done)',
|
|
'Connection Manager mit Multi-Device Support (done)',
|
|
'Timer Broadcast Loop (1-Sekunden-Genauigkeit) (done)',
|
|
'Client-seitiger WebSocket Handler (done)',
|
|
'Automatischer Reconnect mit Fallback zu Polling (done)',
|
|
'Phase Change & Session End Notifications (done)',
|
|
'Connection Status Indicator (done)',
|
|
'WebSocket Tests (done)',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-7',
|
|
name: 'Phase 7: Erweiterungen',
|
|
status: 'completed',
|
|
progress: 100,
|
|
startDate: '2026-01-15',
|
|
endDate: '2026-01-15',
|
|
description: 'Lehrer-Feedback und Authentifizierung',
|
|
features: [
|
|
'Teacher Feedback API (done)',
|
|
'Feedback Modal im Lehrer-Frontend (done)',
|
|
'Keycloak Auth Integration (done)',
|
|
'Optional Auth Dependency (done)',
|
|
'Feedback DB Model & Migration (done)',
|
|
'Feedback Repository (done)',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-8',
|
|
name: 'Phase 8: Schuljahres-Begleiter',
|
|
status: 'in_progress',
|
|
progress: 85,
|
|
startDate: '2026-01-15',
|
|
description: '2-Schichten-Modell: Makro-Phasen (Schuljahr) + Mikro-Engine (Events/Routinen)',
|
|
features: [
|
|
'Kontext-Datenmodell (TeacherContextDB, SchoolyearEventDB, RecurringRoutineDB) (done)',
|
|
'Alembic Migration 007 (done)',
|
|
'GET /v1/context Endpoint (done)',
|
|
'Events & Routinen CRUD-APIs (done)',
|
|
'Bundeslaender & Schularten Stammdaten (done)',
|
|
'Antizipations-Engine mit 12 Regeln (done)',
|
|
'GET /v1/suggestions Endpoint (done)',
|
|
'Dynamische Sidebar /v1/sidebar (done)',
|
|
'Schuljahres-Pfad /v1/path (done)',
|
|
'Frontend ContextBar Component (done)',
|
|
'Frontend Dynamic Sidebar (done)',
|
|
'Frontend PathPanel Component (done)',
|
|
'Main Content Actions Integration (done)',
|
|
'Onboarding-Flow (geplant)',
|
|
],
|
|
},
|
|
{
|
|
id: 'phase-9',
|
|
name: 'Phase 9: Zukunft',
|
|
status: 'future',
|
|
progress: 0,
|
|
description: 'Weitere geplante Features',
|
|
features: [
|
|
'Push Notifications',
|
|
'Dark Mode',
|
|
'Lesson Templates Library (erweitert)',
|
|
'Multi-Language Support',
|
|
'KI-Assistenz fuer Unterrichtsplanung',
|
|
],
|
|
},
|
|
]
|
|
|
|
const initialFeatures: Feature[] = [
|
|
// Phase 1 - Done
|
|
{ id: 'f1', title: 'LessonPhase Enum', description: '7 Zustaende: not_started, 5 Phasen, ended', priority: 'critical', status: 'done', phase: 'phase-1', effort: 'small' },
|
|
{ id: 'f2', title: 'LessonSession Dataclass', description: 'Session-Datenmodell mit History', priority: 'critical', status: 'done', phase: 'phase-1', effort: 'medium' },
|
|
{ id: 'f3', title: 'FSM Transitions', description: 'Erlaubte Phasen-Uebergaenge', priority: 'critical', status: 'done', phase: 'phase-1', effort: 'medium' },
|
|
{ id: 'f4', title: 'PhaseTimer Service', description: 'Countdown, Warning, Overtime', priority: 'high', status: 'done', phase: 'phase-1', effort: 'medium' },
|
|
{ id: 'f5', title: 'SuggestionEngine', description: 'Phasenspezifische Aktivitaets-Vorschlaege', priority: 'high', status: 'done', phase: 'phase-1', effort: 'large' },
|
|
{ id: 'f6', title: 'REST API Endpoints', description: '10 Endpoints unter /api/classroom', priority: 'critical', status: 'done', phase: 'phase-1', effort: 'large' },
|
|
|
|
// Phase 2 - Done
|
|
{ id: 'f7', title: 'Mode Toggle (3 Modi)', description: 'Begleiter, Stunde, Klassisch', priority: 'high', status: 'done', phase: 'phase-2', effort: 'small' },
|
|
{ id: 'f8', title: 'Timer-Display', description: 'Grosser Countdown mit Styling', priority: 'high', status: 'done', phase: 'phase-2', effort: 'medium' },
|
|
{ id: 'f9', title: 'Phasen-Timeline', description: 'Horizontale 5-Phasen-Anzeige', priority: 'high', status: 'done', phase: 'phase-2', effort: 'medium' },
|
|
{ id: 'f10', title: 'Control Buttons', description: 'Naechste Phase, Beenden', priority: 'high', status: 'done', phase: 'phase-2', effort: 'small' },
|
|
{ id: 'f11', title: 'Suggestions Cards', description: 'Aktivitaets-Vorschlaege UI', priority: 'medium', status: 'done', phase: 'phase-2', effort: 'medium' },
|
|
{ id: 'f12', title: 'Session Start Form', description: 'Klasse, Fach, Thema auswaehlen', priority: 'high', status: 'done', phase: 'phase-2', effort: 'small' },
|
|
|
|
// Phase 3 - In Progress (Persistenz)
|
|
{ id: 'f13', title: 'PostgreSQL Models', description: 'SQLAlchemy Models fuer Sessions (LessonSessionDB, PhaseHistoryDB, TeacherSettingsDB)', priority: 'critical', status: 'done', phase: 'phase-3', effort: 'medium' },
|
|
{ id: 'f14', title: 'Session Repository', description: 'CRUD Operationen fuer Sessions (SessionRepository, TeacherSettingsRepository)', priority: 'critical', status: 'done', phase: 'phase-3', effort: 'medium' },
|
|
{ id: 'f15', title: 'Migration Scripts', description: 'Alembic Migrationen fuer Classroom Tables', priority: 'high', status: 'done', phase: 'phase-3', effort: 'small' },
|
|
{ id: 'f16', title: 'Teacher Settings', description: 'Individuelle Phasen-Dauern speichern (API + Settings Modal UI)', priority: 'medium', status: 'done', phase: 'phase-7', effort: 'medium' },
|
|
{ id: 'f17', title: 'Session History API', description: 'GET /history/{teacher_id} mit Pagination', priority: 'medium', status: 'done', phase: 'phase-3', effort: 'small' },
|
|
|
|
// Phase 4 - In Progress (Content)
|
|
{ id: 'f18', title: 'Unit-Vorschlaege', description: 'Fachspezifische Learning Units pro Phase (Mathe, Deutsch, Englisch, Bio, Physik, Informatik)', priority: 'high', status: 'done', phase: 'phase-4', effort: 'large' },
|
|
{ id: 'f19', title: 'Material-Verknuepfung', description: 'Dokumente an Phasen anhaengen (PhaseMaterial Model, Repository, 8 API-Endpoints, Frontend-Integration)', priority: 'medium', status: 'done', phase: 'phase-4', effort: 'medium' },
|
|
{ id: 'f20', title: 'Hausaufgaben-Tracker', description: 'CRUD API fuer Hausaufgaben mit Status und Faelligkeit', priority: 'medium', status: 'done', phase: 'phase-4', effort: 'medium' },
|
|
|
|
// ==================== NEUE UX FEATURES (aus Research) ====================
|
|
|
|
// P0 - KRITISCH (UX Research basiert)
|
|
{ id: 'f21', title: 'Visual Pie Timer', description: 'Kreisfoermiger Countdown mit Farbverlauf (Gruen→Gelb→Rot) - reduziert Stress laut Forschung', priority: 'critical', status: 'done', phase: 'phase-2', effort: 'large' },
|
|
{ id: 'f22', title: 'Database Persistence', description: 'PostgreSQL statt In-Memory - Sessions ueberleben Neustart (Hybrid Storage)', priority: 'critical', status: 'done', phase: 'phase-3', effort: 'large' },
|
|
{ id: 'f23', title: 'Teacher Auth Integration', description: 'Keycloak-Anbindung mit optionalem Demo-User Fallback', priority: 'critical', status: 'done', phase: 'phase-7', effort: 'large' },
|
|
{ id: 'f24', title: 'Tablet-First Responsive', description: 'Optimiert fuer 10" Touch-Screens, Einhand-Bedienung im Klassenraum', priority: 'critical', status: 'done', phase: 'phase-2b', effort: 'medium' },
|
|
|
|
// P1 - WICHTIG (UX Research basiert)
|
|
{ id: 'f25', title: 'Phasen-Farbschema', description: 'Forschungsbasierte Farben: Blau(Einstieg), Orange(Erarbeitung), Gruen(Sicherung), Lila(Transfer), Grau(Reflexion)', priority: 'high', status: 'done', phase: 'phase-2b', effort: 'medium' },
|
|
{ id: 'f26', title: 'Quick Actions Bar', description: '+5min, Pause, Skip-Phase als One-Click Touch-Buttons (min 56px)', priority: 'high', status: 'done', phase: 'phase-2b', effort: 'medium' },
|
|
{ id: 'f27', title: 'Pause Timer API', description: 'POST /sessions/{id}/pause - Timer anhalten bei Stoerungen', priority: 'high', status: 'done', phase: 'phase-2b', effort: 'small' },
|
|
{ id: 'f28', title: 'Extend Phase API', description: 'POST /sessions/{id}/extend?minutes=5 - Phase verlaengern', priority: 'high', status: 'done', phase: 'phase-2b', effort: 'small' },
|
|
{ id: 'f29', title: 'Non-Intrusive Suggestions', description: 'Vorschlaege in dedizierter Sektion, nicht als stoerende Popups', priority: 'high', status: 'done', phase: 'phase-2', effort: 'medium' },
|
|
{ id: 'f30', title: 'WebSocket Real-Time Timer', description: 'Sub-Sekunden Genauigkeit statt 5s Polling', priority: 'high', status: 'done', phase: 'phase-6', effort: 'large' },
|
|
{ id: 'f31', title: 'Mobile Breakpoints', description: 'Responsive Design fuer 600px, 900px, 1200px Screens', priority: 'high', status: 'done', phase: 'phase-2b', effort: 'medium' },
|
|
{ id: 'f32', title: 'Large Touch Targets', description: 'Alle Buttons min 48x48px fuer sichere Touch-Bedienung', priority: 'high', status: 'done', phase: 'phase-2b', effort: 'small' },
|
|
|
|
// P2 - NICE-TO-HAVE (UX Research basiert)
|
|
{ id: 'f33', title: 'Audio Cues', description: 'Sanfte Toene bei Phasenwechsel und Warnungen (Taste A zum Toggle)', priority: 'medium', status: 'done', phase: 'phase-2b', effort: 'small' },
|
|
{ id: 'f34', title: 'Keyboard Shortcuts', description: 'Space=Pause, N=Next Phase, E=Extend, H=High Contrast - fuer Desktop-Nutzung', priority: 'medium', status: 'done', phase: 'phase-2b', effort: 'small' },
|
|
{ id: 'f35', title: 'Offline Timer Fallback', description: 'Client-seitige Timer-Berechnung bei Verbindungsverlust', priority: 'medium', status: 'done', phase: 'phase-2b', effort: 'medium' },
|
|
{ id: 'f36', title: 'Post-Lesson Analytics', description: 'Phasen-Dauer Statistiken ohne wertende Metriken (SessionSummary, TeacherAnalytics, 4 API-Endpoints)', priority: 'medium', status: 'done', phase: 'phase-5', effort: 'large' },
|
|
{ id: 'f37', title: 'Lesson Templates', description: '5 System-Templates + eigene Vorlagen erstellen/speichern', priority: 'medium', status: 'done', phase: 'phase-4', effort: 'medium' },
|
|
{ id: 'f38', title: 'ARIA Labels', description: 'Screen-Reader Unterstuetzung fuer Barrierefreiheit', priority: 'medium', status: 'done', phase: 'phase-2b', effort: 'small' },
|
|
{ id: 'f39', title: 'High Contrast Mode', description: 'Erhoehter Kontrast fuer Beamer/Projektor (Taste H)', priority: 'medium', status: 'done', phase: 'phase-2b', effort: 'small' },
|
|
{ id: 'f40', title: 'Export to PDF', description: 'Stundenprotokoll als druckbares HTML mit Browser-PDF-Export (Strg+P)', priority: 'low', status: 'done', phase: 'phase-5', effort: 'medium' },
|
|
{ id: 'f41', title: 'Overtime-Analyse', description: 'Phase-by-Phase Overtime-Statistiken und Trends', priority: 'medium', status: 'done', phase: 'phase-5', effort: 'medium' },
|
|
{ id: 'f42', title: 'Post-Lesson Reflection', description: 'Reflexions-Notizen nach Stundenende (CRUD API, DB-Model)', priority: 'medium', status: 'done', phase: 'phase-5', effort: 'medium' },
|
|
{ id: 'f43', title: 'Phase Duration Trends', description: 'Visualisierung der Phasendauer-Entwicklung', priority: 'medium', status: 'done', phase: 'phase-5', effort: 'small' },
|
|
{ id: 'f44', title: 'Analytics Dashboard UI', description: 'Lehrer-Frontend fuer Analytics-Anzeige (Phasen-Bars, Overtime, Reflection)', priority: 'high', status: 'done', phase: 'phase-5', effort: 'medium' },
|
|
|
|
// Phase 6 - Real-time (WebSocket)
|
|
{ id: 'f45', title: 'WebSocket API Endpoint', description: 'Real-time Verbindung unter /api/classroom/ws/{session_id}', priority: 'critical', status: 'done', phase: 'phase-6', effort: 'large' },
|
|
{ id: 'f46', title: 'Connection Manager', description: 'Multi-Device Support mit Session-basierter Verbindungsverwaltung', priority: 'critical', status: 'done', phase: 'phase-6', effort: 'medium' },
|
|
{ id: 'f47', title: 'Timer Broadcast Loop', description: 'Hintergrund-Task sendet Timer-Updates jede Sekunde an alle Clients', priority: 'critical', status: 'done', phase: 'phase-6', effort: 'medium' },
|
|
{ id: 'f48', title: 'Client WebSocket Handler', description: 'Frontend-Integration mit automatischem Reconnect und Fallback zu Polling', priority: 'high', status: 'done', phase: 'phase-6', effort: 'large' },
|
|
{ id: 'f49', title: 'Phase Change Notifications', description: 'Echtzeit-Benachrichtigung bei Phasenwechsel an alle Devices', priority: 'high', status: 'done', phase: 'phase-6', effort: 'small' },
|
|
{ id: 'f50', title: 'Session End Notifications', description: 'Automatische Benachrichtigung bei Stundenende', priority: 'high', status: 'done', phase: 'phase-6', effort: 'small' },
|
|
{ id: 'f51', title: 'Connection Status Indicator', description: 'UI-Element zeigt Live/Polling/Offline Status', priority: 'medium', status: 'done', phase: 'phase-6', effort: 'small' },
|
|
{ id: 'f52', title: 'WebSocket Status API', description: 'GET /ws/status zeigt aktive Sessions und Verbindungszahlen', priority: 'low', status: 'done', phase: 'phase-6', effort: 'small' },
|
|
|
|
// Phase 7 - Erweiterungen (Auth & Feedback)
|
|
{ id: 'f53', title: 'Teacher Feedback API', description: 'POST/GET /feedback Endpoints fuer Bug-Reports und Feature-Requests', priority: 'high', status: 'done', phase: 'phase-7', effort: 'large' },
|
|
{ id: 'f54', title: 'Feedback Modal UI', description: 'Floating Action Button und Modal im Lehrer-Frontend', priority: 'high', status: 'done', phase: 'phase-7', effort: 'medium' },
|
|
{ id: 'f55', title: 'Feedback DB Model', description: 'TeacherFeedbackDB SQLAlchemy Model mit Alembic Migration', priority: 'high', status: 'done', phase: 'phase-7', effort: 'medium' },
|
|
{ id: 'f56', title: 'Feedback Repository', description: 'CRUD-Operationen fuer Feedback mit Status-Management', priority: 'high', status: 'done', phase: 'phase-7', effort: 'medium' },
|
|
{ id: 'f57', title: 'Keycloak Auth Integration', description: 'Optional Auth Dependency mit Demo-User Fallback', priority: 'critical', status: 'done', phase: 'phase-7', effort: 'medium' },
|
|
{ id: 'f58', title: 'Feedback Stats API', description: 'GET /feedback/stats fuer Dashboard-Statistiken', priority: 'medium', status: 'done', phase: 'phase-7', effort: 'small' },
|
|
|
|
// Phase 8 - Schuljahres-Begleiter (2-Schichten-Modell)
|
|
{ id: 'f59', title: 'TeacherContextDB Model', description: 'Makro-Kontext pro Lehrer (Bundesland, Schulart, Schuljahr, Phase)', priority: 'critical', status: 'done', phase: 'phase-8', effort: 'medium' },
|
|
{ id: 'f60', title: 'SchoolyearEventDB Model', description: 'Events (Klausuren, Elternabende, Klassenfahrten, etc.)', priority: 'critical', status: 'done', phase: 'phase-8', effort: 'medium' },
|
|
{ id: 'f61', title: 'RecurringRoutineDB Model', description: 'Wiederkehrende Routinen (Konferenzen, Sprechstunden, etc.)', priority: 'critical', status: 'done', phase: 'phase-8', effort: 'medium' },
|
|
{ id: 'f62', title: 'Alembic Migration 007', description: 'DB-Migration fuer teacher_contexts, schoolyear_events, recurring_routines', priority: 'critical', status: 'done', phase: 'phase-8', effort: 'small' },
|
|
{ id: 'f63', title: 'GET /v1/context Endpoint', description: 'Makro-Kontext abrufen (Schuljahr, Woche, Phase, Flags)', priority: 'critical', status: 'done', phase: 'phase-8', effort: 'large' },
|
|
{ id: 'f64', title: 'PUT /v1/context Endpoint', description: 'Kontext aktualisieren (Bundesland, Schulart, Schuljahr)', priority: 'high', status: 'done', phase: 'phase-8', effort: 'medium' },
|
|
{ id: 'f65', title: 'Events CRUD-API', description: 'GET/POST/DELETE /v1/events mit Status und Vorbereitung', priority: 'high', status: 'done', phase: 'phase-8', effort: 'large' },
|
|
{ id: 'f66', title: 'Routines CRUD-API', description: 'GET/POST/DELETE /v1/routines mit Wiederholungsmustern', priority: 'high', status: 'done', phase: 'phase-8', effort: 'large' },
|
|
{ id: 'f67', title: 'Stammdaten-APIs', description: '/v1/federal-states, /v1/school-types, /v1/macro-phases, /v1/event-types', priority: 'medium', status: 'done', phase: 'phase-8', effort: 'small' },
|
|
{ id: 'f68', title: 'Context Repositories', description: 'TeacherContextRepository, SchoolyearEventRepository, RecurringRoutineRepository', priority: 'high', status: 'done', phase: 'phase-8', effort: 'large' },
|
|
{ id: 'f69', title: 'Antizipations-Engine', description: 'Signal-Collector + Regel-Engine (12 Regeln) fuer proaktive Vorschlaege', priority: 'high', status: 'done', phase: 'phase-8', effort: 'epic' },
|
|
{ id: 'f70', title: 'GET /v1/suggestions Endpoint', description: 'Kontextbasierte Vorschlaege mit active_contexts[]', priority: 'high', status: 'done', phase: 'phase-8', effort: 'large' },
|
|
{ id: 'f71', title: 'GET /v1/sidebar Endpoint', description: 'Dynamisches Sidebar-Model (Companion vs Classic Mode)', priority: 'medium', status: 'done', phase: 'phase-8', effort: 'medium' },
|
|
{ id: 'f72', title: 'GET /v1/path Endpoint', description: 'Schuljahres-Meilensteine mit Status (DONE, CURRENT, UPCOMING)', priority: 'medium', status: 'done', phase: 'phase-8', effort: 'medium' },
|
|
{ id: 'f73', title: 'ContextBar Component', description: 'Schuljahr, Woche, Bundesland Anzeige im Header', priority: 'medium', status: 'done', phase: 'phase-8', effort: 'medium' },
|
|
{ id: 'f74', title: 'Begleiter-Sidebar', description: 'Top 5 relevante Module + Alle Module + Suche', priority: 'medium', status: 'done', phase: 'phase-8', effort: 'large' },
|
|
{ id: 'f75', title: 'PathPanel Component', description: 'Vertikaler Schuljahres-Pfad mit "Du bist hier" Markierung', priority: 'medium', status: 'done', phase: 'phase-8', effort: 'medium' },
|
|
{ id: 'f76', title: 'Onboarding-Flow', description: 'Bundesland, Schulart, Schuljahres-Start, erste Klassen', priority: 'high', status: 'backlog', phase: 'phase-8', effort: 'large' },
|
|
{ id: 'f77', title: 'Complete Onboarding API', description: 'POST /v1/context/complete-onboarding zum Abschliessen', priority: 'high', status: 'done', phase: 'phase-8', effort: 'small' },
|
|
]
|
|
|
|
const initialFeedback: TeacherFeedback[] = [
|
|
{
|
|
id: 'fb1',
|
|
teacher: 'Frau Mueller',
|
|
date: '2026-01-14',
|
|
type: 'feature_request',
|
|
priority: 'high',
|
|
status: 'implemented',
|
|
title: 'Individuelle Phasen-Dauern',
|
|
description: 'Ich moechte die Dauern der einzelnen Phasen selbst festlegen koennen, je nach Unterrichtseinheit.',
|
|
relatedFeature: 'f16',
|
|
response: 'In Phase 7 implementiert: Einstellungen-Button oeffnet Modal zur Konfiguration der Phasendauern.',
|
|
},
|
|
{
|
|
id: 'fb2',
|
|
teacher: 'Herr Schmidt',
|
|
date: '2026-01-14',
|
|
type: 'improvement',
|
|
priority: 'medium',
|
|
status: 'implemented',
|
|
title: 'Akustisches Signal bei Phasen-Ende',
|
|
description: 'Ein kurzer Ton wuerde helfen, das Ende einer Phase nicht zu verpassen.',
|
|
relatedFeature: 'f33',
|
|
response: 'Audio Cues wurden in Phase 2b implementiert - sanfte Toene statt harter Alarme. Taste A zum Toggle.',
|
|
},
|
|
{
|
|
id: 'fb3',
|
|
teacher: 'Frau Wagner',
|
|
date: '2026-01-15',
|
|
type: 'praise',
|
|
priority: 'low',
|
|
status: 'acknowledged',
|
|
title: 'Super einfache Bedienung!',
|
|
description: 'Die Stunden-Steuerung ist sehr intuitiv. Meine erste Stunde damit hat super geklappt.',
|
|
},
|
|
{
|
|
id: 'fb4',
|
|
teacher: 'Herr Becker',
|
|
date: '2026-01-15',
|
|
type: 'bug',
|
|
priority: 'high',
|
|
status: 'implemented',
|
|
title: 'Timer stoppt bei Browser-Tab-Wechsel',
|
|
description: 'Wenn ich den Browser-Tab wechsle und zurueckkomme, zeigt der Timer manchmal falsche Werte.',
|
|
relatedFeature: 'f35',
|
|
response: 'Offline Timer Fallback in Phase 2b implementiert + WebSocket Real-time in Phase 6.',
|
|
},
|
|
{
|
|
id: 'fb5',
|
|
teacher: 'Frau Klein',
|
|
date: '2026-01-15',
|
|
type: 'feature_request',
|
|
priority: 'critical',
|
|
status: 'implemented',
|
|
title: 'Pause-Funktion',
|
|
description: 'Manchmal muss ich die Stunde kurz unterbrechen (Stoerung, Durchsage). Eine Pause-Funktion waere super.',
|
|
relatedFeature: 'f27',
|
|
response: 'Pause Timer API und Quick Actions Bar wurden in Phase 2b implementiert. Tastenkuerzel: Leertaste.',
|
|
},
|
|
{
|
|
id: 'fb6',
|
|
teacher: 'Herr Hoffmann',
|
|
date: '2026-01-15',
|
|
type: 'feature_request',
|
|
priority: 'high',
|
|
status: 'implemented',
|
|
title: 'Visueller Timer statt Zahlen',
|
|
description: 'Der numerische Countdown ist manchmal stressig. Ein visueller Kreis-Timer waere entspannter.',
|
|
relatedFeature: 'f21',
|
|
response: 'Visual Pie Timer mit Farbverlauf (Gruen→Gelb→Rot) wurde in Phase 2b implementiert.',
|
|
},
|
|
{
|
|
id: 'fb7',
|
|
teacher: 'Frau Richter',
|
|
date: '2026-01-15',
|
|
type: 'feature_request',
|
|
priority: 'high',
|
|
status: 'implemented',
|
|
title: 'Tablet-Nutzung im Klassenraum',
|
|
description: 'Ich laufe waehrend des Unterrichts herum. Die Anzeige muesste auch auf meinem iPad gut funktionieren.',
|
|
relatedFeature: 'f24',
|
|
response: 'Tablet-First Responsive Design wurde in Phase 2b implementiert. Touch-Targets min 48x48px.',
|
|
},
|
|
{
|
|
id: 'fb8',
|
|
teacher: 'Herr Weber',
|
|
date: '2026-01-15',
|
|
type: 'improvement',
|
|
priority: 'medium',
|
|
status: 'implemented',
|
|
title: '+5 Minuten Button',
|
|
description: 'Manchmal brauche ich einfach nur 5 Minuten mehr fuer eine Phase. Ein Schnell-Button waere praktisch.',
|
|
relatedFeature: 'f28',
|
|
response: 'In Quick Actions Bar integriert. Tastenkuerzel: E.',
|
|
},
|
|
{
|
|
id: 'fb9',
|
|
teacher: 'Frau Schneider',
|
|
date: '2026-01-15',
|
|
type: 'praise',
|
|
priority: 'low',
|
|
status: 'acknowledged',
|
|
title: 'Phasen-Vorschlaege sind hilfreich',
|
|
description: 'Die Aktivitaets-Vorschlaege pro Phase geben mir gute Ideen. Weiter so!',
|
|
},
|
|
{
|
|
id: 'fb10',
|
|
teacher: 'Herr Meier',
|
|
date: '2026-01-15',
|
|
type: 'feature_request',
|
|
priority: 'medium',
|
|
status: 'implemented',
|
|
title: 'Stundenvorlage speichern',
|
|
description: 'Fuer Mathe-Stunden nutze ich immer die gleiche Phasen-Aufteilung. Waere cool, das als Template zu speichern.',
|
|
relatedFeature: 'f37',
|
|
response: 'Lesson Templates wurden in Phase 4 implementiert. 5 System-Templates + eigene Vorlagen moeglich.',
|
|
},
|
|
]
|
|
|
|
// ==================== SYSTEM INFO CONFIG ====================
|
|
|
|
const companionSystemInfo = {
|
|
title: 'Companion Module System Info',
|
|
description: 'Technische Details zur Classroom State Machine',
|
|
version: '1.1.0',
|
|
architecture: {
|
|
layers: [
|
|
{
|
|
title: 'Frontend Layer',
|
|
components: [
|
|
'companion.py (Lesson-Modus UI)',
|
|
'Mode Toggle (Begleiter/Stunde/Klassisch)',
|
|
'Timer Display Component',
|
|
'Phase Timeline Component',
|
|
'Suggestions Cards',
|
|
'Material Design Icons (CDN)',
|
|
],
|
|
color: 'bg-blue-50',
|
|
},
|
|
{
|
|
title: 'API Layer',
|
|
components: [
|
|
'classroom_api.py (FastAPI Router)',
|
|
'POST /sessions - Session erstellen',
|
|
'POST /sessions/{id}/start - Stunde starten',
|
|
'POST /sessions/{id}/next-phase - Naechste Phase',
|
|
'POST /sessions/{id}/pause - Timer pausieren',
|
|
'POST /sessions/{id}/extend - Phase verlaengern',
|
|
'GET /sessions/{id}/timer - Timer Status',
|
|
'GET /sessions/{id}/suggestions - Vorschlaege',
|
|
'GET /history/{teacher_id} - Session History',
|
|
'GET /health - Health Check mit DB-Status',
|
|
'GET/PUT /v1/context - Schuljahres-Kontext',
|
|
'GET/POST/DELETE /v1/events - Events CRUD',
|
|
'GET/POST/DELETE /v1/routines - Routinen CRUD',
|
|
'GET /v1/federal-states, /v1/school-types, etc.',
|
|
],
|
|
color: 'bg-green-50',
|
|
},
|
|
{
|
|
title: 'Engine Layer',
|
|
components: [
|
|
'classroom_engine/ Package',
|
|
'models.py - LessonPhase, LessonSession',
|
|
'fsm.py - LessonStateMachine',
|
|
'timer.py - PhaseTimer',
|
|
'suggestions.py - SuggestionEngine',
|
|
'context_models.py - TeacherContextDB, SchoolyearEventDB, RecurringRoutineDB',
|
|
'antizipation.py - AntizipationsEngine (geplant)',
|
|
],
|
|
color: 'bg-amber-50',
|
|
},
|
|
{
|
|
title: 'Storage Layer',
|
|
components: [
|
|
'Hybrid Storage (Memory + PostgreSQL)',
|
|
'SessionRepository (CRUD)',
|
|
'TeacherSettingsRepository',
|
|
'TeacherContextRepository (Phase 8)',
|
|
'SchoolyearEventRepository (Phase 8)',
|
|
'RecurringRoutineRepository (Phase 8)',
|
|
'Alembic Migrations (007: Phase 8 Tables)',
|
|
'Session History API',
|
|
],
|
|
color: 'bg-purple-50',
|
|
},
|
|
],
|
|
},
|
|
features: [
|
|
{ name: '5-Phasen-Modell', status: 'active' as const, description: 'Einstieg, Erarbeitung, Sicherung, Transfer, Reflexion' },
|
|
{ name: 'Timer mit Warning', status: 'active' as const, description: '2 Minuten Warnung vor Phasen-Ende' },
|
|
{ name: 'Overtime Detection', status: 'active' as const, description: 'Anzeige wenn Phase ueberzogen wird' },
|
|
{ name: 'Phasen-Suggestions', status: 'active' as const, description: '3-6 Aktivitaets-Vorschlaege pro Phase' },
|
|
{ name: 'Visual Pie Timer', status: 'active' as const, description: 'Kreisfoermiger Countdown mit Farbverlauf' },
|
|
{ name: 'Quick Actions Bar', status: 'active' as const, description: '+5min, Pause, Skip Buttons' },
|
|
{ name: 'Tablet-First Design', status: 'active' as const, description: 'Touch-optimiert fuer Tablets' },
|
|
{ name: 'Phasen-Farbschema', status: 'active' as const, description: 'Blau→Orange→Gruen→Lila→Grau' },
|
|
{ name: 'Keyboard Shortcuts', status: 'active' as const, description: 'Space=Pause, N=Next, E=Extend, H=Contrast' },
|
|
{ name: 'Audio Cues', status: 'active' as const, description: 'Sanfte Toene bei Phasenwechsel' },
|
|
{ name: 'Offline Timer', status: 'active' as const, description: 'Client-seitige Fallback bei Verbindungsverlust' },
|
|
{ name: 'DB Persistenz', status: 'active' as const, description: 'PostgreSQL Hybrid Storage' },
|
|
{ name: 'Session History', status: 'active' as const, description: 'GET /history/{teacher_id} API' },
|
|
{ name: 'Alembic Migrations', status: 'active' as const, description: 'Versionierte DB-Schema-Aenderungen' },
|
|
{ name: 'Teacher Auth', status: 'active' as const, description: 'Keycloak Integration mit Optional Fallback (Phase 7)' },
|
|
{ name: 'WebSocket Real-time', status: 'active' as const, description: 'Echtzeit-Updates mit 1-Sekunden-Genauigkeit (Phase 6)' },
|
|
{ name: 'Schuljahres-Kontext', status: 'active' as const, description: 'Makro-Phasen, Bundesland, Schulart (Phase 8)' },
|
|
{ name: 'Events & Routinen', status: 'active' as const, description: 'Klausuren, Konferenzen, Elternabende (Phase 8)' },
|
|
{ name: 'Antizipations-Engine', status: 'active' as const, description: '12 Regeln fuer proaktive Vorschlaege (Phase 8)' },
|
|
{ name: 'Dynamische Sidebar', status: 'active' as const, description: 'Top 5 relevante Module + Alle Module (Phase 8)' },
|
|
{ name: 'Schuljahres-Pfad', status: 'active' as const, description: '7 Meilensteine mit Fortschrittsanzeige (Phase 8)' },
|
|
],
|
|
roadmap: [
|
|
{ phase: 'Phase 1: Core Engine', priority: 'high' as const, items: ['FSM', 'Timer', 'Suggestions', 'API'] },
|
|
{ phase: 'Phase 2: Frontend', priority: 'high' as const, items: ['Lesson-Modus UI', 'Timer Display', 'Timeline'] },
|
|
{ phase: 'Phase 2b: UX Optimierung', priority: 'high' as const, items: ['Visual Timer', 'Farbschema', 'Tablet-First', 'Quick Actions'] },
|
|
{ phase: 'Phase 3: Persistenz', priority: 'high' as const, items: ['PostgreSQL', 'Keycloak Auth', 'Session History'] },
|
|
{ phase: 'Phase 4: Content', priority: 'medium' as const, items: ['Unit-Vorschlaege', 'Templates', 'Hausaufgaben'] },
|
|
{ phase: 'Phase 5: Analytics', priority: 'medium' as const, items: ['Statistiken (ohne Bewertung)', 'PDF Export'] },
|
|
{ phase: 'Phase 6: Real-time', priority: 'low' as const, items: ['WebSocket', 'Offline Fallback', 'Multi-Device'] },
|
|
],
|
|
technicalDetails: [
|
|
{ component: 'Backend', technology: 'Python FastAPI', version: '0.123+', description: 'Async REST API' },
|
|
{ component: 'State Machine', technology: 'Python Enum + Dataclass', description: 'Finite State Machine Pattern' },
|
|
{ component: 'Timer', technology: 'datetime.utcnow()', description: 'Server-side Time Calculation' },
|
|
{ component: 'Frontend', technology: 'Vanilla JavaScript ES6+', description: 'In companion.py eingebettet' },
|
|
{ component: 'Icons', technology: 'Material Design Icons', description: 'Via Google Fonts CDN (Apache-2.0)' },
|
|
{ component: 'WebSocket', technology: 'FastAPI WebSocket', description: 'Echtzeit-Updates mit 1-Sekunden-Genauigkeit + Polling Fallback' },
|
|
{ component: 'Database', technology: 'PostgreSQL + SQLAlchemy 2.0', description: 'Hybrid Storage (Memory + DB)' },
|
|
{ component: 'Migrations', technology: 'Alembic 1.14', description: 'Versionierte Schema-Migrationen' },
|
|
],
|
|
privacyNotes: [
|
|
'Keine Schueler-Daten werden gespeichert',
|
|
'Session-Daten sind nur waehrend der Stunde verfuegbar',
|
|
'Lehrer-ID wird fuer Session-Zuordnung verwendet',
|
|
'Keine Tracking-Cookies oder externe Services',
|
|
'Analytics ohne bewertende Metriken (keine "70% Redezeit"-Anzeigen)',
|
|
],
|
|
}
|
|
|
|
// ==================== COMPONENT ====================
|
|
|
|
export default function CompanionDevPage() {
|
|
const [features, setFeatures] = useState<Feature[]>(initialFeatures)
|
|
const [feedback, setFeedback] = useState<TeacherFeedback[]>(initialFeedback)
|
|
const [activeTab, setActiveTab] = useState<'roadmap' | 'features' | 'feedback' | 'backlog'>('roadmap')
|
|
const [selectedPhase, setSelectedPhase] = useState<string | null>(null)
|
|
const [feedbackFilter, setFeedbackFilter] = useState<string>('all')
|
|
|
|
// Data version - increment when adding new features/feedback to force refresh
|
|
const DATA_VERSION = '8.2.0' // Phase 8e: Frontend UI-Komponenten (ContextBar, Sidebar, PathPanel)
|
|
|
|
// Load from localStorage with version check
|
|
useEffect(() => {
|
|
const savedVersion = localStorage.getItem('companion-dev-version')
|
|
const savedFeatures = localStorage.getItem('companion-dev-features')
|
|
const savedFeedback = localStorage.getItem('companion-dev-feedback')
|
|
|
|
// If version mismatch or no version, use initial data and save new version
|
|
if (savedVersion !== DATA_VERSION) {
|
|
console.log(`Companion Dev: Data version updated from ${savedVersion} to ${DATA_VERSION}`)
|
|
localStorage.setItem('companion-dev-version', DATA_VERSION)
|
|
localStorage.setItem('companion-dev-features', JSON.stringify(initialFeatures))
|
|
localStorage.setItem('companion-dev-feedback', JSON.stringify(initialFeedback))
|
|
// State already initialized with initialFeatures/initialFeedback, no need to setFeatures
|
|
return
|
|
}
|
|
|
|
// Load saved data if version matches
|
|
if (savedFeatures) setFeatures(JSON.parse(savedFeatures))
|
|
if (savedFeedback) setFeedback(JSON.parse(savedFeedback))
|
|
}, [])
|
|
|
|
// Save to localStorage
|
|
useEffect(() => {
|
|
localStorage.setItem('companion-dev-features', JSON.stringify(features))
|
|
}, [features])
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('companion-dev-feedback', JSON.stringify(feedback))
|
|
}, [feedback])
|
|
|
|
const getPhaseStats = () => {
|
|
const total = roadmapPhases.length
|
|
const completed = roadmapPhases.filter(p => p.status === 'completed').length
|
|
const inProgress = roadmapPhases.filter(p => p.status === 'in_progress').length
|
|
return { total, completed, inProgress }
|
|
}
|
|
|
|
const getFeatureStats = () => {
|
|
const total = features.length
|
|
const done = features.filter(f => f.status === 'done').length
|
|
const inProgress = features.filter(f => f.status === 'in_progress').length
|
|
return { total, done, inProgress, percentage: Math.round((done / total) * 100) }
|
|
}
|
|
|
|
const getFeedbackStats = () => {
|
|
const total = feedback.length
|
|
const newCount = feedback.filter(f => f.status === 'new').length
|
|
const bugs = feedback.filter(f => f.type === 'bug').length
|
|
const requests = feedback.filter(f => f.type === 'feature_request').length
|
|
return { total, newCount, bugs, requests }
|
|
}
|
|
|
|
const updateFeatureStatus = (id: string, status: Feature['status']) => {
|
|
setFeatures(features.map(f => f.id === id ? { ...f, status } : f))
|
|
}
|
|
|
|
const updateFeedbackStatus = (id: string, status: TeacherFeedback['status']) => {
|
|
setFeedback(feedback.map(f => f.id === id ? { ...f, status } : f))
|
|
}
|
|
|
|
const phaseStats = getPhaseStats()
|
|
const featureStats = getFeatureStats()
|
|
const feedbackStats = getFeedbackStats()
|
|
|
|
const statusColors = {
|
|
done: 'bg-green-100 text-green-800',
|
|
in_progress: 'bg-blue-100 text-blue-800',
|
|
todo: 'bg-amber-100 text-amber-800',
|
|
backlog: 'bg-slate-100 text-slate-600',
|
|
}
|
|
|
|
const priorityColors = {
|
|
critical: 'bg-red-500 text-white',
|
|
high: 'bg-orange-500 text-white',
|
|
medium: 'bg-yellow-500 text-white',
|
|
low: 'bg-slate-400 text-white',
|
|
}
|
|
|
|
const feedbackTypeIcons: Record<TeacherFeedback['type'], string> = {
|
|
bug: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
|
|
feature_request: 'M12 6v6m0 0v6m0-6h6m-6 0H6',
|
|
improvement: 'M13 10V3L4 14h7v7l9-11h-7z',
|
|
praise: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z',
|
|
question: 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
|
|
}
|
|
|
|
const filteredFeedback = feedbackFilter === 'all'
|
|
? feedback
|
|
: feedback.filter(f => f.type === feedbackFilter || f.status === feedbackFilter)
|
|
|
|
return (
|
|
<AdminLayout
|
|
title="Companion Module Development"
|
|
description="Entwicklungs-Dashboard fuer den Lesson-Modus"
|
|
>
|
|
{/* Stats Overview */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="text-sm text-slate-500 mb-1">Roadmap-Phasen</div>
|
|
<div className="text-2xl font-bold text-primary-600">{phaseStats.completed}/{phaseStats.total}</div>
|
|
<div className="text-xs text-slate-400">{phaseStats.inProgress} in Arbeit</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="text-sm text-slate-500 mb-1">Features</div>
|
|
<div className="text-2xl font-bold text-green-600">{featureStats.percentage}%</div>
|
|
<div className="text-xs text-slate-400">{featureStats.done}/{featureStats.total} fertig</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="text-sm text-slate-500 mb-1">Neues Feedback</div>
|
|
<div className="text-2xl font-bold text-amber-600">{feedbackStats.newCount}</div>
|
|
<div className="text-xs text-slate-400">{feedbackStats.total} gesamt</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="text-sm text-slate-500 mb-1">Offene Bugs</div>
|
|
<div className="text-2xl font-bold text-red-600">{feedbackStats.bugs}</div>
|
|
<div className="text-xs text-slate-400">{feedbackStats.requests} Feature-Requests</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="bg-white rounded-xl border border-slate-200 mb-6">
|
|
<div className="border-b border-slate-200">
|
|
<nav className="flex">
|
|
{[
|
|
{ id: 'roadmap', label: 'Roadmap', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
|
|
{ id: 'features', label: 'Features', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },
|
|
{ id: 'feedback', label: 'Lehrer-Feedback', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
|
|
{ id: 'backlog', label: 'Backlog', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
|
|
].map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
|
className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === tab.id
|
|
? 'border-primary-600 text-primary-600'
|
|
: 'border-transparent text-slate-500 hover:text-slate-700'
|
|
}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={tab.icon} />
|
|
</svg>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{/* Roadmap Tab */}
|
|
{activeTab === 'roadmap' && (
|
|
<div className="space-y-4">
|
|
{roadmapPhases.map((phase, index) => (
|
|
<div
|
|
key={phase.id}
|
|
className={`border rounded-xl overflow-hidden ${
|
|
phase.status === 'completed' ? 'border-green-200 bg-green-50/50' :
|
|
phase.status === 'in_progress' ? 'border-blue-200 bg-blue-50/50' :
|
|
phase.status === 'planned' ? 'border-amber-200 bg-amber-50/50' :
|
|
'border-slate-200 bg-slate-50/50'
|
|
}`}
|
|
>
|
|
<div className="p-4">
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
|
|
phase.status === 'completed' ? 'bg-green-500 text-white' :
|
|
phase.status === 'in_progress' ? 'bg-blue-500 text-white' :
|
|
phase.status === 'planned' ? 'bg-amber-500 text-white' :
|
|
'bg-slate-300 text-slate-600'
|
|
}`}>
|
|
{phase.status === 'completed' ? '✓' : index + 1}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-slate-900">{phase.name}</h3>
|
|
<p className="text-sm text-slate-500">{phase.description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
|
phase.status === 'completed' ? 'bg-green-100 text-green-800' :
|
|
phase.status === 'in_progress' ? 'bg-blue-100 text-blue-800' :
|
|
phase.status === 'planned' ? 'bg-amber-100 text-amber-800' :
|
|
'bg-slate-100 text-slate-600'
|
|
}`}>
|
|
{phase.status === 'completed' ? 'Abgeschlossen' :
|
|
phase.status === 'in_progress' ? 'In Arbeit' :
|
|
phase.status === 'planned' ? 'Geplant' : 'Zukunft'}
|
|
</span>
|
|
{phase.startDate && (
|
|
<div className="text-xs text-slate-400 mt-1">
|
|
{phase.startDate} {phase.endDate ? `- ${phase.endDate}` : ''}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
<div className="mt-3 mb-3">
|
|
<div className="flex justify-between text-xs text-slate-500 mb-1">
|
|
<span>Fortschritt</span>
|
|
<span>{phase.progress}%</span>
|
|
</div>
|
|
<div className="w-full bg-slate-200 rounded-full h-2">
|
|
<div
|
|
className={`h-2 rounded-full transition-all ${
|
|
phase.status === 'completed' ? 'bg-green-500' :
|
|
phase.status === 'in_progress' ? 'bg-blue-500' :
|
|
'bg-amber-500'
|
|
}`}
|
|
style={{ width: `${phase.progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{phase.features.map((feature, i) => (
|
|
<span key={i} className="px-2 py-1 bg-white border border-slate-200 rounded text-xs text-slate-600">
|
|
{feature}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Features Tab */}
|
|
{activeTab === 'features' && (
|
|
<div>
|
|
{/* Phase Filter */}
|
|
<div className="flex gap-2 mb-4 flex-wrap">
|
|
<button
|
|
onClick={() => setSelectedPhase(null)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
|
!selectedPhase ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
Alle
|
|
</button>
|
|
{roadmapPhases.map(phase => (
|
|
<button
|
|
key={phase.id}
|
|
onClick={() => setSelectedPhase(phase.id)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
|
selectedPhase === phase.id ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
{phase.name.replace('Phase ', 'P')}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Features List */}
|
|
<div className="space-y-2">
|
|
{features
|
|
.filter(f => !selectedPhase || f.phase === selectedPhase)
|
|
.map(feature => (
|
|
<div key={feature.id} className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg">
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${priorityColors[feature.priority]}`}>
|
|
{feature.priority}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="font-medium text-slate-900 truncate">{feature.title}</div>
|
|
<div className="text-xs text-slate-500 truncate">{feature.description}</div>
|
|
</div>
|
|
<span className={`px-2 py-1 rounded text-xs font-medium whitespace-nowrap ${
|
|
feature.effort === 'small' ? 'bg-green-100 text-green-700' :
|
|
feature.effort === 'medium' ? 'bg-amber-100 text-amber-700' :
|
|
feature.effort === 'large' ? 'bg-orange-100 text-orange-700' :
|
|
'bg-red-100 text-red-700'
|
|
}`}>
|
|
{feature.effort}
|
|
</span>
|
|
<select
|
|
value={feature.status}
|
|
onChange={(e) => updateFeatureStatus(feature.id, e.target.value as Feature['status'])}
|
|
className={`px-2 py-1 rounded text-xs font-medium border-0 cursor-pointer ${statusColors[feature.status]}`}
|
|
>
|
|
<option value="done">Fertig</option>
|
|
<option value="in_progress">In Arbeit</option>
|
|
<option value="todo">Todo</option>
|
|
<option value="backlog">Backlog</option>
|
|
</select>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Feedback Tab */}
|
|
{activeTab === 'feedback' && (
|
|
<div>
|
|
{/* Filter */}
|
|
<div className="flex gap-2 mb-4 flex-wrap">
|
|
{['all', 'new', 'bug', 'feature_request', 'improvement'].map(filter => (
|
|
<button
|
|
key={filter}
|
|
onClick={() => setFeedbackFilter(filter)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
|
feedbackFilter === filter ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
{filter === 'all' ? 'Alle' :
|
|
filter === 'new' ? 'Neu' :
|
|
filter === 'bug' ? 'Bugs' :
|
|
filter === 'feature_request' ? 'Feature-Requests' : 'Verbesserungen'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Feedback List */}
|
|
<div className="space-y-3">
|
|
{filteredFeedback.map(fb => (
|
|
<div key={fb.id} className="border border-slate-200 rounded-xl p-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
|
fb.type === 'bug' ? 'bg-red-100' :
|
|
fb.type === 'feature_request' ? 'bg-blue-100' :
|
|
fb.type === 'improvement' ? 'bg-amber-100' :
|
|
fb.type === 'praise' ? 'bg-pink-100' : 'bg-purple-100'
|
|
}`}>
|
|
<svg className={`w-5 h-5 ${
|
|
fb.type === 'bug' ? 'text-red-600' :
|
|
fb.type === 'feature_request' ? 'text-blue-600' :
|
|
fb.type === 'improvement' ? 'text-amber-600' :
|
|
fb.type === 'praise' ? 'text-pink-600' : 'text-purple-600'
|
|
}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={feedbackTypeIcons[fb.type]} />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="font-semibold text-slate-900">{fb.title}</span>
|
|
<span className={`px-1.5 py-0.5 rounded text-xs ${priorityColors[fb.priority]}`}>
|
|
{fb.priority}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-slate-600 mb-2">{fb.description}</p>
|
|
<div className="flex items-center gap-4 text-xs text-slate-400">
|
|
<span>{fb.teacher}</span>
|
|
<span>{fb.date}</span>
|
|
{fb.relatedFeature && (
|
|
<span className="text-primary-600">→ {features.find(f => f.id === fb.relatedFeature)?.title}</span>
|
|
)}
|
|
</div>
|
|
{fb.response && (
|
|
<div className="mt-2 p-2 bg-green-50 rounded text-sm text-green-800">
|
|
<strong>Antwort:</strong> {fb.response}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<select
|
|
value={fb.status}
|
|
onChange={(e) => updateFeedbackStatus(fb.id, e.target.value as TeacherFeedback['status'])}
|
|
className={`px-2 py-1 rounded text-xs font-medium border-0 cursor-pointer ${
|
|
fb.status === 'new' ? 'bg-red-100 text-red-700' :
|
|
fb.status === 'acknowledged' ? 'bg-blue-100 text-blue-700' :
|
|
fb.status === 'planned' ? 'bg-amber-100 text-amber-700' :
|
|
fb.status === 'implemented' ? 'bg-green-100 text-green-700' :
|
|
'bg-slate-100 text-slate-600'
|
|
}`}
|
|
>
|
|
<option value="new">Neu</option>
|
|
<option value="acknowledged">Gesehen</option>
|
|
<option value="planned">Geplant</option>
|
|
<option value="implemented">Umgesetzt</option>
|
|
<option value="declined">Abgelehnt</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add Feedback Button */}
|
|
<button className="mt-4 w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-primary-400 hover:text-primary-600 transition-colors">
|
|
+ Neues Feedback hinzufuegen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Backlog Tab */}
|
|
{activeTab === 'backlog' && (
|
|
<div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{/* Todo Column */}
|
|
<div className="bg-amber-50 rounded-xl p-4">
|
|
<h3 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
|
|
<span className="w-6 h-6 bg-amber-200 rounded-full flex items-center justify-center text-sm">
|
|
{features.filter(f => f.status === 'todo').length}
|
|
</span>
|
|
Todo
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{features.filter(f => f.status === 'todo').map(f => (
|
|
<div key={f.id} className="bg-white p-3 rounded-lg shadow-sm">
|
|
<div className="font-medium text-sm text-slate-900">{f.title}</div>
|
|
<div className="text-xs text-slate-500 mt-1">{f.description}</div>
|
|
<div className="flex gap-1 mt-2">
|
|
<span className={`px-1.5 py-0.5 rounded text-xs ${priorityColors[f.priority]}`}>
|
|
{f.priority}
|
|
</span>
|
|
<span className="px-1.5 py-0.5 bg-slate-100 text-slate-600 rounded text-xs">
|
|
{f.effort}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* In Progress Column */}
|
|
<div className="bg-blue-50 rounded-xl p-4">
|
|
<h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
|
|
<span className="w-6 h-6 bg-blue-200 rounded-full flex items-center justify-center text-sm">
|
|
{features.filter(f => f.status === 'in_progress').length}
|
|
</span>
|
|
In Arbeit
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{features.filter(f => f.status === 'in_progress').map(f => (
|
|
<div key={f.id} className="bg-white p-3 rounded-lg shadow-sm">
|
|
<div className="font-medium text-sm text-slate-900">{f.title}</div>
|
|
<div className="text-xs text-slate-500 mt-1">{f.description}</div>
|
|
<div className="flex gap-1 mt-2">
|
|
<span className={`px-1.5 py-0.5 rounded text-xs ${priorityColors[f.priority]}`}>
|
|
{f.priority}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Backlog Column */}
|
|
<div className="bg-slate-100 rounded-xl p-4">
|
|
<h3 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
|
|
<span className="w-6 h-6 bg-slate-300 rounded-full flex items-center justify-center text-sm">
|
|
{features.filter(f => f.status === 'backlog').length}
|
|
</span>
|
|
Backlog
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{features.filter(f => f.status === 'backlog').map(f => (
|
|
<div key={f.id} className="bg-white p-3 rounded-lg shadow-sm">
|
|
<div className="font-medium text-sm text-slate-900">{f.title}</div>
|
|
<div className="text-xs text-slate-500 mt-1">{f.description}</div>
|
|
<div className="flex gap-1 mt-2">
|
|
<span className={`px-1.5 py-0.5 rounded text-xs ${priorityColors[f.priority]}`}>
|
|
{f.priority}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* System Info Section */}
|
|
<div className="border-t border-slate-200 pt-8">
|
|
<SystemInfoSection config={companionSystemInfo} />
|
|
</div>
|
|
</AdminLayout>
|
|
)
|
|
}
|