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>
1203 lines
73 KiB
TypeScript
1203 lines
73 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Developer Documentation Page
|
|
*
|
|
* SDK-style documentation with architecture overview, API reference,
|
|
* and interactive system architecture diagram
|
|
*/
|
|
|
|
import { useState } from 'react'
|
|
import AdminLayout from '@/components/admin/AdminLayout'
|
|
|
|
// Documentation paths for VS Code links
|
|
const docPaths: Record<string, string> = {
|
|
'postgres': 'docs/architecture/data-model.md',
|
|
'backend': 'docs/backend/README.md',
|
|
'consent-service': 'docs/consent-service/README.md',
|
|
'billing-service': 'docs/billing/billing-service-api.md',
|
|
'edu-search-service': 'docs/api/edu-search-seeds-api.md',
|
|
'dsms-gateway': 'docs/dsms/README.md',
|
|
'pca-platform': 'docs/api/pca-platform-api.md',
|
|
'matrix-synapse': 'docs/matrix/README.md',
|
|
'jitsi': 'docs/jitsi/README.md',
|
|
'mailpit': 'docs/guides/email-and-auth-testing.md',
|
|
'llm-gateway': 'docs/llm-platform/README.md',
|
|
'website': 'docs/website/README.md',
|
|
'opensearch': 'docs/llm-platform/guides/ollama-setup.md',
|
|
'klausur': 'klausur-service/docs/RAG-Admin-Spec.md',
|
|
'qdrant': 'klausur-service/docs/RAG-Admin-Spec.md',
|
|
'minio': 'klausur-service/docs/RAG-Admin-Spec.md',
|
|
}
|
|
|
|
// Base path for project (used for VS Code links)
|
|
const PROJECT_BASE_PATH = '/Users/benjaminadmin/Projekte/breakpilot-pwa'
|
|
|
|
// ================= ARCHITECTURE DIAGRAM DATA =================
|
|
|
|
interface ServiceNode {
|
|
id: string
|
|
name: string
|
|
type: 'frontend' | 'backend' | 'database' | 'cache' | 'search' | 'storage' | 'security' | 'communication' | 'ai' | 'erp'
|
|
port?: string
|
|
technology: string
|
|
description: string
|
|
connections?: string[]
|
|
}
|
|
|
|
// All services in the architecture (30+ services)
|
|
const ARCHITECTURE_SERVICES: ServiceNode[] = [
|
|
// Frontends
|
|
{ id: 'website', name: 'Admin Frontend', type: 'frontend', port: '3000', technology: 'Next.js 15', description: 'Admin Dashboard, Edu-Search, DSMS, Consent', connections: ['backend', 'consent-service'] },
|
|
{ id: 'studio', name: 'Lehrer Studio', type: 'frontend', port: '8000', technology: 'FastAPI + JS', description: 'Klausur, School, Stundenplan Module', connections: ['backend'] },
|
|
{ id: 'creator', name: 'Creator Studio', type: 'frontend', port: '-', technology: 'Vue 3', description: 'Content Creation Interface', connections: ['backend'] },
|
|
{ id: 'policy-ui', name: 'Policy Vault UI', type: 'frontend', port: '4200', technology: 'Angular 17', description: 'Richtlinien-Verwaltung', connections: ['policy-api'] },
|
|
|
|
// Python Backend
|
|
{ id: 'backend', name: 'Main Backend', type: 'backend', port: '8000', technology: 'Python FastAPI', description: 'Haupt-API, DevSecOps, Studio UI', connections: ['postgres', 'vault', 'redis', 'qdrant', 'minio'] },
|
|
{ id: 'klausur', name: 'Klausur Service', type: 'backend', port: '8086', technology: 'Python FastAPI', description: 'BYOEH Abitur-Klausurkorrektur, RAG Admin, NiBiS Ingestion', connections: ['postgres', 'minio', 'qdrant'] },
|
|
|
|
// Go Microservices
|
|
{ id: 'consent-service', name: 'Consent Service', type: 'backend', port: '8081', technology: 'Go Gin', description: 'DSGVO Consent Management', connections: ['postgres'] },
|
|
{ id: 'school-service', name: 'School Service', type: 'backend', port: '8084', technology: 'Go Gin', description: 'Klausuren, Noten, Zeugnisse', connections: ['postgres'] },
|
|
{ id: 'billing-service', name: 'Billing Service', type: 'backend', port: '8083', technology: 'Go Gin', description: 'Stripe Integration', connections: ['postgres'] },
|
|
{ id: 'dsms-gateway', name: 'DSMS Gateway', type: 'backend', port: '8082', technology: 'Go', description: 'IPFS REST API', connections: ['ipfs'] },
|
|
|
|
// Node.js Services
|
|
{ id: 'h5p', name: 'H5P Service', type: 'backend', port: '8085', technology: 'Node.js', description: 'Interaktive Inhalte', connections: ['postgres', 'minio'] },
|
|
{ id: 'policy-api', name: 'Policy Vault API', type: 'backend', port: '3001', technology: 'NestJS', description: 'Richtlinien-Verwaltung API', connections: ['postgres'] },
|
|
|
|
// Databases
|
|
{ id: 'postgres', name: 'PostgreSQL', type: 'database', port: '5432', technology: 'PostgreSQL 16', description: 'Hauptdatenbank', connections: [] },
|
|
{ id: 'synapse-db', name: 'Synapse DB', type: 'database', port: '-', technology: 'PostgreSQL 16', description: 'Matrix Datenbank', connections: [] },
|
|
{ id: 'mariadb', name: 'MariaDB', type: 'database', port: '-', technology: 'MariaDB 10.6', description: 'ERPNext Datenbank', connections: [] },
|
|
{ id: 'mongodb', name: 'MongoDB', type: 'database', port: '27017', technology: 'MongoDB 7', description: 'LibreChat Datenbank', connections: [] },
|
|
|
|
// Cache & Queue
|
|
{ id: 'redis', name: 'Redis', type: 'cache', port: '6379', technology: 'Redis Alpine', description: 'Cache & Sessions', connections: [] },
|
|
|
|
// Search Engines
|
|
{ id: 'qdrant', name: 'Qdrant', type: 'search', port: '6333', technology: 'Qdrant 1.7', description: 'Vector DB - NiBiS EWH (7352 Chunks), BYOEH', connections: [] },
|
|
{ id: 'opensearch', name: 'OpenSearch', type: 'search', port: '9200', technology: 'OpenSearch 2.x', description: 'Volltext-Suche', connections: [] },
|
|
{ id: 'meilisearch', name: 'Meilisearch', type: 'search', port: '7700', technology: 'Meilisearch', description: 'Instant Search', connections: [] },
|
|
|
|
// Storage
|
|
{ id: 'minio', name: 'MinIO', type: 'storage', port: '9000/9001', technology: 'MinIO', description: 'S3-kompatibel - RAG Dokumente, Landes/Lehrer-Daten', connections: [] },
|
|
{ id: 'ipfs', name: 'IPFS (Kubo)', type: 'storage', port: '5001', technology: 'IPFS 0.24', description: 'Dezentral', connections: [] },
|
|
|
|
// Security
|
|
{ id: 'vault', name: 'Vault', type: 'security', port: '8200', technology: 'HashiCorp Vault', description: 'Secrets Management', connections: [] },
|
|
{ id: 'keycloak', name: 'Keycloak', type: 'security', port: '8180', technology: 'Keycloak 23', description: 'SSO/OIDC', connections: ['postgres'] },
|
|
|
|
// Communication
|
|
{ id: 'synapse', name: 'Matrix Synapse', type: 'communication', port: '8008', technology: 'Matrix', description: 'E2EE Messenger', connections: ['synapse-db'] },
|
|
{ id: 'jitsi', name: 'Jitsi Meet', type: 'communication', port: '8443', technology: 'Jitsi', description: 'Videokonferenz', connections: [] },
|
|
|
|
// AI/LLM
|
|
{ id: 'librechat', name: 'LibreChat', type: 'ai', port: '3080', technology: 'LibreChat', description: 'Multi-LLM Chat', connections: ['mongodb', 'qdrant'] },
|
|
{ id: 'ragflow', name: 'RAGFlow', type: 'ai', port: '9380', technology: 'RAGFlow', description: 'RAG Pipeline', connections: ['qdrant', 'opensearch'] },
|
|
|
|
// ERP
|
|
{ id: 'erpnext', name: 'ERPNext', type: 'erp', port: '8090', technology: 'ERPNext v15', description: 'Open Source ERP', connections: ['mariadb', 'redis'] },
|
|
]
|
|
|
|
// Architecture layers
|
|
const LAYERS = [
|
|
{ id: 'presentation', name: 'Presentation Layer', description: 'User Interfaces & Frontends', types: ['frontend'] },
|
|
{ id: 'application', name: 'Application Layer', description: 'Business Logic & APIs', types: ['backend'] },
|
|
{ id: 'data', name: 'Data Layer', description: 'Databases, Cache & Search', types: ['database', 'cache', 'search'] },
|
|
{ id: 'infrastructure', name: 'Infrastructure Layer', description: 'Storage, Security & Communication', types: ['storage', 'security', 'communication', 'ai', 'erp'] },
|
|
]
|
|
|
|
const getArchTypeColor = (type: ServiceNode['type']) => {
|
|
switch (type) {
|
|
case 'frontend': return { bg: 'bg-blue-500', border: 'border-blue-600', text: 'text-blue-800', light: 'bg-blue-50' }
|
|
case 'backend': return { bg: 'bg-green-500', border: 'border-green-600', text: 'text-green-800', light: 'bg-green-50' }
|
|
case 'database': return { bg: 'bg-purple-500', border: 'border-purple-600', text: 'text-purple-800', light: 'bg-purple-50' }
|
|
case 'cache': return { bg: 'bg-cyan-500', border: 'border-cyan-600', text: 'text-cyan-800', light: 'bg-cyan-50' }
|
|
case 'search': return { bg: 'bg-pink-500', border: 'border-pink-600', text: 'text-pink-800', light: 'bg-pink-50' }
|
|
case 'storage': return { bg: 'bg-orange-500', border: 'border-orange-600', text: 'text-orange-800', light: 'bg-orange-50' }
|
|
case 'security': return { bg: 'bg-red-500', border: 'border-red-600', text: 'text-red-800', light: 'bg-red-50' }
|
|
case 'communication': return { bg: 'bg-yellow-500', border: 'border-yellow-600', text: 'text-yellow-800', light: 'bg-yellow-50' }
|
|
case 'ai': return { bg: 'bg-violet-500', border: 'border-violet-600', text: 'text-violet-800', light: 'bg-violet-50' }
|
|
case 'erp': return { bg: 'bg-indigo-500', border: 'border-indigo-600', text: 'text-indigo-800', light: 'bg-indigo-50' }
|
|
default: return { bg: 'bg-gray-500', border: 'border-gray-600', text: 'text-gray-800', light: 'bg-gray-50' }
|
|
}
|
|
}
|
|
|
|
const getArchTypeLabel = (type: ServiceNode['type']) => {
|
|
switch (type) {
|
|
case 'frontend': return 'Frontend'
|
|
case 'backend': return 'Backend'
|
|
case 'database': return 'Datenbank'
|
|
case 'cache': return 'Cache'
|
|
case 'search': return 'Suche'
|
|
case 'storage': return 'Speicher'
|
|
case 'security': return 'Sicherheit'
|
|
case 'communication': return 'Kommunikation'
|
|
case 'ai': return 'KI/LLM'
|
|
case 'erp': return 'ERP'
|
|
default: return type
|
|
}
|
|
}
|
|
|
|
// ================= API SERVICES DATA =================
|
|
|
|
// Service definitions with ports, technologies, and API info
|
|
const services = [
|
|
{
|
|
id: 'postgres',
|
|
name: 'PostgreSQL',
|
|
type: 'database',
|
|
port: 5432,
|
|
container: 'breakpilot-pwa-postgres',
|
|
description: 'Zentrale Datenbank für alle Services',
|
|
purpose: 'Persistente Datenspeicherung für Benutzer, Dokumente, Consents und alle Anwendungsdaten mit pgvector für Embedding-Suche.',
|
|
tech: ['PostgreSQL 15', 'pgvector'],
|
|
healthEndpoint: null,
|
|
endpoints: [],
|
|
envVars: ['POSTGRES_USER', 'POSTGRES_PASSWORD', 'POSTGRES_DB'],
|
|
},
|
|
{
|
|
id: 'backend',
|
|
name: 'Python Backend',
|
|
type: 'backend',
|
|
port: 8000,
|
|
container: 'breakpilot-pwa-backend',
|
|
description: 'FastAPI Backend mit AI-Integration und GDPR-Export',
|
|
purpose: 'Zentrale API-Schicht für das Studio-Frontend mit AI-gestützter Arbeitsblatt-Generierung, Multi-LLM-Integration und DSGVO-konformem Datenexport.',
|
|
tech: ['Python 3.11', 'FastAPI', 'SQLAlchemy', 'Pydantic'],
|
|
healthEndpoint: '/health',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/api/v1/health', description: 'Health Check' },
|
|
{ method: 'POST', path: '/api/v1/chat', description: 'AI Chat Endpoint' },
|
|
{ method: 'GET', path: '/api/v1/gdpr/export', description: 'DSGVO Datenexport' },
|
|
{ method: 'POST', path: '/api/v1/seeds', description: 'Edu Search Seeds' },
|
|
],
|
|
envVars: ['DATABASE_URL', 'JWT_SECRET', 'OPENAI_API_KEY', 'ANTHROPIC_API_KEY'],
|
|
},
|
|
{
|
|
id: 'consent-service',
|
|
name: 'Consent Service',
|
|
type: 'backend',
|
|
port: 8081,
|
|
container: 'breakpilot-pwa-consent-service',
|
|
description: 'Go-basierter Consent-Management-Service',
|
|
purpose: 'DSGVO-konforme Einwilligungsverwaltung mit Versionierung, Audit-Trail und rechtssicherer Dokumentenspeicherung für Schulen.',
|
|
tech: ['Go 1.21', 'Gin', 'GORM', 'JWT'],
|
|
healthEndpoint: '/health',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/api/v1/health', description: 'Health Check' },
|
|
{ method: 'GET', path: '/api/v1/consent/check', description: 'Consent Status pruefen' },
|
|
{ method: 'POST', path: '/api/v1/consent/grant', description: 'Consent erteilen' },
|
|
{ method: 'GET', path: '/api/v1/documents', description: 'Rechtsdokumente abrufen' },
|
|
{ method: 'GET', path: '/api/v1/communication/status', description: 'Matrix/Jitsi Status' },
|
|
{ method: 'POST', path: '/api/v1/communication/rooms', description: 'Matrix Raum erstellen' },
|
|
{ method: 'POST', path: '/api/v1/communication/meetings', description: 'Jitsi Meeting erstellen' },
|
|
],
|
|
envVars: ['DATABASE_URL', 'JWT_SECRET', 'PORT', 'MATRIX_HOMESERVER_URL', 'JITSI_BASE_URL'],
|
|
},
|
|
{
|
|
id: 'billing-service',
|
|
name: 'Billing Service',
|
|
type: 'backend',
|
|
port: 8083,
|
|
container: 'breakpilot-pwa-billing-service',
|
|
description: 'Stripe-basiertes Billing mit Trial & Subscription',
|
|
purpose: 'Monetarisierung der Plattform mit 7-Tage-Trial, gestuften Abo-Modellen (Basic/Standard/Premium) und automatischer Nutzungslimitierung.',
|
|
tech: ['Go 1.21', 'Gin', 'Stripe API', 'pgx'],
|
|
healthEndpoint: '/health',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/api/v1/billing/status', description: 'Subscription Status' },
|
|
{ method: 'POST', path: '/api/v1/billing/trial/start', description: 'Trial starten' },
|
|
{ method: 'POST', path: '/api/v1/billing/webhook', description: 'Stripe Webhooks' },
|
|
],
|
|
envVars: ['DATABASE_URL', 'STRIPE_SECRET_KEY', 'STRIPE_WEBHOOK_SECRET'],
|
|
},
|
|
{
|
|
id: 'edu-search-service',
|
|
name: 'Edu Search Service',
|
|
type: 'backend',
|
|
port: 8086,
|
|
container: 'breakpilot-edu-search',
|
|
description: 'Bildungsquellen-Crawler mit OpenSearch-Integration',
|
|
purpose: 'Automatisches Crawlen und Indexieren von Bildungsressourcen (OER, Lehrpläne, Schulbücher) für RAG-gestützte Arbeitsblatterstellung.',
|
|
tech: ['Go 1.23', 'Gin', 'OpenSearch', 'Colly'],
|
|
healthEndpoint: '/v1/health',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/v1/health', description: 'Health Check' },
|
|
{ method: 'GET', path: '/v1/search', description: 'Dokumentensuche' },
|
|
{ method: 'POST', path: '/v1/crawl/start', description: 'Crawler starten' },
|
|
{ method: 'GET', path: '/api/v1/staff/stats', description: 'Staff Statistiken' },
|
|
{ method: 'POST', path: '/api/v1/admin/crawl/staff', description: 'Staff Crawl starten' },
|
|
],
|
|
envVars: ['OPENSEARCH_URL', 'DB_HOST', 'DB_USER', 'DB_PASSWORD'],
|
|
},
|
|
{
|
|
id: 'dsms-gateway',
|
|
name: 'DSMS Gateway',
|
|
type: 'backend',
|
|
port: 8082,
|
|
container: 'breakpilot-pwa-dsms-gateway',
|
|
description: 'Datenschutz-Management Gateway',
|
|
purpose: 'Dezentrale Dokumentenspeicherung mit IPFS-Integration für manipulationssichere Audit-Logs und Rechtsdokumente.',
|
|
tech: ['Go 1.21', 'Gin', 'IPFS'],
|
|
healthEndpoint: '/health',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/health', description: 'Health Check' },
|
|
{ method: 'POST', path: '/api/v1/documents', description: 'Dokument speichern' },
|
|
],
|
|
envVars: ['IPFS_URL', 'DATABASE_URL'],
|
|
},
|
|
{
|
|
id: 'pca-platform',
|
|
name: 'PCA Platform',
|
|
type: 'backend',
|
|
port: 8084,
|
|
container: 'breakpilot-pca-platform',
|
|
description: 'Payment Card Adapter für Taschengeld-Management',
|
|
purpose: 'Fintech-Integration für Schüler-Taschengeld mit virtuellen Karten, Spending-Limits und Echtzeit-Transaktionsverfolgung für Eltern.',
|
|
tech: ['Go 1.21', 'Gin', 'Stripe Issuing', 'pgx'],
|
|
healthEndpoint: '/health',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/api/v1/health', description: 'Health Check' },
|
|
{ method: 'POST', path: '/api/v1/cards/create', description: 'Virtuelle Karte erstellen' },
|
|
{ method: 'GET', path: '/api/v1/transactions', description: 'Transaktionen abrufen' },
|
|
{ method: 'POST', path: '/api/v1/wallet/topup', description: 'Wallet aufladen' },
|
|
],
|
|
envVars: ['DATABASE_URL', 'STRIPE_SECRET_KEY', 'STRIPE_WEBHOOK_SECRET'],
|
|
},
|
|
{
|
|
id: 'matrix-synapse',
|
|
name: 'Matrix Synapse',
|
|
type: 'communication',
|
|
port: 8448,
|
|
container: 'breakpilot-synapse',
|
|
description: 'Ende-zu-Ende verschlüsselter Messenger',
|
|
purpose: 'Sichere Kommunikation zwischen Lehrern und Eltern mit E2EE, Raum-Management und DSGVO-konformer Nachrichtenspeicherung.',
|
|
tech: ['Matrix Protocol', 'Synapse', 'PostgreSQL'],
|
|
healthEndpoint: '/_matrix/client/versions',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/_matrix/client/versions', description: 'Client Versions' },
|
|
{ method: 'POST', path: '/_matrix/client/v3/login', description: 'Matrix Login' },
|
|
{ method: 'POST', path: '/_matrix/client/v3/createRoom', description: 'Raum erstellen' },
|
|
],
|
|
envVars: ['SYNAPSE_SERVER_NAME', 'POSTGRES_HOST', 'SYNAPSE_REGISTRATION_SHARED_SECRET'],
|
|
},
|
|
{
|
|
id: 'jitsi',
|
|
name: 'Jitsi Meet',
|
|
type: 'communication',
|
|
port: 8443,
|
|
container: 'breakpilot-jitsi',
|
|
description: 'Videokonferenz-Plattform',
|
|
purpose: 'Virtuelle Elterngespräche und Klassenkonferenzen mit optionaler JWT-Authentifizierung und Embedded-Integration ins Studio.',
|
|
tech: ['Jitsi Meet', 'Prosody', 'JWT Auth'],
|
|
healthEndpoint: '/http-bind',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/http-bind', description: 'BOSH Endpoint' },
|
|
{ method: 'GET', path: '/config.js', description: 'Jitsi Konfiguration' },
|
|
],
|
|
envVars: ['JITSI_APP_ID', 'JITSI_APP_SECRET', 'PUBLIC_URL'],
|
|
},
|
|
{
|
|
id: 'mailpit',
|
|
name: 'Mailpit (SMTP)',
|
|
type: 'infrastructure',
|
|
port: 1025,
|
|
container: 'breakpilot-pwa-mailpit',
|
|
description: 'E-Mail-Testing und Vorschau',
|
|
purpose: 'Lokaler SMTP-Server für E-Mail-Vorschau im Development mit Web-UI auf Port 8025 zur Überprüfung von Lifecycle-Emails.',
|
|
tech: ['Mailpit', 'SMTP', 'Web UI'],
|
|
healthEndpoint: null,
|
|
endpoints: [
|
|
{ method: 'GET', path: '/', description: 'Web UI (Port 8025)' },
|
|
],
|
|
envVars: ['MP_SMTP_AUTH', 'MP_SMTP_AUTH_ALLOW_INSECURE'],
|
|
},
|
|
{
|
|
id: 'llm-gateway',
|
|
name: 'LLM Gateway',
|
|
type: 'backend',
|
|
port: 8085,
|
|
container: 'breakpilot-llm-gateway',
|
|
description: 'Multi-Provider LLM Router',
|
|
purpose: 'Einheitliche API für verschiedene LLM-Anbieter (OpenAI, Anthropic, Ollama) mit Provider-Switching, Token-Tracking und Fallback-Logik.',
|
|
tech: ['Python 3.11', 'FastAPI', 'LiteLLM'],
|
|
healthEndpoint: '/health',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/health', description: 'Health Check' },
|
|
{ method: 'POST', path: '/v1/chat/completions', description: 'Chat Completion (OpenAI-kompatibel)' },
|
|
{ method: 'GET', path: '/v1/models', description: 'Verfügbare Modelle' },
|
|
],
|
|
envVars: ['OPENAI_API_KEY', 'ANTHROPIC_API_KEY', 'OLLAMA_BASE_URL'],
|
|
},
|
|
{
|
|
id: 'website',
|
|
name: 'Website (Next.js)',
|
|
type: 'frontend',
|
|
port: 3000,
|
|
container: 'breakpilot-pwa-website',
|
|
description: 'Next.js 14 Frontend mit App Router',
|
|
purpose: 'Admin-Dashboard, Landing-Page und API-Routing für das Next.js Frontend mit Server Components und Edge Functions.',
|
|
tech: ['Next.js 14', 'React 18', 'TypeScript', 'Tailwind CSS'],
|
|
healthEndpoint: null,
|
|
endpoints: [
|
|
{ method: 'GET', path: '/', description: 'Landing Page' },
|
|
{ method: 'GET', path: '/admin', description: 'Admin Dashboard' },
|
|
{ method: 'GET', path: '/app', description: 'Benutzer-App (redirect to :8000)' },
|
|
],
|
|
envVars: ['NEXT_PUBLIC_API_URL', 'NEXTAUTH_SECRET'],
|
|
},
|
|
{
|
|
id: 'opensearch',
|
|
name: 'OpenSearch',
|
|
type: 'database',
|
|
port: 9200,
|
|
container: 'breakpilot-opensearch',
|
|
description: 'Volltextsuche und Vektorsuche',
|
|
purpose: 'Hochperformante Suche in Bildungsressourcen mit k-NN für semantische Ähnlichkeitssuche und BM25 für Keyword-Matching.',
|
|
tech: ['OpenSearch 2.11', 'k-NN Plugin'],
|
|
healthEndpoint: '/',
|
|
endpoints: [
|
|
{ method: 'GET', path: '/_cluster/health', description: 'Cluster Health' },
|
|
{ method: 'POST', path: '/bp_documents_v1/_search', description: 'Dokumentensuche' },
|
|
],
|
|
envVars: ['OPENSEARCH_JAVA_OPTS'],
|
|
},
|
|
]
|
|
|
|
// Architecture diagram as ASCII art (will be styled)
|
|
const architectureAscii = `
|
|
BreakPilot Platform Architecture
|
|
|
|
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ FRONTEND LAYER │
|
|
├─────────────────────────────────────────────────────────────────────────────────────────────┤
|
|
│ ┌─────────────────────┐ ┌─────────────────────┐ │
|
|
│ │ Website (3000) │ │ Studio App (8000) │ │
|
|
│ │ Next.js 14 │ │ FastAPI + Jinja │ │
|
|
│ │ Admin Dashboard │◄────────────────────────────►│ Arbeitsblatt UI │ │
|
|
│ └─────────────────────┘ └─────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────────────────────────────┘
|
|
│ │
|
|
▼ ▼
|
|
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ BACKEND LAYER │
|
|
├───────────────────┬───────────────────┬───────────────────┬─────────────────────────────────┤
|
|
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │
|
|
│ │ Consent (8081)│ │ │ Billing (8083)│ │ │ PCA (8084) │ │ │ LLM GW (8085) │ │
|
|
│ │ Go/Gin │ │ │ Go/Stripe │ │ │ Go/Stripe │ │ │ Python/LiteLLM│ │
|
|
│ │ DSGVO-Consent │ │ │ Subscriptions │ │ │ Taschengeld │ │ │ Multi-Provider│ │
|
|
│ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘ │ └───────────────┘ │
|
|
│ │ │ │ │ │ │ │
|
|
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │
|
|
│ │ DSMS (8082) │ │ │ EduSearch │ │ │ StaffSearch │ │ │ Alerts Agent │ │
|
|
│ │ Go/IPFS │ │ │ (8086) Go │ │ │ Go/Colly │ │ │ Python/Tavily │ │
|
|
│ │ Audit Storage │ │ │ Bildungs-RAG │ │ │ Lehrersuche │ │ │ News-Alerts │ │
|
|
│ └───────────────┘ │ └───────┬───────┘ │ └───────────────┘ │ └───────────────┘ │
|
|
└───────────────────┴─────────┼─────────┴───────────────────┴─────────────────────────────────┘
|
|
│
|
|
┌─────────────────────────────┼───────────────────────────────────────────────────────────────┐
|
|
│ DATA LAYER │
|
|
├───────────────────┬─────────┼─────────┬─────────────────────────────────────────────────────┤
|
|
│ ┌───────────────┐ │ ┌───────┴───────┐ │ │
|
|
│ │ PostgreSQL │ │ │ OpenSearch │ │ │
|
|
│ │ (5432) │◄┼►│ (9200) │ │ │
|
|
│ │ + pgvector │ │ │ + k-NN Plugin │ │ │
|
|
│ └───────────────┘ │ └───────────────┘ │ │
|
|
└───────────────────┴───────────────────┴─────────────────────────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ COMMUNICATION LAYER │
|
|
├───────────────────┬───────────────────┬─────────────────────────────────────────────────────┤
|
|
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │
|
|
│ │ Matrix (8448) │ │ │ Jitsi (8443) │ │ │ Mailpit (1025)│ │
|
|
│ │ E2EE Messenger│ │ │ Video Calls │ │ │ Email Testing │ │
|
|
│ │ Lehrer-Eltern │ │ │ Elterngespräch│ │ │ SMTP + Web UI │ │
|
|
│ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │
|
|
└───────────────────┴───────────────────┴─────────────────────────────────────────────────────┘
|
|
`
|
|
|
|
type TabType = 'overview' | 'services' | 'api' | 'docker' | 'testing'
|
|
|
|
export default function DeveloperDocsPage() {
|
|
const [activeTab, setActiveTab] = useState<TabType>('overview')
|
|
const [selectedService, setSelectedService] = useState<string | null>(null)
|
|
const [copiedEndpoint, setCopiedEndpoint] = useState<string | null>(null)
|
|
// Architecture-specific state
|
|
const [selectedArchService, setSelectedArchService] = useState<ServiceNode | null>(null)
|
|
const [activeLayer, setActiveLayer] = useState<string>('all')
|
|
|
|
// Architecture helper functions
|
|
const getServicesForLayer = (layer: typeof LAYERS[0]) => {
|
|
return ARCHITECTURE_SERVICES.filter(s => layer.types.includes(s.type))
|
|
}
|
|
|
|
const archStats = {
|
|
total: ARCHITECTURE_SERVICES.length,
|
|
frontends: ARCHITECTURE_SERVICES.filter(s => s.type === 'frontend').length,
|
|
backends: ARCHITECTURE_SERVICES.filter(s => s.type === 'backend').length,
|
|
databases: ARCHITECTURE_SERVICES.filter(s => s.type === 'database').length,
|
|
infrastructure: ARCHITECTURE_SERVICES.filter(s => ['cache', 'search', 'storage', 'security', 'communication', 'ai', 'erp'].includes(s.type)).length,
|
|
}
|
|
|
|
const copyToClipboard = (text: string, id: string) => {
|
|
navigator.clipboard.writeText(text)
|
|
setCopiedEndpoint(id)
|
|
setTimeout(() => setCopiedEndpoint(null), 2000)
|
|
}
|
|
|
|
const getServiceTypeColor = (type: string) => {
|
|
switch (type) {
|
|
case 'frontend': return 'bg-blue-100 text-blue-800'
|
|
case 'backend': return 'bg-green-100 text-green-800'
|
|
case 'database': return 'bg-purple-100 text-purple-800'
|
|
case 'communication': return 'bg-orange-100 text-orange-800'
|
|
case 'infrastructure': return 'bg-slate-200 text-slate-700'
|
|
default: return 'bg-gray-100 text-gray-800'
|
|
}
|
|
}
|
|
|
|
const getMethodColor = (method: string) => {
|
|
switch (method) {
|
|
case 'GET': return 'bg-emerald-100 text-emerald-700'
|
|
case 'POST': return 'bg-blue-100 text-blue-700'
|
|
case 'PUT': return 'bg-amber-100 text-amber-700'
|
|
case 'DELETE': return 'bg-red-100 text-red-700'
|
|
default: return 'bg-gray-100 text-gray-700'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AdminLayout
|
|
title="Developer Documentation"
|
|
description="API Reference, Architektur und Service-Dokumentation"
|
|
>
|
|
{/* Tab Navigation */}
|
|
<div className="border-b border-slate-200 mb-6">
|
|
<nav className="flex gap-6">
|
|
{[
|
|
{ id: 'overview', label: 'Architektur' },
|
|
{ id: 'services', label: 'Services' },
|
|
{ id: 'api', label: 'API Reference' },
|
|
{ id: 'docker', label: 'Docker' },
|
|
{ id: 'testing', label: 'Testing' },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id as TabType)}
|
|
className={`pb-3 px-1 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'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Overview Tab - Interactive Architecture */}
|
|
{activeTab === 'overview' && (
|
|
<div className="space-y-6">
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-slate-800">{archStats.total}</div>
|
|
<div className="text-sm text-slate-500">Services Total</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-blue-600">{archStats.frontends}</div>
|
|
<div className="text-sm text-slate-500">Frontends</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-green-600">{archStats.backends}</div>
|
|
<div className="text-sm text-slate-500">Backends</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-purple-600">{archStats.databases}</div>
|
|
<div className="text-sm text-slate-500">Datenbanken</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-orange-600">{archStats.infrastructure}</div>
|
|
<div className="text-sm text-slate-500">Infrastruktur</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ASCII Architecture Diagram with Arrows */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-xl font-bold text-slate-800 mb-4">Datenfluss-Diagramm</h2>
|
|
<div className="bg-slate-900 rounded-lg p-6 overflow-x-auto">
|
|
<pre className="text-green-400 font-mono text-xs whitespace-pre">{`
|
|
BreakPilot Platform - Datenfluss
|
|
|
|
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ FRONTEND LAYER │
|
|
├─────────────────────────────────────────────────────────────────────────────────────────────┤
|
|
│ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │
|
|
│ │ Admin Frontend │ │ Lehrer Studio │ │ Policy Vault UI │ │
|
|
│ │ Next.js :3000 │ │ FastAPI :8000 │ │ Angular :4200 │ │
|
|
│ └──────────┬──────────┘ └──────────┬──────────┘ └──────────┬──────────┘ │
|
|
└─────────────┼───────────────────────────┼───────────────────────────┼────────────────────────┘
|
|
│ │ │
|
|
▼ ▼ ▼
|
|
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ BACKEND LAYER │
|
|
├───────────────────┬───────────────────┬───────────────────┬─────────────────────────────────┤
|
|
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │
|
|
│ │ Consent :8081 │ │ │ Billing :8083 │ │ │ School :8084 │ │ │ DSMS GW :8082 │ │
|
|
│ │ Go/Gin │ │ │ Go/Stripe │ │ │ Go/Gin │ │ │ Go/IPFS │ │
|
|
│ │ DSGVO Consent │ │ │ Subscriptions │ │ │ Noten/Zeugnis │ │ │ Audit Storage │ │
|
|
│ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘ │
|
|
│ │ │ │ │ │ │ │ │
|
|
│ ▼ │ ▼ │ ▼ │ ▼ │
|
|
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │
|
|
│ │ Klausur :8086 │ │ │ H5P :8085 │ │ │ Policy API │ │ │ LLM Services │ │
|
|
│ │ Python/BYOEH │ │ │ Node.js │ │ │ NestJS :3001 │ │ │ LibreChat/RAG │ │
|
|
│ │ Abiturkorrek. │ │ │ Interaktiv │ │ │ Richtlinien │ │ │ KI-Assistenz │ │
|
|
│ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘ │
|
|
└─────────┼─────────┴─────────┼─────────┴─────────┼─────────┴─────────┼───────────────────────┘
|
|
│ │ │ │
|
|
▼ ▼ ▼ ▼
|
|
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ DATA LAYER │
|
|
├───────────────────┬───────────────────┬───────────────────┬─────────────────────────────────┤
|
|
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │
|
|
│ │ PostgreSQL │◄┼►│ Redis │ │ │ Qdrant │ │ │ OpenSearch │ │
|
|
│ │ :5432 │ │ │ :6379 Cache │ │ │ :6333 Vector │ │ │ :9200 Search │ │
|
|
│ │ Hauptdaten │ │ │ Sessions │ │ │ RAG Embeddings│ │ │ Volltext │ │
|
|
│ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │
|
|
└───────────────────┴───────────────────┴───────────────────┴─────────────────────────────────┘
|
|
│
|
|
▼
|
|
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ INFRASTRUCTURE LAYER │
|
|
├───────────────────┬───────────────────┬───────────────────┬─────────────────────────────────┤
|
|
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │
|
|
│ │ Vault :8200 │ │ │ Keycloak :8180│ │ │ MinIO :9000 │ │ │ IPFS :5001 │ │
|
|
│ │ Secrets Mgmt │ │ │ SSO/OIDC Auth │ │ │ S3 Storage │ │ │ Dezentral │ │
|
|
│ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │
|
|
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ │
|
|
│ │ Matrix :8008 │ │ │ Jitsi :8443 │ │ │ ERPNext :8090 │ │ │
|
|
│ │ E2EE Chat │ │ │ Video Calls │ │ │ Open ERP │ │ │
|
|
│ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │ │
|
|
└───────────────────┴───────────────────┴───────────────────┴─────────────────────────────────┘
|
|
|
|
═══════════════════════════════════════════════════════════════════════════════════════════════
|
|
Legende: ──► Datenfluss ◄──► Bidirektional │ Layer-Grenze ┌─┐ Service-Box
|
|
═══════════════════════════════════════════════════════════════════════════════════════════════
|
|
`}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Layer Filter */}
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
onClick={() => setActiveLayer('all')}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
activeLayer === 'all'
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
Alle Layer
|
|
</button>
|
|
{LAYERS.map((layer) => (
|
|
<button
|
|
key={layer.id}
|
|
onClick={() => setActiveLayer(layer.id)}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
activeLayer === layer.id
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{layer.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Architecture Diagram - Layered View */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-xl font-bold text-slate-800 mb-6">System-Architektur Diagramm</h2>
|
|
|
|
<div className="space-y-6">
|
|
{LAYERS.map((layer) => {
|
|
const layerServices = getServicesForLayer(layer)
|
|
if (activeLayer !== 'all' && activeLayer !== layer.id) return null
|
|
|
|
return (
|
|
<div key={layer.id} className="border-2 border-dashed border-slate-200 rounded-xl p-4">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<h3 className="text-lg font-semibold text-slate-700">{layer.name}</h3>
|
|
<span className="text-sm text-slate-500">- {layer.description}</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
|
{layerServices.map((service) => {
|
|
const colors = getArchTypeColor(service.type)
|
|
const isSelected = selectedArchService?.id === service.id
|
|
|
|
return (
|
|
<div
|
|
key={service.id}
|
|
onClick={() => setSelectedArchService(isSelected ? null : service)}
|
|
className={`cursor-pointer rounded-lg border-2 p-3 transition-all ${
|
|
isSelected
|
|
? `${colors.border} ${colors.light} shadow-lg scale-105`
|
|
: 'border-slate-200 bg-white hover:border-slate-300 hover:shadow'
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div className={`w-3 h-3 rounded-full ${colors.bg}`}></div>
|
|
{service.port && service.port !== '-' && (
|
|
<span className="text-xs font-mono text-slate-500">:{service.port}</span>
|
|
)}
|
|
</div>
|
|
<h4 className="font-medium text-sm text-slate-800">{service.name}</h4>
|
|
<p className="text-xs text-slate-500">{service.technology}</p>
|
|
<p className="text-xs text-slate-600 mt-2 line-clamp-2">{service.description}</p>
|
|
{service.connections && service.connections.length > 0 && (
|
|
<div className="mt-2 flex items-center gap-1 text-xs text-slate-400">
|
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
{service.connections.length} Verbindung{service.connections.length > 1 ? 'en' : ''}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Service Detail Panel */}
|
|
{selectedArchService && (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-slate-800">{selectedArchService.name}</h2>
|
|
<p className="text-slate-600">{selectedArchService.description}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setSelectedArchService(null)}
|
|
className="p-2 hover:bg-slate-100 rounded-lg"
|
|
>
|
|
<svg className="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<div className="text-xs text-slate-500 uppercase">Typ</div>
|
|
<div className={`text-sm font-medium ${getArchTypeColor(selectedArchService.type).text}`}>
|
|
{getArchTypeLabel(selectedArchService.type)}
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<div className="text-xs text-slate-500 uppercase">Technologie</div>
|
|
<div className="text-sm font-medium text-slate-800">{selectedArchService.technology}</div>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<div className="text-xs text-slate-500 uppercase">Port</div>
|
|
<div className="text-sm font-mono font-medium text-slate-800">
|
|
{selectedArchService.port || '-'}
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<div className="text-xs text-slate-500 uppercase">Verbindungen</div>
|
|
<div className="text-sm font-medium text-slate-800">
|
|
{selectedArchService.connections?.length || 0} Services
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedArchService.connections && selectedArchService.connections.length > 0 && (
|
|
<div className="mt-4">
|
|
<h4 className="text-sm font-medium text-slate-700 mb-2">Verbunden mit:</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedArchService.connections.map((connId) => {
|
|
const connService = ARCHITECTURE_SERVICES.find(s => s.id === connId)
|
|
if (!connService) return null
|
|
const colors = getArchTypeColor(connService.type)
|
|
return (
|
|
<button
|
|
key={connId}
|
|
onClick={() => setSelectedArchService(connService)}
|
|
className={`px-3 py-1 rounded-full text-sm ${colors.light} ${colors.text} hover:opacity-80`}
|
|
>
|
|
{connService.name}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Legend */}
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<h3 className="text-sm font-medium text-slate-700 mb-3">Legende</h3>
|
|
<div className="flex flex-wrap gap-4">
|
|
{(['frontend', 'backend', 'database', 'cache', 'search', 'storage', 'security', 'communication', 'ai', 'erp'] as const).map((type) => {
|
|
const colors = getArchTypeColor(type)
|
|
return (
|
|
<div key={type} className="flex items-center gap-2">
|
|
<div className={`w-3 h-3 rounded-full ${colors.bg}`}></div>
|
|
<span className="text-sm text-slate-600">{getArchTypeLabel(type)}</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Technical Details Section */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-xl font-bold text-slate-800 mb-4">Technische Details</h2>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{/* Data Flow */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-700 mb-3">Datenfluss</h3>
|
|
<div className="space-y-2 text-sm text-slate-600">
|
|
<p><strong>1. Request:</strong> Browser → Next.js/FastAPI Frontend</p>
|
|
<p><strong>2. API:</strong> Frontend → Python Backend / Go Microservices</p>
|
|
<p><strong>3. Auth:</strong> Keycloak/Vault fuer SSO & Secrets</p>
|
|
<p><strong>4. Data:</strong> PostgreSQL (ACID) / Redis (Cache)</p>
|
|
<p><strong>5. Search:</strong> Qdrant (Vector) / Meilisearch (Fulltext)</p>
|
|
<p><strong>6. Storage:</strong> MinIO (Files) / IPFS (Dezentral)</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Security */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-700 mb-3">Sicherheit</h3>
|
|
<div className="space-y-2 text-sm text-slate-600">
|
|
<p><strong>Auth:</strong> JWT + Keycloak OIDC</p>
|
|
<p><strong>Secrets:</strong> HashiCorp Vault (encrypted)</p>
|
|
<p><strong>Communication:</strong> Matrix E2EE, TLS everywhere</p>
|
|
<p><strong>DSGVO:</strong> Consent Service fuer Einwilligungen</p>
|
|
<p><strong>DevSecOps:</strong> Trivy, Gitleaks, Semgrep, Bandit</p>
|
|
<p><strong>SBOM:</strong> CycloneDX fuer alle Komponenten</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Languages */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-700 mb-3">Programmiersprachen</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Python 3.12</span>
|
|
<span className="px-3 py-1 bg-sky-100 text-sky-700 rounded-full text-sm">Go 1.21</span>
|
|
<span className="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-sm">TypeScript 5.x</span>
|
|
<span className="px-3 py-1 bg-lime-100 text-lime-700 rounded-full text-sm">JavaScript ES2022</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Frameworks */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-700 mb-3">Frameworks</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Next.js 15</span>
|
|
<span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">FastAPI</span>
|
|
<span className="px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-sm">Gin (Go)</span>
|
|
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Vue 3</span>
|
|
<span className="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm">Angular 17</span>
|
|
<span className="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm">NestJS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Services Tab */}
|
|
{activeTab === 'services' && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{services.map((service) => (
|
|
<div
|
|
key={service.id}
|
|
className={`bg-white rounded-xl border border-slate-200 p-5 cursor-pointer transition-all hover:shadow-md ${
|
|
selectedService === service.id ? 'ring-2 ring-primary-600' : ''
|
|
}`}
|
|
onClick={() => setSelectedService(selectedService === service.id ? null : service.id)}
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="font-semibold text-slate-900">{service.name}</h3>
|
|
<span className={`text-xs px-2 py-0.5 rounded-full ${getServiceTypeColor(service.type)}`}>
|
|
{service.type}
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm font-mono text-slate-600">:{service.port}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-sm text-slate-600 mb-3">{service.description}</p>
|
|
|
|
<div className="flex flex-wrap gap-1 mb-3">
|
|
{service.tech.map((t) => (
|
|
<span key={t} className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">
|
|
{t}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{selectedService === service.id && (
|
|
<div className="mt-4 pt-4 border-t border-slate-200 space-y-2">
|
|
{/* Purpose/Warum dieser Service */}
|
|
{'purpose' in service && (
|
|
<div className="bg-primary-50 border border-primary-200 rounded-lg p-3 mb-3">
|
|
<div className="text-xs font-medium text-primary-700 mb-1">Warum dieser Service?</div>
|
|
<div className="text-sm text-primary-900">{(service as typeof service & {purpose: string}).purpose}</div>
|
|
</div>
|
|
)}
|
|
<div className="text-xs text-slate-500">Container: {service.container}</div>
|
|
{service.healthEndpoint && (
|
|
<div className="text-xs text-slate-500">
|
|
Health: <code className="bg-slate-100 px-1 rounded">localhost:{service.port}{service.healthEndpoint}</code>
|
|
</div>
|
|
)}
|
|
<div className="text-xs text-slate-500">
|
|
Endpoints: {service.endpoints.length}
|
|
</div>
|
|
|
|
{/* VS Code Link */}
|
|
{docPaths[service.id] && (
|
|
<a
|
|
href={`vscode://file/${PROJECT_BASE_PATH}/${docPaths[service.id]}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="mt-3 flex items-center gap-2 text-xs bg-blue-50 text-blue-700 px-3 py-2 rounded-lg hover:bg-blue-100 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"/>
|
|
</svg>
|
|
In VS Code oeffnen
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* API Reference Tab */}
|
|
{activeTab === 'api' && (
|
|
<div className="space-y-6">
|
|
{services.filter(s => s.endpoints.length > 0).map((service) => (
|
|
<div key={service.id} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<div className="px-6 py-4 bg-slate-50 border-b border-slate-200">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="font-semibold text-slate-900">{service.name}</h3>
|
|
<div className="text-sm text-slate-500">Base URL: http://localhost:{service.port}</div>
|
|
</div>
|
|
<span className={`text-xs px-2 py-0.5 rounded-full ${getServiceTypeColor(service.type)}`}>
|
|
{service.type}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="divide-y divide-slate-100">
|
|
{service.endpoints.map((endpoint, idx) => {
|
|
const endpointId = `${service.id}-${idx}`
|
|
const curlCommand = `curl -X ${endpoint.method} http://localhost:${service.port}${endpoint.path}`
|
|
|
|
return (
|
|
<div key={idx} className="px-6 py-3 hover:bg-slate-50 transition-colors">
|
|
<div className="flex items-center gap-3">
|
|
<span className={`text-xs font-mono font-semibold px-2 py-1 rounded ${getMethodColor(endpoint.method)}`}>
|
|
{endpoint.method}
|
|
</span>
|
|
<code className="text-sm font-mono text-slate-700 flex-1">{endpoint.path}</code>
|
|
<button
|
|
onClick={() => copyToClipboard(curlCommand, endpointId)}
|
|
className="text-xs text-slate-400 hover:text-slate-600 transition-colors"
|
|
title="Copy curl command"
|
|
>
|
|
{copiedEndpoint === endpointId ? (
|
|
<span className="text-green-600">Copied!</span>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="text-sm text-slate-500 mt-1 ml-14">{endpoint.description}</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Docker Tab */}
|
|
{activeTab === 'docker' && (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Docker Compose Services</h2>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-slate-200">
|
|
<th className="text-left py-3 px-4 font-medium text-slate-700">Container</th>
|
|
<th className="text-left py-3 px-4 font-medium text-slate-700">Port</th>
|
|
<th className="text-left py-3 px-4 font-medium text-slate-700">Type</th>
|
|
<th className="text-left py-3 px-4 font-medium text-slate-700">Health Check</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{services.map((service) => (
|
|
<tr key={service.id} className="hover:bg-slate-50">
|
|
<td className="py-3 px-4">
|
|
<code className="text-sm bg-slate-100 px-2 py-0.5 rounded">{service.container}</code>
|
|
</td>
|
|
<td className="py-3 px-4 font-mono">{service.port}</td>
|
|
<td className="py-3 px-4">
|
|
<span className={`text-xs px-2 py-0.5 rounded-full ${getServiceTypeColor(service.type)}`}>
|
|
{service.type}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
{service.healthEndpoint ? (
|
|
<code className="text-xs bg-green-50 text-green-700 px-2 py-0.5 rounded">
|
|
{service.healthEndpoint}
|
|
</code>
|
|
) : (
|
|
<span className="text-slate-400">-</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Common Commands */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Haeufige Befehle</h2>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{ label: 'Alle Services starten', cmd: 'docker compose up -d' },
|
|
{ label: 'Logs anzeigen', cmd: 'docker compose logs -f [service]' },
|
|
{ label: 'Service neu bauen', cmd: 'docker compose build [service] --no-cache' },
|
|
{ label: 'Container Status', cmd: 'docker ps --format "table {{.Names}}\\t{{.Status}}\\t{{.Ports}}"' },
|
|
{ label: 'In Container einloggen', cmd: 'docker exec -it [container] /bin/sh' },
|
|
].map((item, idx) => (
|
|
<div key={idx} className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg">
|
|
<div className="text-sm text-slate-600 w-40">{item.label}</div>
|
|
<code className="flex-1 text-sm font-mono bg-slate-900 text-green-400 px-3 py-2 rounded">
|
|
{item.cmd}
|
|
</code>
|
|
<button
|
|
onClick={() => copyToClipboard(item.cmd, `cmd-${idx}`)}
|
|
className="text-slate-400 hover:text-slate-600"
|
|
>
|
|
{copiedEndpoint === `cmd-${idx}` ? (
|
|
<span className="text-xs text-green-600">Copied!</span>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Environment Variables */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Wichtige Umgebungsvariablen</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{services.filter(s => s.envVars.length > 0).map((service) => (
|
|
<div key={service.id} className="p-4 bg-slate-50 rounded-lg">
|
|
<h4 className="font-medium text-slate-900 mb-2">{service.name}</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{service.envVars.map((env) => (
|
|
<code key={env} className="text-xs bg-slate-200 text-slate-700 px-2 py-1 rounded">
|
|
{env}
|
|
</code>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Testing Tab */}
|
|
{activeTab === 'testing' && (
|
|
<div className="space-y-6">
|
|
{/* Quick Links to Docs */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-slate-900">Test-Dokumentation</h2>
|
|
<a
|
|
href={`vscode://file/${PROJECT_BASE_PATH}/docs/testing/README.md`}
|
|
className="flex items-center gap-2 text-sm bg-blue-50 text-blue-700 px-3 py-2 rounded-lg hover:bg-blue-100 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"/>
|
|
</svg>
|
|
Vollstaendige Docs in VS Code
|
|
</a>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{[
|
|
{ file: 'docs/testing/README.md', label: 'Test-Uebersicht', desc: 'Teststrategie & Coverage-Ziele' },
|
|
{ file: 'docs/testing/QUICKSTART.md', label: 'Quickstart', desc: 'Schnellstart fuer Tests' },
|
|
{ file: 'docs/testing/INTEGRATION_TESTS.md', label: 'Integrationstests', desc: 'API & DB Tests' },
|
|
].map((doc) => (
|
|
<a
|
|
key={doc.file}
|
|
href={`vscode://file/${PROJECT_BASE_PATH}/${doc.file}`}
|
|
className="p-4 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors"
|
|
>
|
|
<div className="font-medium text-slate-900">{doc.label}</div>
|
|
<div className="text-sm text-slate-500">{doc.desc}</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test Pyramid */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Test-Pyramide</h2>
|
|
<div className="bg-slate-900 rounded-lg p-6 text-center">
|
|
<pre className="text-green-400 font-mono text-sm whitespace-pre inline-block text-left">{` /\\
|
|
/ \\ E2E (10%)
|
|
/----\\
|
|
/ \\ Integration (20%)
|
|
/--------\\
|
|
/ \\ Unit Tests (70%)
|
|
/--------------\\`}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Coverage Ziele */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Coverage-Ziele</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{[
|
|
{ component: 'Go Consent Service', target: '80%', current: '~75%', color: 'green' },
|
|
{ component: 'Python Backend', target: '70%', current: '~65%', color: 'yellow' },
|
|
{ component: 'Critical Paths (Auth, OAuth)', target: '95%', current: '~90%', color: 'green' },
|
|
].map((item) => (
|
|
<div key={item.component} className="p-4 bg-slate-50 rounded-lg">
|
|
<div className="font-medium text-slate-900">{item.component}</div>
|
|
<div className="flex items-center gap-2 mt-2">
|
|
<div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full ${item.color === 'green' ? 'bg-green-500' : 'bg-yellow-500'}`}
|
|
style={{ width: item.current.replace('~', '') }}
|
|
/>
|
|
</div>
|
|
<span className="text-sm text-slate-600">{item.current}</span>
|
|
</div>
|
|
<div className="text-xs text-slate-500 mt-1">Ziel: {item.target}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test Commands */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Test-Befehle</h2>
|
|
<div className="space-y-4">
|
|
{[
|
|
{ label: 'Go Tests (alle)', cmd: 'cd consent-service && go test -v ./...', lang: 'Go' },
|
|
{ label: 'Go Tests mit Coverage', cmd: 'cd consent-service && go test -cover ./...', lang: 'Go' },
|
|
{ label: 'Python Tests (alle)', cmd: 'cd backend && source venv/bin/activate && pytest -v', lang: 'Python' },
|
|
{ label: 'Python Tests mit Coverage', cmd: 'cd backend && pytest --cov=. --cov-report=html', lang: 'Python' },
|
|
].map((item, idx) => (
|
|
<div key={idx} className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg">
|
|
<span className={`text-xs px-2 py-0.5 rounded-full ${item.lang === 'Go' ? 'bg-cyan-100 text-cyan-700' : 'bg-yellow-100 text-yellow-700'}`}>
|
|
{item.lang}
|
|
</span>
|
|
<div className="text-sm text-slate-600 w-40">{item.label}</div>
|
|
<code className="flex-1 text-sm font-mono bg-slate-900 text-green-400 px-3 py-2 rounded">
|
|
{item.cmd}
|
|
</code>
|
|
<button
|
|
onClick={() => copyToClipboard(item.cmd, `test-${idx}`)}
|
|
className="text-slate-400 hover:text-slate-600"
|
|
>
|
|
{copiedEndpoint === `test-${idx}` ? (
|
|
<span className="text-xs text-green-600">Copied!</span>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test-Struktur */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Test-Struktur</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Go Tests */}
|
|
<div>
|
|
<h3 className="font-medium text-slate-900 mb-2 flex items-center gap-2">
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-cyan-100 text-cyan-700">Go</span>
|
|
Consent Service
|
|
</h3>
|
|
<div className="bg-slate-900 rounded-lg p-4 font-mono text-sm text-green-400">
|
|
<div>consent-service/</div>
|
|
<div className="ml-4">internal/</div>
|
|
<div className="ml-8">handlers/handlers_test.go</div>
|
|
<div className="ml-8">services/auth_service_test.go</div>
|
|
<div className="ml-8">services/oauth_service_test.go</div>
|
|
<div className="ml-8">services/totp_service_test.go</div>
|
|
<div className="ml-8">middleware/middleware_test.go</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Python Tests */}
|
|
<div>
|
|
<h3 className="font-medium text-slate-900 mb-2 flex items-center gap-2">
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-700">Python</span>
|
|
Backend
|
|
</h3>
|
|
<div className="bg-slate-900 rounded-lg p-4 font-mono text-sm text-green-400">
|
|
<div>backend/</div>
|
|
<div className="ml-4">tests/</div>
|
|
<div className="ml-8">test_consent_client.py</div>
|
|
<div className="ml-8">test_gdpr_api.py</div>
|
|
<div className="ml-8">test_dsms_webui.py</div>
|
|
<div className="ml-4">conftest.py</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AdminLayout>
|
|
)
|
|
}
|