ddcd89f26d
Split 1260-LOC client page into _types.ts and six tab components under _components/ (Overview, Policies, SoA, Objectives, Audits, Reviews) plus a shared helpers module. Behavior preserved exactly; page.tsx is now a thin wiring shell. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
66 lines
2.3 KiB
TypeScript
66 lines
2.3 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'
|
|
|
|
// =============================================================================
|
|
// 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' },
|
|
]
|
|
|
|
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</h1>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Informationssicherheits-Managementsystem: Scope, Policies, SoA, Audits, CAPA und Management-Reviews
|
|
</p>
|
|
</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 />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|