'use client'; import { SERVICE_TYPE_CONFIG, CRITICALITY_CONFIG } from './_components/types'; import { useModulesPage } from './_components/useModulesPage'; import ModuleDetailPanel from './_components/ModuleDetailPanel'; export default function ModulesPage() { const mp = useModulesPage(); return (
{/* Header */}

Service Module Registry

Alle {mp.overview?.total_modules || 0} Breakpilot-Services mit Regulation-Mappings

{/* Overview Stats */} {mp.overview && (
{mp.overview.total_modules}
Services
{mp.overview.modules_by_criticality?.critical || 0}
Critical
{mp.overview.modules_processing_pii}
PII-Processing
{mp.overview.modules_with_ai}
AI-Komponenten
{Object.keys(mp.overview.regulations_coverage || {}).length}
Regulations
{mp.overview.average_compliance_score !== null ? `${mp.overview.average_compliance_score}%` : 'N/A'}
Avg. Score
)} {/* Filters */}
mp.setSearchTerm(e.target.value)} className="border rounded px-3 py-2 text-sm w-full" />
{mp.error && (
{mp.error}
)} {mp.loading && (
Lade Module...
)} {/* Main Content */} {!mp.loading && (
{Object.entries(mp.modulesByType).map(([type, typeModules]) => (
{SERVICE_TYPE_CONFIG[type]?.icon || '📁'} {type.charAt(0).toUpperCase() + type.slice(1)} ({typeModules.length})
{typeModules.map((mod) => (
mp.fetchModuleDetail(mod.name)} className={`p-4 cursor-pointer hover:bg-gray-50 transition ${mp.selectedModule?.id === mod.id ? 'bg-blue-50' : ''}`}>
{mod.display_name}{mod.port && (:{mod.port})}
{mod.name}
{mod.description && (
{mod.description}
)}
{mod.technology_stack.slice(0, 4).map((tech, i) => ({tech}))} {mod.technology_stack.length > 4 && (+{mod.technology_stack.length - 4})}
{mod.criticality}
{mod.processes_pii && (PII)} {mod.ai_components && (AI)}
{mod.regulation_count} Regulations
))}
))} {mp.filteredModules.length === 0 && !mp.loading && (
Keine Module gefunden.
)}
{mp.selectedModule && ( mp.setSelectedModule(null)} onAssessRisk={mp.assessModuleRisk} onCloseRisk={() => mp.setShowRiskPanel(false)} /> )}
)} {/* Regulations Coverage */} {mp.overview && mp.overview.regulations_coverage && Object.keys(mp.overview.regulations_coverage).length > 0 && (

Regulation Coverage

{Object.entries(mp.overview.regulations_coverage).sort(([, a], [, b]) => b - a).map(([code, count]) => (
{count}
{code}
))}
)}
); }