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>
1088 lines
44 KiB
TypeScript
1088 lines
44 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Production Readiness Backlog
|
|
*
|
|
* Comprehensive checklist of items needed before going live with BreakPilot
|
|
* Includes CI/CD, Security, RBAC, Data Protection, and Release Workflows
|
|
*/
|
|
|
|
import AdminLayout from '@/components/admin/AdminLayout'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
interface BacklogItem {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
category: string
|
|
priority: 'critical' | 'high' | 'medium' | 'low'
|
|
status: 'not_started' | 'in_progress' | 'review' | 'completed' | 'blocked'
|
|
assignee?: string
|
|
dueDate?: string
|
|
notes?: string
|
|
subtasks?: { id: string; title: string; completed: boolean }[]
|
|
}
|
|
|
|
interface BacklogCategory {
|
|
id: string
|
|
name: string
|
|
icon: React.ReactNode
|
|
color: string
|
|
description: string
|
|
}
|
|
|
|
const categories: BacklogCategory[] = [
|
|
{
|
|
id: 'modules',
|
|
name: 'Module Progress',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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" />
|
|
</svg>
|
|
),
|
|
color: 'bg-violet-100 text-violet-700 border-violet-300',
|
|
description: 'Fertigstellungsgrad aller Services & Module',
|
|
},
|
|
{
|
|
id: 'cicd',
|
|
name: 'CI/CD Pipelines',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
),
|
|
color: 'bg-blue-100 text-blue-700 border-blue-300',
|
|
description: 'Build, Test & Deployment Automation',
|
|
},
|
|
{
|
|
id: 'security',
|
|
name: 'Security & Vulnerability',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
),
|
|
color: 'bg-red-100 text-red-700 border-red-300',
|
|
description: 'Security Scans, Dependency Checks & Penetration Testing',
|
|
},
|
|
{
|
|
id: 'testing',
|
|
name: 'Testing & Quality',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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" />
|
|
</svg>
|
|
),
|
|
color: 'bg-emerald-100 text-emerald-700 border-emerald-300',
|
|
description: 'Unit Tests, Integration Tests & E2E Testing',
|
|
},
|
|
{
|
|
id: 'rbac',
|
|
name: 'RBAC & Access Control',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
),
|
|
color: 'bg-purple-100 text-purple-700 border-purple-300',
|
|
description: 'Developer Roles, Permissions & Team Management',
|
|
},
|
|
{
|
|
id: 'git',
|
|
name: 'Git & Branch Protection',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
|
</svg>
|
|
),
|
|
color: 'bg-orange-100 text-orange-700 border-orange-300',
|
|
description: 'Protected Branches, Merge Requests & Code Reviews',
|
|
},
|
|
{
|
|
id: 'release',
|
|
name: 'Release Management',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
</svg>
|
|
),
|
|
color: 'bg-green-100 text-green-700 border-green-300',
|
|
description: 'Versioning, Changelog & Release Notes',
|
|
},
|
|
{
|
|
id: 'data',
|
|
name: 'Data Protection',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
|
</svg>
|
|
),
|
|
color: 'bg-cyan-100 text-cyan-700 border-cyan-300',
|
|
description: 'Backup, Migration & Customer Data Safety',
|
|
},
|
|
{
|
|
id: 'compliance',
|
|
name: 'Compliance & SBOM',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
),
|
|
color: 'bg-teal-100 text-teal-700 border-teal-300',
|
|
description: 'SBOM, Lizenzen & Open Source Compliance',
|
|
},
|
|
{
|
|
id: 'approval',
|
|
name: 'Approval Workflow',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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" />
|
|
</svg>
|
|
),
|
|
color: 'bg-indigo-100 text-indigo-700 border-indigo-300',
|
|
description: 'Developer Approval, QA Sign-off & Release Gates',
|
|
},
|
|
]
|
|
|
|
const initialBacklogItems: BacklogItem[] = [
|
|
// ==================== MODULE PROGRESS ====================
|
|
{
|
|
id: 'mod-1',
|
|
title: 'Consent Service (Go) - 85% fertig',
|
|
description: 'DSGVO Consent Management Microservice - Near Production Ready',
|
|
category: 'modules',
|
|
priority: 'high',
|
|
status: 'in_progress',
|
|
notes: 'Port 8081. 19 Test-Dateien vorhanden. JWT Auth, OAuth 2.0, TOTP 2FA, DSR Workflow, Matrix/Jitsi Integration.',
|
|
subtasks: [
|
|
{ id: 'mod-1-1', title: 'Core Consent API (CRUD, Versioning)', completed: true },
|
|
{ id: 'mod-1-2', title: 'Authentication (JWT, OAuth 2.0, TOTP)', completed: true },
|
|
{ id: 'mod-1-3', title: 'DSR Workflow (Art. 15-21)', completed: true },
|
|
{ id: 'mod-1-4', title: 'Email Templates & Notifications', completed: true },
|
|
{ id: 'mod-1-5', title: 'Matrix/Jitsi Integration', completed: true },
|
|
{ id: 'mod-1-6', title: 'Performance Tests (High-Load)', completed: false },
|
|
{ id: 'mod-1-7', title: 'E2E API Contract Tests', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mod-2',
|
|
title: 'School Service (Go) - 75% fertig',
|
|
description: 'Klassen, Noten, Zeugnisse Microservice',
|
|
category: 'modules',
|
|
priority: 'high',
|
|
status: 'in_progress',
|
|
notes: 'Port 8084. 6 Test-Dateien. Zeugnis-Workflow mit RBAC (Fachlehrer, Klassenlehrer, Schulleitung).',
|
|
subtasks: [
|
|
{ id: 'mod-2-1', title: 'Klassen & Schueler Management', completed: true },
|
|
{ id: 'mod-2-2', title: 'Noten-System mit Statistik', completed: true },
|
|
{ id: 'mod-2-3', title: 'Zeugnis-Workflow & Rollen', completed: true },
|
|
{ id: 'mod-2-4', title: 'Exam Variant Generation (LLM)', completed: true },
|
|
{ id: 'mod-2-5', title: 'Seed Data Generator', completed: true },
|
|
{ id: 'mod-2-6', title: 'Integration Tests zwischen Services', completed: false },
|
|
{ id: 'mod-2-7', title: 'Performance Tests (grosse Klassen)', completed: false },
|
|
{ id: 'mod-2-8', title: 'Trend-Analyse & Comparative Analytics', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mod-3',
|
|
title: 'Billing Service (Go) - 80% fertig',
|
|
description: 'Stripe Integration & Task-Based Billing',
|
|
category: 'modules',
|
|
priority: 'high',
|
|
status: 'in_progress',
|
|
notes: 'Port 8083. 5 Test-Dateien. Task-Konsum mit 5-Monats-Carryover, Fair Use Mode.',
|
|
subtasks: [
|
|
{ id: 'mod-3-1', title: 'Subscription Lifecycle', completed: true },
|
|
{ id: 'mod-3-2', title: 'Stripe Checkout & Webhooks', completed: true },
|
|
{ id: 'mod-3-3', title: 'Task-Based Consumption Tracking', completed: true },
|
|
{ id: 'mod-3-4', title: 'Feature Gating / Entitlements', completed: true },
|
|
{ id: 'mod-3-5', title: 'Customer Portal Integration', completed: true },
|
|
{ id: 'mod-3-6', title: 'Refund & Chargeback Handling', completed: false },
|
|
{ id: 'mod-3-7', title: 'Advanced Analytics & Reporting', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mod-4',
|
|
title: 'Klausur Service (Python) - 70% fertig',
|
|
description: 'BYOEH Abitur-Klausurkorrektur System',
|
|
category: 'modules',
|
|
priority: 'critical',
|
|
status: 'in_progress',
|
|
notes: 'Port 8086. 2 Test-Dateien. BYOEH mit AES-256-GCM Encryption, Qdrant Vector DB, Key-Sharing.',
|
|
subtasks: [
|
|
{ id: 'mod-4-1', title: 'BYOEH Upload & Encryption', completed: true },
|
|
{ id: 'mod-4-2', title: 'Key-Sharing zwischen Pruefern', completed: true },
|
|
{ id: 'mod-4-3', title: 'Qdrant RAG Integration', completed: true },
|
|
{ id: 'mod-4-4', title: 'RBAC fuer Pruefer-Rollen', completed: true },
|
|
{ id: 'mod-4-5', title: 'OCR Pipeline Implementation', completed: false },
|
|
{ id: 'mod-4-6', title: 'KI-gestuetzte Korrektur API', completed: false },
|
|
{ id: 'mod-4-7', title: 'Gutachten-Generierung', completed: false },
|
|
{ id: 'mod-4-8', title: 'Frontend: KorrekturPage fertigstellen', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mod-5',
|
|
title: 'Admin Frontend (Next.js) - 60% fertig',
|
|
description: 'Next.js 15 Admin Dashboard',
|
|
category: 'modules',
|
|
priority: 'high',
|
|
status: 'in_progress',
|
|
notes: 'Port 3000. Nur 1 Test-Datei! Viele Admin-Seiten sind nur Skelett-Implementierungen.',
|
|
subtasks: [
|
|
{ id: 'mod-5-1', title: 'AdminLayout & Navigation', completed: true },
|
|
{ id: 'mod-5-2', title: 'SBOM & Architecture Pages', completed: true },
|
|
{ id: 'mod-5-3', title: 'Security Dashboard', completed: true },
|
|
{ id: 'mod-5-4', title: 'Backlog Page', completed: true },
|
|
{ id: 'mod-5-5', title: 'Consent Management Page', completed: true },
|
|
{ id: 'mod-5-6', title: 'Edu-Search Implementation', completed: false },
|
|
{ id: 'mod-5-7', title: 'DSMS Page Implementation', completed: false },
|
|
{ id: 'mod-5-8', title: 'Component Unit Tests', completed: false },
|
|
{ id: 'mod-5-9', title: 'E2E Tests mit Playwright', completed: false },
|
|
{ id: 'mod-5-10', title: 'Authentication Implementation', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mod-6',
|
|
title: 'Backend Studio (Python) - 65% fertig',
|
|
description: 'Lehrer-Frontend Module (FastAPI)',
|
|
category: 'modules',
|
|
priority: 'medium',
|
|
status: 'in_progress',
|
|
notes: 'Port 8000. Keine dedizierten Tests! Integration mit allen APIs.',
|
|
subtasks: [
|
|
{ id: 'mod-6-1', title: 'Studio Router & Module Loading', completed: true },
|
|
{ id: 'mod-6-2', title: 'School Module UI', completed: true },
|
|
{ id: 'mod-6-3', title: 'Meetings/Jitsi Integration', completed: true },
|
|
{ id: 'mod-6-4', title: 'Customer Portal (Slim)', completed: true },
|
|
{ id: 'mod-6-5', title: 'Dev Admin Panel', completed: true },
|
|
{ id: 'mod-6-6', title: 'Component Unit Tests', completed: false },
|
|
{ id: 'mod-6-7', title: 'UI Component Dokumentation', completed: false },
|
|
{ id: 'mod-6-8', title: 'Accessibility Compliance', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mod-7',
|
|
title: 'DSMS/IPFS Service - 40% fertig',
|
|
description: 'Dezentrales Speichersystem',
|
|
category: 'modules',
|
|
priority: 'low',
|
|
status: 'not_started',
|
|
notes: 'Port 8082. Keine Tests! Grundstruktur vorhanden aber Core-Logic fehlt.',
|
|
subtasks: [
|
|
{ id: 'mod-7-1', title: 'Service Struktur', completed: true },
|
|
{ id: 'mod-7-2', title: 'IPFS Configuration', completed: true },
|
|
{ id: 'mod-7-3', title: 'Upload/Download Handlers', completed: false },
|
|
{ id: 'mod-7-4', title: 'Encryption/Decryption Layer', completed: false },
|
|
{ id: 'mod-7-5', title: 'Pinning Strategy', completed: false },
|
|
{ id: 'mod-7-6', title: 'Replication Logic', completed: false },
|
|
{ id: 'mod-7-7', title: 'Tests & Dokumentation', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mod-8',
|
|
title: 'Security Module (Python) - 75% fertig',
|
|
description: 'DevSecOps Dashboard & Scans',
|
|
category: 'modules',
|
|
priority: 'medium',
|
|
status: 'in_progress',
|
|
notes: 'Teil von Backend. Keine dedizierten Tests! Gitleaks, Semgrep, Bandit, Trivy Integration.',
|
|
subtasks: [
|
|
{ id: 'mod-8-1', title: 'Security Tool Status API', completed: true },
|
|
{ id: 'mod-8-2', title: 'Findings Aggregation', completed: true },
|
|
{ id: 'mod-8-3', title: 'Report Parsing (alle Tools)', completed: true },
|
|
{ id: 'mod-8-4', title: 'SBOM Generation (CycloneDX)', completed: true },
|
|
{ id: 'mod-8-5', title: 'Scan Triggering', completed: true },
|
|
{ id: 'mod-8-6', title: 'Unit Tests fuer Parser', completed: false },
|
|
{ id: 'mod-8-7', title: 'Vulnerability Tracking', completed: false },
|
|
{ id: 'mod-8-8', title: 'Compliance Reporting (SOC2)', completed: false },
|
|
],
|
|
},
|
|
|
|
// ==================== TESTING & QUALITY ====================
|
|
{
|
|
id: 'test-1',
|
|
title: 'Test Coverage Erhöhen - Consent Service',
|
|
description: 'Integration & E2E Tests fuer produktionskritischen Service',
|
|
category: 'testing',
|
|
priority: 'high',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'test-1-1', title: 'E2E API Tests mit echter DB', completed: false },
|
|
{ id: 'test-1-2', title: 'Load Testing mit k6 oder vegeta', completed: false },
|
|
{ id: 'test-1-3', title: 'Edge Cases in DSR Workflow', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'test-2',
|
|
title: 'Admin Frontend Test Suite',
|
|
description: 'Component & E2E Tests fuer Next.js Admin',
|
|
category: 'testing',
|
|
priority: 'critical',
|
|
status: 'not_started',
|
|
notes: 'Aktuell nur 1 Test-Datei! Kritischer Mangel.',
|
|
subtasks: [
|
|
{ id: 'test-2-1', title: 'Jest/Vitest fuer Component Tests', completed: false },
|
|
{ id: 'test-2-2', title: 'Playwright E2E Setup', completed: false },
|
|
{ id: 'test-2-3', title: 'API Mock Layer', completed: false },
|
|
{ id: 'test-2-4', title: 'Visual Regression Tests', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'test-3',
|
|
title: 'Klausur Service Tests erweitern',
|
|
description: 'OCR & KI-Korrektur Pipeline testen',
|
|
category: 'testing',
|
|
priority: 'high',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'test-3-1', title: 'BYOEH Encryption Tests', completed: true },
|
|
{ id: 'test-3-2', title: 'Key-Sharing Tests', completed: true },
|
|
{ id: 'test-3-3', title: 'OCR Pipeline Integration Tests', completed: false },
|
|
{ id: 'test-3-4', title: 'Large File Upload Tests', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'test-4',
|
|
title: 'Security Module Unit Tests',
|
|
description: 'Parser-Funktionen und Findings-Aggregation testen',
|
|
category: 'testing',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'test-4-1', title: 'Gitleaks Parser Tests', completed: false },
|
|
{ id: 'test-4-2', title: 'Trivy Parser Tests', completed: false },
|
|
{ id: 'test-4-3', title: 'SBOM Generation Tests', completed: false },
|
|
{ id: 'test-4-4', title: 'Mock Security Reports', completed: false },
|
|
],
|
|
},
|
|
|
|
// ==================== CI/CD PIPELINES ====================
|
|
{
|
|
id: 'cicd-1',
|
|
title: 'GitHub Actions Workflow Setup',
|
|
description: 'Basis CI/CD Pipeline mit GitHub Actions aufsetzen',
|
|
category: 'cicd',
|
|
priority: 'critical',
|
|
status: 'completed',
|
|
notes: 'Implementiert in .github/workflows/ci.yml - Go, Python, Node.js Tests, Docker Build & Push zu GHCR, Staging/Production Deployment',
|
|
subtasks: [
|
|
{ id: 'cicd-1-1', title: 'Build-Job fuer alle Services (Go, Python, Node)', completed: true },
|
|
{ id: 'cicd-1-2', title: 'Test-Job mit Coverage Report', completed: true },
|
|
{ id: 'cicd-1-3', title: 'Docker Image Build & Push', completed: true },
|
|
{ id: 'cicd-1-4', title: 'Deploy to Staging Environment', completed: true },
|
|
],
|
|
},
|
|
{
|
|
id: 'cicd-2',
|
|
title: 'Staging Environment einrichten',
|
|
description: 'Separate Staging-Umgebung fuer Pre-Production Tests',
|
|
category: 'cicd',
|
|
priority: 'high',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'cicd-2-1', title: 'Staging Server/Cluster provisionieren', completed: false },
|
|
{ id: 'cicd-2-2', title: 'Staging Datenbank mit anonymisierten Daten', completed: false },
|
|
{ id: 'cicd-2-3', title: 'Automatisches Deployment bei Merge to main', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'cicd-3',
|
|
title: 'Production Deployment Pipeline',
|
|
description: 'Kontrolliertes Deployment in Production mit Rollback',
|
|
category: 'cicd',
|
|
priority: 'critical',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'cicd-3-1', title: 'Blue-Green oder Canary Deployment Strategy', completed: false },
|
|
{ id: 'cicd-3-2', title: 'Automatischer Rollback bei Fehlern', completed: false },
|
|
{ id: 'cicd-3-3', title: 'Health Check nach Deployment', completed: false },
|
|
{ id: 'cicd-3-4', title: 'Deployment Notifications (Slack/Email)', completed: false },
|
|
],
|
|
},
|
|
|
|
// Security & Vulnerability
|
|
{
|
|
id: 'sec-1',
|
|
title: 'Dependency Vulnerability Scanning',
|
|
description: 'Automatische Pruefung auf bekannte Schwachstellen in Dependencies',
|
|
category: 'security',
|
|
priority: 'critical',
|
|
status: 'completed',
|
|
notes: 'Implementiert in .github/dependabot.yml - Go, Python, npm, GitHub Actions und Docker Dependencies werden woechentlich geprueft',
|
|
subtasks: [
|
|
{ id: 'sec-1-1', title: 'Dependabot fuer Go aktivieren', completed: true },
|
|
{ id: 'sec-1-2', title: 'Dependabot fuer Python aktivieren', completed: true },
|
|
{ id: 'sec-1-3', title: 'Dependabot fuer npm aktivieren', completed: true },
|
|
{ id: 'sec-1-4', title: 'CI-Job: Block Merge bei kritischen Vulnerabilities', completed: true },
|
|
],
|
|
},
|
|
{
|
|
id: 'sec-2',
|
|
title: 'Container Image Scanning',
|
|
description: 'Sicherheitspruefung aller Docker Images vor Deployment',
|
|
category: 'security',
|
|
priority: 'high',
|
|
status: 'completed',
|
|
notes: 'Implementiert in .github/workflows/security.yml - Trivy scannt alle Docker Images',
|
|
subtasks: [
|
|
{ id: 'sec-2-1', title: 'Trivy oder Snyk in CI integrieren', completed: true },
|
|
{ id: 'sec-2-2', title: 'Base Image Policy definieren', completed: true },
|
|
{ id: 'sec-2-3', title: 'Scan Report bei jedem Build', completed: true },
|
|
],
|
|
},
|
|
{
|
|
id: 'sec-3',
|
|
title: 'SAST (Static Application Security Testing)',
|
|
description: 'Code-Analyse auf Sicherheitsluecken',
|
|
category: 'security',
|
|
priority: 'high',
|
|
status: 'completed',
|
|
notes: 'Implementiert in .github/workflows/security.yml - Gosec, Bandit, npm audit',
|
|
subtasks: [
|
|
{ id: 'sec-3-1', title: 'CodeQL fuer Go/Python aktivieren', completed: true },
|
|
{ id: 'sec-3-2', title: 'Semgrep Regeln konfigurieren', completed: false },
|
|
{ id: 'sec-3-3', title: 'OWASP Top 10 Checks integrieren', completed: true },
|
|
],
|
|
},
|
|
{
|
|
id: 'sec-4',
|
|
title: 'Secret Scanning',
|
|
description: 'Verhindern, dass Secrets in Git landen',
|
|
category: 'security',
|
|
priority: 'critical',
|
|
status: 'completed',
|
|
notes: 'Implementiert in .github/workflows/security.yml - TruffleHog und GitLeaks scannen nach Secrets',
|
|
subtasks: [
|
|
{ id: 'sec-4-1', title: 'GitHub Secret Scanning aktivieren', completed: true },
|
|
{ id: 'sec-4-2', title: 'Pre-commit Hook mit gitleaks', completed: true },
|
|
{ id: 'sec-4-3', title: 'Historische Commits scannen', completed: true },
|
|
],
|
|
},
|
|
|
|
// RBAC & Access Control
|
|
{
|
|
id: 'rbac-1',
|
|
title: 'GitHub Team & Repository Permissions',
|
|
description: 'Team-basierte Zugriffsrechte auf Repository',
|
|
category: 'rbac',
|
|
priority: 'high',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'rbac-1-1', title: 'Team "Maintainers" erstellen (Full Access)', completed: false },
|
|
{ id: 'rbac-1-2', title: 'Team "Developers" erstellen (Write Access)', completed: false },
|
|
{ id: 'rbac-1-3', title: 'Team "Reviewers" erstellen (Read + Review)', completed: false },
|
|
{ id: 'rbac-1-4', title: 'External Collaborators Policy', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'rbac-2',
|
|
title: 'Infrastructure Access Control',
|
|
description: 'Zugriffsrechte auf Server und Cloud-Ressourcen',
|
|
category: 'rbac',
|
|
priority: 'critical',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'rbac-2-1', title: 'SSH Key Management Policy', completed: false },
|
|
{ id: 'rbac-2-2', title: 'Production Server Access Audit Log', completed: false },
|
|
{ id: 'rbac-2-3', title: 'Database Access nur ueber Jump Host', completed: false },
|
|
{ id: 'rbac-2-4', title: 'Secrets Management (Vault/AWS Secrets)', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'rbac-3',
|
|
title: 'Admin Panel Access Control',
|
|
description: 'Rollenbasierte Zugriffsrechte im Admin Frontend',
|
|
category: 'rbac',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'rbac-3-1', title: 'Admin Authentication implementieren', completed: false },
|
|
{ id: 'rbac-3-2', title: 'Role-based Views (Admin vs. Support)', completed: false },
|
|
{ id: 'rbac-3-3', title: 'Audit Log fuer Admin-Aktionen', completed: false },
|
|
],
|
|
},
|
|
|
|
// Git & Branch Protection
|
|
{
|
|
id: 'git-1',
|
|
title: 'Protected Branches Setup',
|
|
description: 'Schutz fuer main/develop Branches',
|
|
category: 'git',
|
|
priority: 'critical',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'git-1-1', title: 'main Branch: No direct push', completed: false },
|
|
{ id: 'git-1-2', title: 'Require PR with min. 1 Approval', completed: false },
|
|
{ id: 'git-1-3', title: 'Require Status Checks (CI muss gruen sein)', completed: false },
|
|
{ id: 'git-1-4', title: 'Require Signed Commits', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'git-2',
|
|
title: 'Pull Request Template',
|
|
description: 'Standardisierte PR-Beschreibung mit Checkliste',
|
|
category: 'git',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'git-2-1', title: 'PR Template mit Description, Testing, Checklist', completed: false },
|
|
{ id: 'git-2-2', title: 'Issue Template fuer Bugs und Features', completed: false },
|
|
{ id: 'git-2-3', title: 'Automatische Labels basierend auf Aenderungen', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'git-3',
|
|
title: 'Code Review Guidelines',
|
|
description: 'Dokumentierte Richtlinien fuer Code Reviews',
|
|
category: 'git',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'git-3-1', title: 'Code Review Checklist erstellen', completed: false },
|
|
{ id: 'git-3-2', title: 'Review Turnaround Time Policy', completed: false },
|
|
{ id: 'git-3-3', title: 'CODEOWNERS Datei pflegen', completed: false },
|
|
],
|
|
},
|
|
|
|
// Release Management
|
|
{
|
|
id: 'rel-1',
|
|
title: 'Semantic Versioning Setup',
|
|
description: 'Automatische Versionierung nach SemVer',
|
|
category: 'release',
|
|
priority: 'high',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'rel-1-1', title: 'Conventional Commits erzwingen', completed: false },
|
|
{ id: 'rel-1-2', title: 'semantic-release oder release-please einrichten', completed: false },
|
|
{ id: 'rel-1-3', title: 'Automatische Git Tags', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'rel-2',
|
|
title: 'Changelog Automation',
|
|
description: 'Automatisch generierte Release Notes',
|
|
category: 'release',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'rel-2-1', title: 'CHANGELOG.md automatisch generieren', completed: false },
|
|
{ id: 'rel-2-2', title: 'GitHub Release mit Notes erstellen', completed: false },
|
|
{ id: 'rel-2-3', title: 'Breaking Changes hervorheben', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'rel-3',
|
|
title: 'Release Branches Strategy',
|
|
description: 'Branching-Modell fuer Releases definieren',
|
|
category: 'release',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'rel-3-1', title: 'Git Flow oder GitHub Flow definieren', completed: false },
|
|
{ id: 'rel-3-2', title: 'Hotfix Branch Process', completed: false },
|
|
{ id: 'rel-3-3', title: 'Release Branch Protection', completed: false },
|
|
],
|
|
},
|
|
|
|
// Data Protection
|
|
{
|
|
id: 'data-1',
|
|
title: 'Database Backup Strategy',
|
|
description: 'Automatische Backups mit Retention Policy',
|
|
category: 'data',
|
|
priority: 'critical',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'data-1-1', title: 'Taegliche automatische Backups', completed: false },
|
|
{ id: 'data-1-2', title: 'Point-in-Time Recovery aktivieren', completed: false },
|
|
{ id: 'data-1-3', title: 'Backup Encryption at Rest', completed: false },
|
|
{ id: 'data-1-4', title: 'Backup Restore Test dokumentieren', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'data-2',
|
|
title: 'Customer Data Protection',
|
|
description: 'Schutz von Stammdaten, Consent & Dokumenten',
|
|
category: 'data',
|
|
priority: 'critical',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'data-2-1', title: 'Stammdaten: Encryption at Rest', completed: false },
|
|
{ id: 'data-2-2', title: 'Consent-Daten: Audit Log fuer Aenderungen', completed: false },
|
|
{ id: 'data-2-3', title: 'Dokumente: Secure Storage (S3 mit Encryption)', completed: false },
|
|
{ id: 'data-2-4', title: 'PII Data Masking in Logs', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'data-3',
|
|
title: 'Migration Safety',
|
|
description: 'Sichere Datenbank-Migrationen ohne Datenverlust',
|
|
category: 'data',
|
|
priority: 'high',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'data-3-1', title: 'Migration Pre-Check Script', completed: false },
|
|
{ id: 'data-3-2', title: 'Rollback-faehige Migrationen', completed: false },
|
|
{ id: 'data-3-3', title: 'Staging Migration Test vor Production', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'data-4',
|
|
title: 'Data Anonymization',
|
|
description: 'Anonymisierte Daten fuer Staging/Test',
|
|
category: 'data',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'data-4-1', title: 'Anonymisierungs-Script fuer Staging DB', completed: false },
|
|
{ id: 'data-4-2', title: 'Test-Datengenerator', completed: false },
|
|
{ id: 'data-4-3', title: 'DSGVO-konforme Loeschung in Test-Systemen', completed: false },
|
|
],
|
|
},
|
|
|
|
// Compliance & SBOM
|
|
{
|
|
id: 'sbom-1',
|
|
title: 'Software Bill of Materials (SBOM) erstellen',
|
|
description: 'Vollstaendige Liste aller Open Source Komponenten',
|
|
category: 'compliance',
|
|
priority: 'high',
|
|
status: 'completed',
|
|
notes: 'Implementiert in /admin/sbom - 70+ Komponenten dokumentiert inkl. Docker Services, Security Tools, Python/Go/Node Packages',
|
|
subtasks: [
|
|
{ id: 'sbom-1-1', title: 'Go Dependencies auflisten (go.mod)', completed: true },
|
|
{ id: 'sbom-1-2', title: 'Python Dependencies auflisten (requirements.txt)', completed: true },
|
|
{ id: 'sbom-1-3', title: 'npm Dependencies auflisten (package.json)', completed: true },
|
|
{ id: 'sbom-1-4', title: 'Docker Base Images dokumentieren', completed: true },
|
|
{ id: 'sbom-1-5', title: 'SBOM in CycloneDX/SPDX Format exportieren', completed: true },
|
|
],
|
|
},
|
|
{
|
|
id: 'sbom-2',
|
|
title: 'Open Source Lizenz-Compliance',
|
|
description: 'Pruefung aller Lizenzen auf Kompatibilitaet',
|
|
category: 'compliance',
|
|
priority: 'high',
|
|
status: 'in_progress',
|
|
subtasks: [
|
|
{ id: 'sbom-2-1', title: 'Alle Lizenzen identifizieren (MIT, Apache, GPL, etc.)', completed: true },
|
|
{ id: 'sbom-2-2', title: 'Lizenz-Kompatibilitaet pruefen', completed: false },
|
|
{ id: 'sbom-2-3', title: 'LICENSES.md Datei erstellen', completed: false },
|
|
{ id: 'sbom-2-4', title: 'Third-Party Notices generieren', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'sbom-3',
|
|
title: 'Open Source Policy',
|
|
description: 'Richtlinien fuer Verwendung von Open Source',
|
|
category: 'compliance',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'sbom-3-1', title: 'Erlaubte Lizenzen definieren', completed: false },
|
|
{ id: 'sbom-3-2', title: 'Genehmigungsprozess fuer neue Dependencies', completed: false },
|
|
{ id: 'sbom-3-3', title: 'Automatische Lizenz-Checks in CI', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'sbom-4',
|
|
title: 'Aktuelle Open Source Komponenten dokumentieren',
|
|
description: 'BreakPilot Open Source Stack dokumentieren',
|
|
category: 'compliance',
|
|
priority: 'medium',
|
|
status: 'completed',
|
|
notes: 'Implementiert in /admin/sbom und /admin/architecture - 32 Docker Services, 14 Security Tools, 26+ Libraries',
|
|
subtasks: [
|
|
{ id: 'sbom-4-1', title: 'Backend: FastAPI, Pydantic, httpx, anthropic', completed: true },
|
|
{ id: 'sbom-4-2', title: 'Go Services: Gin, GORM, goquery', completed: true },
|
|
{ id: 'sbom-4-3', title: 'Frontend: Next.js, React, Tailwind', completed: true },
|
|
{ id: 'sbom-4-4', title: 'Infrastructure: PostgreSQL, OpenSearch, Ollama', completed: true },
|
|
],
|
|
},
|
|
|
|
// Approval Workflow
|
|
{
|
|
id: 'appr-1',
|
|
title: 'Release Approval Gates',
|
|
description: 'Mehrstufige Freigabe vor Production Deploy',
|
|
category: 'approval',
|
|
priority: 'critical',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'appr-1-1', title: 'QA Sign-off erforderlich', completed: false },
|
|
{ id: 'appr-1-2', title: 'Security Review fuer kritische Aenderungen', completed: false },
|
|
{ id: 'appr-1-3', title: 'Product Owner Freigabe', completed: false },
|
|
{ id: 'appr-1-4', title: 'GitHub Environments mit Required Reviewers', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'appr-2',
|
|
title: 'Deployment Windows',
|
|
description: 'Definierte Zeitfenster fuer Production Deployments',
|
|
category: 'approval',
|
|
priority: 'medium',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'appr-2-1', title: 'Deployment-Kalender definieren', completed: false },
|
|
{ id: 'appr-2-2', title: 'Freeze Periods (z.B. vor Feiertagen)', completed: false },
|
|
{ id: 'appr-2-3', title: 'Emergency Hotfix Process', completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'appr-3',
|
|
title: 'Post-Deployment Verification',
|
|
description: 'Checks nach erfolgreichem Deployment',
|
|
category: 'approval',
|
|
priority: 'high',
|
|
status: 'not_started',
|
|
subtasks: [
|
|
{ id: 'appr-3-1', title: 'Smoke Tests automatisieren', completed: false },
|
|
{ id: 'appr-3-2', title: 'Error Rate Monitoring (erste 30 Min)', completed: false },
|
|
{ id: 'appr-3-3', title: 'Rollback-Kriterien definieren', completed: false },
|
|
],
|
|
},
|
|
]
|
|
|
|
const statusLabels: Record<BacklogItem['status'], { label: string; color: string }> = {
|
|
not_started: { label: 'Nicht begonnen', color: 'bg-slate-100 text-slate-600' },
|
|
in_progress: { label: 'In Arbeit', color: 'bg-blue-100 text-blue-700' },
|
|
review: { label: 'In Review', color: 'bg-yellow-100 text-yellow-700' },
|
|
completed: { label: 'Abgeschlossen', color: 'bg-green-100 text-green-700' },
|
|
blocked: { label: 'Blockiert', color: 'bg-red-100 text-red-700' },
|
|
}
|
|
|
|
const priorityLabels: Record<BacklogItem['priority'], { label: string; color: string }> = {
|
|
critical: { label: 'Kritisch', color: 'bg-red-500 text-white' },
|
|
high: { label: 'Hoch', color: 'bg-orange-500 text-white' },
|
|
medium: { label: 'Mittel', color: 'bg-yellow-500 text-white' },
|
|
low: { label: 'Niedrig', color: 'bg-slate-500 text-white' },
|
|
}
|
|
|
|
export default function BacklogPage() {
|
|
const [items, setItems] = useState<BacklogItem[]>(initialBacklogItems)
|
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
|
|
const [selectedPriority, setSelectedPriority] = useState<string | null>(null)
|
|
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
|
|
// Load saved state from localStorage
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem('backlogItems')
|
|
if (saved) {
|
|
try {
|
|
setItems(JSON.parse(saved))
|
|
} catch (e) {
|
|
console.error('Failed to load backlog items:', e)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
// Save state to localStorage
|
|
useEffect(() => {
|
|
localStorage.setItem('backlogItems', JSON.stringify(items))
|
|
}, [items])
|
|
|
|
const filteredItems = items.filter((item) => {
|
|
if (selectedCategory && item.category !== selectedCategory) return false
|
|
if (selectedPriority && item.priority !== selectedPriority) return false
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase()
|
|
return (
|
|
item.title.toLowerCase().includes(query) ||
|
|
item.description.toLowerCase().includes(query) ||
|
|
item.subtasks?.some((st) => st.title.toLowerCase().includes(query))
|
|
)
|
|
}
|
|
return true
|
|
})
|
|
|
|
const toggleExpand = (id: string) => {
|
|
const newExpanded = new Set(expandedItems)
|
|
if (newExpanded.has(id)) {
|
|
newExpanded.delete(id)
|
|
} else {
|
|
newExpanded.add(id)
|
|
}
|
|
setExpandedItems(newExpanded)
|
|
}
|
|
|
|
const updateItemStatus = (id: string, status: BacklogItem['status']) => {
|
|
setItems(items.map((item) => (item.id === id ? { ...item, status } : item)))
|
|
}
|
|
|
|
const toggleSubtask = (itemId: string, subtaskId: string) => {
|
|
setItems(
|
|
items.map((item) => {
|
|
if (item.id !== itemId) return item
|
|
return {
|
|
...item,
|
|
subtasks: item.subtasks?.map((st) =>
|
|
st.id === subtaskId ? { ...st, completed: !st.completed } : st
|
|
),
|
|
}
|
|
})
|
|
)
|
|
}
|
|
|
|
const getProgress = () => {
|
|
const total = items.length
|
|
const completed = items.filter((i) => i.status === 'completed').length
|
|
return { total, completed, percentage: Math.round((completed / total) * 100) }
|
|
}
|
|
|
|
const getCategoryProgress = (categoryId: string) => {
|
|
const categoryItems = items.filter((i) => i.category === categoryId)
|
|
const completed = categoryItems.filter((i) => i.status === 'completed').length
|
|
return { total: categoryItems.length, completed }
|
|
}
|
|
|
|
const progress = getProgress()
|
|
|
|
return (
|
|
<AdminLayout
|
|
title="Production Readiness Backlog"
|
|
description="Alle Aufgaben vor dem Go-Live"
|
|
>
|
|
{/* Overall Progress */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-slate-900">Gesamtfortschritt</h2>
|
|
<p className="text-sm text-slate-500">
|
|
{progress.completed} von {progress.total} Aufgaben abgeschlossen
|
|
</p>
|
|
</div>
|
|
<div className="text-3xl font-bold text-primary-600">{progress.percentage}%</div>
|
|
</div>
|
|
<div className="w-full bg-slate-200 rounded-full h-3">
|
|
<div
|
|
className="bg-primary-600 h-3 rounded-full transition-all duration-500"
|
|
style={{ width: `${progress.percentage}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category Cards */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
|
|
{categories.map((cat) => {
|
|
const catProgress = getCategoryProgress(cat.id)
|
|
return (
|
|
<button
|
|
key={cat.id}
|
|
onClick={() => setSelectedCategory(selectedCategory === cat.id ? null : cat.id)}
|
|
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
|
selectedCategory === cat.id
|
|
? `${cat.color} ring-2 ring-offset-2`
|
|
: 'bg-white border-slate-200 hover:border-slate-300'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<span className={selectedCategory === cat.id ? '' : 'text-slate-600'}>
|
|
{cat.icon}
|
|
</span>
|
|
<span className="font-medium text-sm">{cat.name}</span>
|
|
</div>
|
|
<div className="text-xs text-slate-500">
|
|
{catProgress.completed}/{catProgress.total} erledigt
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Filters & Search */}
|
|
<div className="flex flex-wrap gap-4 mb-6">
|
|
<div className="flex-1 min-w-[200px]">
|
|
<input
|
|
type="text"
|
|
placeholder="Suchen..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={selectedPriority || ''}
|
|
onChange={(e) => setSelectedPriority(e.target.value || null)}
|
|
className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<option value="">Alle Prioritaeten</option>
|
|
<option value="critical">Kritisch</option>
|
|
<option value="high">Hoch</option>
|
|
<option value="medium">Mittel</option>
|
|
<option value="low">Niedrig</option>
|
|
</select>
|
|
{(selectedCategory || selectedPriority || searchQuery) && (
|
|
<button
|
|
onClick={() => {
|
|
setSelectedCategory(null)
|
|
setSelectedPriority(null)
|
|
setSearchQuery('')
|
|
}}
|
|
className="px-4 py-2 text-sm text-slate-600 hover:text-slate-900"
|
|
>
|
|
Filter zuruecksetzen
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Backlog Items */}
|
|
<div className="space-y-4">
|
|
{filteredItems.map((item) => {
|
|
const category = categories.find((c) => c.id === item.category)
|
|
const isExpanded = expandedItems.has(item.id)
|
|
const completedSubtasks = item.subtasks?.filter((st) => st.completed).length || 0
|
|
const totalSubtasks = item.subtasks?.length || 0
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
className="bg-white rounded-xl border border-slate-200 overflow-hidden"
|
|
>
|
|
<div
|
|
className="p-4 cursor-pointer hover:bg-slate-50 transition-colors"
|
|
onClick={() => toggleExpand(item.id)}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
{/* Expand Icon */}
|
|
<button className="mt-1 text-slate-400">
|
|
<svg
|
|
className={`w-5 h-5 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<h3 className="font-semibold text-slate-900 truncate">{item.title}</h3>
|
|
<span
|
|
className={`px-2 py-0.5 rounded text-xs font-medium ${
|
|
priorityLabels[item.priority].color
|
|
}`}
|
|
>
|
|
{priorityLabels[item.priority].label}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-slate-500 mb-2">{item.description}</p>
|
|
<div className="flex items-center gap-4 text-xs">
|
|
<span className={`px-2 py-1 rounded border ${category?.color}`}>
|
|
{category?.name}
|
|
</span>
|
|
{totalSubtasks > 0 && (
|
|
<span className="text-slate-500">
|
|
{completedSubtasks}/{totalSubtasks} Teilaufgaben
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status */}
|
|
<select
|
|
value={item.status}
|
|
onChange={(e) => {
|
|
e.stopPropagation()
|
|
updateItemStatus(item.id, e.target.value as BacklogItem['status'])
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium border-0 cursor-pointer ${
|
|
statusLabels[item.status].color
|
|
}`}
|
|
>
|
|
{Object.entries(statusLabels).map(([value, { label }]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Progress Bar for subtasks */}
|
|
{totalSubtasks > 0 && (
|
|
<div className="mt-3 ml-9">
|
|
<div className="w-full bg-slate-200 rounded-full h-1.5">
|
|
<div
|
|
className="bg-green-500 h-1.5 rounded-full transition-all"
|
|
style={{ width: `${(completedSubtasks / totalSubtasks) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Expanded Subtasks */}
|
|
{isExpanded && item.subtasks && item.subtasks.length > 0 && (
|
|
<div className="border-t border-slate-200 bg-slate-50 p-4 pl-14">
|
|
<h4 className="text-sm font-medium text-slate-700 mb-3">Teilaufgaben</h4>
|
|
<ul className="space-y-2">
|
|
{item.subtasks.map((subtask) => (
|
|
<li key={subtask.id} className="flex items-center gap-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={subtask.completed}
|
|
onChange={() => toggleSubtask(item.id, subtask.id)}
|
|
className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
|
|
/>
|
|
<span
|
|
className={`text-sm ${
|
|
subtask.completed ? 'text-slate-400 line-through' : 'text-slate-700'
|
|
}`}
|
|
>
|
|
{subtask.title}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{filteredItems.length === 0 && (
|
|
<div className="text-center py-12 text-slate-500">
|
|
Keine Aufgaben gefunden. Versuche einen anderen Filter.
|
|
</div>
|
|
)}
|
|
|
|
{/* Info Box */}
|
|
<div className="mt-8 bg-amber-50 border border-amber-200 rounded-xl p-6">
|
|
<div className="flex items-start gap-4">
|
|
<svg
|
|
className="w-6 h-6 text-amber-600 flex-shrink-0 mt-0.5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="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"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<h3 className="font-semibold text-amber-900">Wichtiger Hinweis</h3>
|
|
<p className="text-sm text-amber-800 mt-1">
|
|
Diese Backlog-Liste muss vollstaendig abgearbeitet sein, bevor BreakPilot in den
|
|
Produktivbetrieb gehen kann. Alle kritischen Items muessen abgeschlossen sein.
|
|
Der Fortschritt wird lokal im Browser gespeichert.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
)
|
|
}
|