Benjamin Admin
c5c168592b
Per project_sdk_module_attribution_matrix.md the Stufe-3 rollout is
prioritized by audit visibility. This batch covers Schritte 2-9 in one
sweep:
New reusable component:
components/sdk/LicenseModuleBanner.tsx — single-line license banner
placed at the top of an SDK module page. Renders rule pill (R1/R2/R3),
source label, descriptor and link to /sdk/licenses. Replaces the
copy-paste banner blocks I inlined in the earlier modules.
Integration points (per cluster):
Cluster B (DSGVO/EU-Recht, R1):
- vvt: existing "Vorlage" pill upgraded with R1 marker + tooltip
explaining Bundeslaender-DSGVO provenance
- dsfa: inline R1 banner citing DSGVO Art. 35
Cluster C (EU AI Act / CRA, R1):
- ai-act: inline R1 banner citing EU 2024/1689
- cra: inline R1 banner citing EU 2024/2847 + ENISA-Guidance
Cluster D (Mix R2/R3):
- isms: R3 banner + ISO/IEC 27001 reference disclaimer
- security-backlog: R2 banner with OWASP CC-BY-SA attribution
Cluster A (Eigenwerk, R3):
- tom-generator: R1 source (DSGVO Art. 32) + R3 own-work disclaimer
- audit-checklist: R3 banner for own audit methodology
- document-generator: own templates R3 + cited rights R1
Cluster E (Direct controls listing):
- catalog-manager: System/User tag upgraded with rule classification
- iace hazards: pattern_id pill upgraded with R3 + tooltip explaining
BreakPilot Pattern-Engine provenance
The 11-module sweep brings audit transparency to the modules a paying
customer encounters most often. Stufe 3 of the attribution renderer
is now actually visible across the platform — previously it shipped
only the reusable <SourceBadge> component without integration points.
Pre-existing TS errors (drafting-engine constraint-enforcer, dsfa
types tests) untouched — not in scope for this licensing rollout.
80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import { TabId } from './_types'
|
|
import { OverviewTab } from './_components/OverviewTab'
|
|
import { PoliciesTab } from './_components/PoliciesTab'
|
|
import { SoATab } from './_components/SoATab'
|
|
import { ObjectivesTab } from './_components/ObjectivesTab'
|
|
import { AuditsTab } from './_components/AuditsTab'
|
|
import { ReviewsTab } from './_components/ReviewsTab'
|
|
import { AssetsTab } from './_components/AssetsTab'
|
|
import { LicenseModuleBanner } from '@/components/sdk/LicenseModuleBanner'
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
const TABS: { id: TabId; label: string }[] = [
|
|
{ id: 'overview', label: 'Uebersicht' },
|
|
{ id: 'policies', label: 'Policies' },
|
|
{ id: 'soa', label: 'SoA (Annex A)' },
|
|
{ id: 'objectives', label: 'Ziele' },
|
|
{ id: 'audits', label: 'Audits & Findings' },
|
|
{ id: 'reviews', label: 'Management Reviews' },
|
|
{ id: 'assets', label: 'Assets' },
|
|
]
|
|
|
|
export default function ISMSPage() {
|
|
const [tab, setTab] = useState<TabId>('overview')
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">ISMS — ISO 27001 Readiness</h1>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Informationssicherheits-Managementsystem: Scope, Policies, SoA, Audits, CAPA und Management-Reviews
|
|
</p>
|
|
<p className="text-xs text-amber-600 mt-2">
|
|
Hinweis: Basierend auf eigenen Pruefaspekten, kein ISO-Normtext. Ersetzt kein Zertifizierungsaudit.
|
|
</p>
|
|
<div className="mt-3">
|
|
<LicenseModuleBanner
|
|
rule={3}
|
|
sourceLabel="BreakPilot-ISMS-Methodik mit Verweis auf ISO/IEC 27001"
|
|
detail="ISO-Normtexte sind copyright-geschuetzt (R3 — nur Identifier-Verweise). Eigene Pruefaspekte sind BreakPilot-Eigenwerk."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-1 bg-white border rounded-xl p-1 mb-6">
|
|
{TABS.map(t => (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => setTab(t.id)}
|
|
className={`flex-1 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
|
tab === t.id
|
|
? 'bg-purple-600 text-white shadow-sm'
|
|
: 'text-gray-600 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
{tab === 'overview' && <OverviewTab />}
|
|
{tab === 'policies' && <PoliciesTab />}
|
|
{tab === 'soa' && <SoATab />}
|
|
{tab === 'objectives' && <ObjectivesTab />}
|
|
{tab === 'audits' && <AuditsTab />}
|
|
{tab === 'reviews' && <ReviewsTab />}
|
|
{tab === 'assets' && <AssetsTab />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|