00f778ca9b
Remove Compliance SDK category from sidebar navigation as it is now handled exclusively in the Compliance Admin. Add new SDK modules (DSB Portal, Industry Templates, Multi-Tenant, Reporting, SSO) and GCI engine components. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
880 lines
34 KiB
TypeScript
880 lines
34 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Branchenspezifische Module (Phase 3.3)
|
|
*
|
|
* Industry-specific compliance template packages:
|
|
* - Browse industry templates (grid view)
|
|
* - View full detail with VVT, TOM, Risk tabs
|
|
* - Apply template packages to current compliance setup
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
interface IndustrySummary {
|
|
slug: string
|
|
name: string
|
|
description: string
|
|
icon: string
|
|
regulation_count: number
|
|
template_count: number
|
|
}
|
|
|
|
interface IndustryTemplate {
|
|
slug: string
|
|
name: string
|
|
description: string
|
|
icon: string
|
|
regulations: string[]
|
|
vvt_templates: VVTTemplate[]
|
|
tom_recommendations: TOMRecommendation[]
|
|
risk_scenarios: RiskScenario[]
|
|
}
|
|
|
|
interface VVTTemplate {
|
|
name: string
|
|
purpose: string
|
|
legal_basis: string
|
|
data_categories: string[]
|
|
data_subjects: string[]
|
|
retention_period: string
|
|
}
|
|
|
|
interface TOMRecommendation {
|
|
category: string
|
|
name: string
|
|
description: string
|
|
priority: string
|
|
}
|
|
|
|
interface RiskScenario {
|
|
name: string
|
|
description: string
|
|
likelihood: string
|
|
impact: string
|
|
mitigation: string
|
|
}
|
|
|
|
// =============================================================================
|
|
// CONSTANTS
|
|
// =============================================================================
|
|
|
|
type DetailTab = 'vvt' | 'tom' | 'risks'
|
|
|
|
const DETAIL_TABS: { key: DetailTab; label: string }[] = [
|
|
{ key: 'vvt', label: 'VVT-Vorlagen' },
|
|
{ key: 'tom', label: 'TOM-Empfehlungen' },
|
|
{ key: 'risks', label: 'Risiko-Szenarien' },
|
|
]
|
|
|
|
const PRIORITY_COLORS: Record<string, { bg: string; text: string; border: string }> = {
|
|
critical: { bg: 'bg-red-50', text: 'text-red-700', border: 'border-red-200' },
|
|
high: { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200' },
|
|
medium: { bg: 'bg-yellow-50', text: 'text-yellow-700', border: 'border-yellow-200' },
|
|
low: { bg: 'bg-green-50', text: 'text-green-700', border: 'border-green-200' },
|
|
}
|
|
|
|
const PRIORITY_LABELS: Record<string, string> = {
|
|
critical: 'Kritisch',
|
|
high: 'Hoch',
|
|
medium: 'Mittel',
|
|
low: 'Niedrig',
|
|
}
|
|
|
|
const LIKELIHOOD_COLORS: Record<string, string> = {
|
|
low: 'bg-green-500',
|
|
medium: 'bg-yellow-500',
|
|
high: 'bg-orange-500',
|
|
}
|
|
|
|
const IMPACT_COLORS: Record<string, string> = {
|
|
low: 'bg-green-500',
|
|
medium: 'bg-yellow-500',
|
|
high: 'bg-orange-500',
|
|
critical: 'bg-red-600',
|
|
}
|
|
|
|
const TOM_CATEGORY_ICONS: Record<string, string> = {
|
|
'Zutrittskontrolle': '\uD83D\uDEAA',
|
|
'Zugangskontrolle': '\uD83D\uDD10',
|
|
'Zugriffskontrolle': '\uD83D\uDC65',
|
|
'Trennungskontrolle': '\uD83D\uDDC2\uFE0F',
|
|
'Pseudonymisierung': '\uD83C\uDFAD',
|
|
'Verschluesselung': '\uD83D\uDD12',
|
|
'Integritaet': '\u2705',
|
|
'Verfuegbarkeit': '\u2B06\uFE0F',
|
|
'Belastbarkeit': '\uD83D\uDEE1\uFE0F',
|
|
'Wiederherstellung': '\uD83D\uDD04',
|
|
'Datenschutz-Management': '\uD83D\uDCCB',
|
|
'Auftragsverarbeitung': '\uD83D\uDCDD',
|
|
'Incident Response': '\uD83D\uDEA8',
|
|
'Schulung': '\uD83C\uDF93',
|
|
'Netzwerksicherheit': '\uD83C\uDF10',
|
|
'Datensicherung': '\uD83D\uDCBE',
|
|
'Monitoring': '\uD83D\uDCCA',
|
|
'Physische Sicherheit': '\uD83C\uDFE2',
|
|
}
|
|
|
|
// =============================================================================
|
|
// SKELETON COMPONENTS
|
|
// =============================================================================
|
|
|
|
function GridSkeleton() {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="bg-white rounded-xl border border-slate-200 p-6 animate-pulse">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-14 h-14 rounded-xl bg-slate-200" />
|
|
<div className="flex-1 space-y-3">
|
|
<div className="h-5 bg-slate-200 rounded w-2/3" />
|
|
<div className="h-4 bg-slate-100 rounded w-full" />
|
|
<div className="h-4 bg-slate-100 rounded w-4/5" />
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 mt-5">
|
|
<div className="h-6 bg-slate-100 rounded-full w-28" />
|
|
<div className="h-6 bg-slate-100 rounded-full w-24" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DetailSkeleton() {
|
|
return (
|
|
<div className="space-y-6 animate-pulse">
|
|
<div className="bg-white rounded-xl border p-6 space-y-4">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-16 h-16 rounded-xl bg-slate-200" />
|
|
<div className="space-y-2 flex-1">
|
|
<div className="h-6 bg-slate-200 rounded w-1/3" />
|
|
<div className="h-4 bg-slate-100 rounded w-2/3" />
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="h-7 bg-slate-100 rounded-full w-20" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border p-6 space-y-4">
|
|
<div className="flex gap-2 border-b pb-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="h-9 bg-slate-100 rounded-lg w-32" />
|
|
))}
|
|
</div>
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="h-28 bg-slate-50 rounded-lg" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE COMPONENT
|
|
// =============================================================================
|
|
|
|
export default function IndustryTemplatesPage() {
|
|
// ---------------------------------------------------------------------------
|
|
// State
|
|
// ---------------------------------------------------------------------------
|
|
const [industries, setIndustries] = useState<IndustrySummary[]>([])
|
|
const [selectedDetail, setSelectedDetail] = useState<IndustryTemplate | null>(null)
|
|
const [selectedSlug, setSelectedSlug] = useState<string | null>(null)
|
|
const [activeTab, setActiveTab] = useState<DetailTab>('vvt')
|
|
const [loading, setLoading] = useState(true)
|
|
const [detailLoading, setDetailLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [detailError, setDetailError] = useState<string | null>(null)
|
|
const [applying, setApplying] = useState(false)
|
|
const [toastMessage, setToastMessage] = useState<string | null>(null)
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Data fetching
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const loadIndustries = useCallback(async () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/industry/templates')
|
|
if (!res.ok) {
|
|
throw new Error(`HTTP ${res.status}: ${res.statusText}`)
|
|
}
|
|
const data = await res.json()
|
|
setIndustries(Array.isArray(data) ? data : data.industries || data.templates || [])
|
|
} catch (err) {
|
|
console.error('Failed to load industries:', err)
|
|
setError('Branchenvorlagen konnten nicht geladen werden. Bitte pruefen Sie die Verbindung zum Backend.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
const loadDetail = useCallback(async (slug: string) => {
|
|
setDetailLoading(true)
|
|
setDetailError(null)
|
|
setSelectedSlug(slug)
|
|
setActiveTab('vvt')
|
|
try {
|
|
const [detailRes, vvtRes, tomRes, risksRes] = await Promise.all([
|
|
fetch(`/api/sdk/v1/industry/templates/${slug}`),
|
|
fetch(`/api/sdk/v1/industry/templates/${slug}/vvt`),
|
|
fetch(`/api/sdk/v1/industry/templates/${slug}/tom`),
|
|
fetch(`/api/sdk/v1/industry/templates/${slug}/risks`),
|
|
])
|
|
|
|
if (!detailRes.ok) {
|
|
throw new Error(`HTTP ${detailRes.status}: ${detailRes.statusText}`)
|
|
}
|
|
|
|
const detail: IndustryTemplate = await detailRes.json()
|
|
|
|
// Merge sub-resources if the detail endpoint did not include them
|
|
if (vvtRes.ok) {
|
|
const vvtData = await vvtRes.json()
|
|
detail.vvt_templates = vvtData.vvt_templates || vvtData.templates || vvtData || []
|
|
}
|
|
if (tomRes.ok) {
|
|
const tomData = await tomRes.json()
|
|
detail.tom_recommendations = tomData.tom_recommendations || tomData.recommendations || tomData || []
|
|
}
|
|
if (risksRes.ok) {
|
|
const risksData = await risksRes.json()
|
|
detail.risk_scenarios = risksData.risk_scenarios || risksData.scenarios || risksData || []
|
|
}
|
|
|
|
setSelectedDetail(detail)
|
|
} catch (err) {
|
|
console.error('Failed to load industry detail:', err)
|
|
setDetailError('Details konnten nicht geladen werden. Bitte versuchen Sie es erneut.')
|
|
} finally {
|
|
setDetailLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
loadIndustries()
|
|
}, [loadIndustries])
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Handlers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const handleBackToGrid = useCallback(() => {
|
|
setSelectedSlug(null)
|
|
setSelectedDetail(null)
|
|
setDetailError(null)
|
|
}, [])
|
|
|
|
const handleApplyPackage = useCallback(async () => {
|
|
if (!selectedDetail) return
|
|
setApplying(true)
|
|
try {
|
|
// Placeholder: In production this would POST to an import endpoint
|
|
await new Promise((resolve) => setTimeout(resolve, 1500))
|
|
setToastMessage(
|
|
`Branchenpaket "${selectedDetail.name}" wurde erfolgreich angewendet. ` +
|
|
`${selectedDetail.vvt_templates?.length || 0} VVT-Vorlagen, ` +
|
|
`${selectedDetail.tom_recommendations?.length || 0} TOM-Empfehlungen und ` +
|
|
`${selectedDetail.risk_scenarios?.length || 0} Risiko-Szenarien wurden importiert.`
|
|
)
|
|
} catch {
|
|
setToastMessage('Fehler beim Anwenden des Branchenpakets. Bitte versuchen Sie es erneut.')
|
|
} finally {
|
|
setApplying(false)
|
|
}
|
|
}, [selectedDetail])
|
|
|
|
// Auto-dismiss toast
|
|
useEffect(() => {
|
|
if (!toastMessage) return
|
|
const timer = setTimeout(() => setToastMessage(null), 6000)
|
|
return () => clearTimeout(timer)
|
|
}, [toastMessage])
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: Header
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderHeader = () => (
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center text-white text-lg">
|
|
{'\uD83C\uDFED'}
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">Branchenspezifische Module</h1>
|
|
<p className="text-slate-500 mt-0.5">
|
|
Vorkonfigurierte Compliance-Pakete nach Branche
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: Error
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderError = (message: string, onRetry: () => void) => (
|
|
<div className="bg-red-50 border border-red-200 rounded-xl p-5 flex items-start gap-3">
|
|
<svg className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<div className="flex-1">
|
|
<p className="text-red-700 font-medium">Fehler</p>
|
|
<p className="text-red-600 text-sm mt-1">{message}</p>
|
|
</div>
|
|
<button
|
|
onClick={onRetry}
|
|
className="px-4 py-1.5 text-sm font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-lg transition-colors"
|
|
>
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
)
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: Industry Grid
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderGrid = () => (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{industries.map((industry) => (
|
|
<button
|
|
key={industry.slug}
|
|
onClick={() => loadDetail(industry.slug)}
|
|
className="bg-white rounded-xl border border-slate-200 p-6 text-left hover:border-emerald-300 hover:shadow-md transition-all duration-200 group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 flex items-center justify-center text-3xl flex-shrink-0 group-hover:from-emerald-100 group-hover:to-teal-100 transition-colors">
|
|
{industry.icon}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-lg font-semibold text-slate-900 group-hover:text-emerald-700 transition-colors">
|
|
{industry.name}
|
|
</h3>
|
|
<p className="text-sm text-slate-500 mt-1 line-clamp-2">
|
|
{industry.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 mt-4">
|
|
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">
|
|
<svg className="w-3.5 h-3.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>
|
|
{industry.regulation_count} Regulierungen
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-teal-50 text-teal-700 border border-teal-100">
|
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
{industry.template_count} Vorlagen
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: Detail View - Header
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderDetailHeader = () => {
|
|
if (!selectedDetail) return null
|
|
return (
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<button
|
|
onClick={handleBackToGrid}
|
|
className="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-emerald-600 transition-colors mb-4"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Zurueck zur Uebersicht
|
|
</button>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-16 h-16 rounded-xl bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 flex items-center justify-center text-4xl flex-shrink-0">
|
|
{selectedDetail.icon}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h2 className="text-xl font-bold text-slate-900">{selectedDetail.name}</h2>
|
|
<p className="text-slate-500 mt-1">{selectedDetail.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Regulation Badges */}
|
|
{selectedDetail.regulations && selectedDetail.regulations.length > 0 && (
|
|
<div className="mt-4">
|
|
<p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-2">
|
|
Relevante Regulierungen
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedDetail.regulations.map((reg) => (
|
|
<span
|
|
key={reg}
|
|
className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200"
|
|
>
|
|
{reg}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Summary stats */}
|
|
<div className="grid grid-cols-3 gap-4 mt-5 pt-5 border-t border-slate-100">
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-emerald-600">
|
|
{selectedDetail.vvt_templates?.length || 0}
|
|
</p>
|
|
<p className="text-xs text-slate-500 mt-0.5">VVT-Vorlagen</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-teal-600">
|
|
{selectedDetail.tom_recommendations?.length || 0}
|
|
</p>
|
|
<p className="text-xs text-slate-500 mt-0.5">TOM-Empfehlungen</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-amber-600">
|
|
{selectedDetail.risk_scenarios?.length || 0}
|
|
</p>
|
|
<p className="text-xs text-slate-500 mt-0.5">Risiko-Szenarien</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: VVT Tab
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderVVTTab = () => {
|
|
const templates = selectedDetail?.vvt_templates || []
|
|
if (templates.length === 0) {
|
|
return (
|
|
<div className="text-center py-12 text-slate-400">
|
|
<p className="text-lg">Keine VVT-Vorlagen verfuegbar</p>
|
|
<p className="text-sm mt-1">Fuer diese Branche wurden noch keine Verarbeitungsvorlagen definiert.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{templates.map((vvt, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="bg-white border border-slate-200 rounded-lg p-5 hover:border-emerald-200 transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-slate-900">{vvt.name}</h4>
|
|
<p className="text-sm text-slate-500 mt-1">{vvt.purpose}</p>
|
|
</div>
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-600 flex-shrink-0">
|
|
{vvt.retention_period}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-3 pt-3 border-t border-slate-100">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{/* Legal Basis */}
|
|
<div>
|
|
<p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Rechtsgrundlage</p>
|
|
<p className="text-sm text-slate-700">{vvt.legal_basis}</p>
|
|
</div>
|
|
|
|
{/* Retention Period (mobile only, since shown in badge on desktop) */}
|
|
<div className="sm:hidden">
|
|
<p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Aufbewahrungsfrist</p>
|
|
<p className="text-sm text-slate-700">{vvt.retention_period}</p>
|
|
</div>
|
|
|
|
{/* Data Categories */}
|
|
<div>
|
|
<p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1.5">Datenkategorien</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{vvt.data_categories.map((cat) => (
|
|
<span
|
|
key={cat}
|
|
className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-emerald-50 text-emerald-700 border border-emerald-100"
|
|
>
|
|
{cat}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Subjects */}
|
|
<div>
|
|
<p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1.5">Betroffene</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{vvt.data_subjects.map((sub) => (
|
|
<span
|
|
key={sub}
|
|
className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-teal-50 text-teal-700 border border-teal-100"
|
|
>
|
|
{sub}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: TOM Tab
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderTOMTab = () => {
|
|
const recommendations = selectedDetail?.tom_recommendations || []
|
|
if (recommendations.length === 0) {
|
|
return (
|
|
<div className="text-center py-12 text-slate-400">
|
|
<p className="text-lg">Keine TOM-Empfehlungen verfuegbar</p>
|
|
<p className="text-sm mt-1">Fuer diese Branche wurden noch keine technisch-organisatorischen Massnahmen definiert.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Group by category
|
|
const grouped: Record<string, TOMRecommendation[]> = {}
|
|
recommendations.forEach((tom) => {
|
|
if (!grouped[tom.category]) {
|
|
grouped[tom.category] = []
|
|
}
|
|
grouped[tom.category].push(tom)
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{Object.entries(grouped).map(([category, items]) => {
|
|
const icon = TOM_CATEGORY_ICONS[category] || '\uD83D\uDD27'
|
|
return (
|
|
<div key={category}>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<span className="text-lg">{icon}</span>
|
|
<h4 className="font-semibold text-slate-800">{category}</h4>
|
|
<span className="text-xs text-slate-400 ml-1">({items.length})</span>
|
|
</div>
|
|
<div className="space-y-3 ml-7">
|
|
{items.map((tom, idx) => {
|
|
const prio = PRIORITY_COLORS[tom.priority] || PRIORITY_COLORS.medium
|
|
const prioLabel = PRIORITY_LABELS[tom.priority] || tom.priority
|
|
return (
|
|
<div
|
|
key={idx}
|
|
className="bg-white border border-slate-200 rounded-lg p-4 hover:border-emerald-200 transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex-1">
|
|
<h5 className="font-medium text-slate-900">{tom.name}</h5>
|
|
<p className="text-sm text-slate-500 mt-1">{tom.description}</p>
|
|
</div>
|
|
<span
|
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border flex-shrink-0 ${prio.bg} ${prio.text} ${prio.border}`}
|
|
>
|
|
{prioLabel}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: Risk Tab
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderRiskTab = () => {
|
|
const scenarios = selectedDetail?.risk_scenarios || []
|
|
if (scenarios.length === 0) {
|
|
return (
|
|
<div className="text-center py-12 text-slate-400">
|
|
<p className="text-lg">Keine Risiko-Szenarien verfuegbar</p>
|
|
<p className="text-sm mt-1">Fuer diese Branche wurden noch keine Risiko-Szenarien definiert.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{scenarios.map((risk, idx) => {
|
|
const likelihoodColor = LIKELIHOOD_COLORS[risk.likelihood] || 'bg-slate-400'
|
|
const impactColor = IMPACT_COLORS[risk.impact] || 'bg-slate-400'
|
|
const likelihoodLabel = PRIORITY_LABELS[risk.likelihood] || risk.likelihood
|
|
const impactLabel = PRIORITY_LABELS[risk.impact] || risk.impact
|
|
|
|
return (
|
|
<div
|
|
key={idx}
|
|
className="bg-white border border-slate-200 rounded-lg p-5 hover:border-emerald-200 transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<h4 className="font-semibold text-slate-900">{risk.name}</h4>
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
{/* Likelihood badge */}
|
|
<div className="flex items-center gap-1.5">
|
|
<span className={`w-2.5 h-2.5 rounded-full ${likelihoodColor}`} />
|
|
<span className="text-xs text-slate-500">
|
|
Wahrsch.: <span className="font-medium text-slate-700">{likelihoodLabel}</span>
|
|
</span>
|
|
</div>
|
|
<span className="text-slate-300">|</span>
|
|
{/* Impact badge */}
|
|
<div className="flex items-center gap-1.5">
|
|
<span className={`w-2.5 h-2.5 rounded-full ${impactColor}`} />
|
|
<span className="text-xs text-slate-500">
|
|
Auswirkung: <span className="font-medium text-slate-700">{impactLabel}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-sm text-slate-500 mt-2">{risk.description}</p>
|
|
|
|
{/* Mitigation */}
|
|
<div className="mt-3 pt-3 border-t border-slate-100">
|
|
<div className="flex items-start gap-2">
|
|
<svg className="w-4 h-4 text-emerald-500 flex-shrink-0 mt-0.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>
|
|
<div>
|
|
<p className="text-xs font-medium text-slate-400 uppercase tracking-wider">Massnahme</p>
|
|
<p className="text-sm text-slate-700 mt-0.5">{risk.mitigation}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: Detail Tabs + Content
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderDetailContent = () => {
|
|
if (!selectedDetail) return null
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
{/* Tab Navigation */}
|
|
<div className="flex border-b border-slate-200 bg-slate-50">
|
|
{DETAIL_TABS.map((tab) => {
|
|
const isActive = activeTab === tab.key
|
|
let count = 0
|
|
if (tab.key === 'vvt') count = selectedDetail.vvt_templates?.length || 0
|
|
if (tab.key === 'tom') count = selectedDetail.tom_recommendations?.length || 0
|
|
if (tab.key === 'risks') count = selectedDetail.risk_scenarios?.length || 0
|
|
|
|
return (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
className={`flex-1 px-4 py-3 text-sm font-medium transition-colors relative ${
|
|
isActive
|
|
? 'text-emerald-700 bg-white border-b-2 border-emerald-500'
|
|
: 'text-slate-500 hover:text-slate-700 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
{count > 0 && (
|
|
<span
|
|
className={`ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs ${
|
|
isActive
|
|
? 'bg-emerald-100 text-emerald-700'
|
|
: 'bg-slate-200 text-slate-500'
|
|
}`}
|
|
>
|
|
{count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
<div className="p-6">
|
|
{activeTab === 'vvt' && renderVVTTab()}
|
|
{activeTab === 'tom' && renderTOMTab()}
|
|
{activeTab === 'risks' && renderRiskTab()}
|
|
</div>
|
|
|
|
{/* Apply Button */}
|
|
<div className="px-6 py-4 border-t border-slate-200 bg-slate-50">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-slate-500">
|
|
Importiert alle Vorlagen, Empfehlungen und Szenarien in Ihr System.
|
|
</p>
|
|
<button
|
|
onClick={handleApplyPackage}
|
|
disabled={applying}
|
|
className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-semibold text-white transition-all ${
|
|
applying
|
|
? 'bg-emerald-400 cursor-not-allowed'
|
|
: 'bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 shadow-sm hover:shadow-md'
|
|
}`}
|
|
>
|
|
{applying ? (
|
|
<>
|
|
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
Wird angewendet...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
Branchenpaket anwenden
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: Toast
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderToast = () => {
|
|
if (!toastMessage) return null
|
|
return (
|
|
<div className="fixed bottom-6 right-6 z-50 max-w-md animate-slide-up">
|
|
<div className="bg-slate-900 text-white rounded-xl shadow-2xl px-5 py-4 flex items-start gap-3">
|
|
<svg className="w-5 h-5 text-emerald-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<p className="text-sm leading-relaxed">{toastMessage}</p>
|
|
<button
|
|
onClick={() => setToastMessage(null)}
|
|
className="text-slate-400 hover:text-white flex-shrink-0 ml-2"
|
|
>
|
|
<svg className="w-4 h-4" 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>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render: Empty state
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const renderEmptyState = () => (
|
|
<div className="bg-white rounded-xl border border-slate-200 p-12 text-center">
|
|
<div className="w-16 h-16 rounded-2xl bg-emerald-50 flex items-center justify-center text-3xl mx-auto mb-4">
|
|
{'\uD83C\uDFED'}
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-slate-900">Keine Branchenvorlagen verfuegbar</h3>
|
|
<p className="text-slate-500 mt-2 max-w-md mx-auto">
|
|
Es sind derzeit keine branchenspezifischen Compliance-Pakete im System hinterlegt.
|
|
Bitte kontaktieren Sie den Administrator oder versuchen Sie es spaeter erneut.
|
|
</p>
|
|
<button
|
|
onClick={loadIndustries}
|
|
className="mt-4 px-4 py-2 text-sm font-medium text-emerald-700 bg-emerald-50 hover:bg-emerald-100 rounded-lg transition-colors"
|
|
>
|
|
Erneut laden
|
|
</button>
|
|
</div>
|
|
)
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main Render
|
|
// ---------------------------------------------------------------------------
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Inline keyframe for toast animation */}
|
|
<style>{`
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-slide-up {
|
|
animation: slide-up 0.3s ease-out;
|
|
}
|
|
`}</style>
|
|
|
|
{renderHeader()}
|
|
|
|
{/* Error state */}
|
|
{error && renderError(error, loadIndustries)}
|
|
|
|
{/* Main Content */}
|
|
{loading ? (
|
|
selectedSlug ? <DetailSkeleton /> : <GridSkeleton />
|
|
) : selectedSlug ? (
|
|
// Detail View
|
|
<div className="space-y-6">
|
|
{detailLoading ? (
|
|
<DetailSkeleton />
|
|
) : detailError ? (
|
|
<>
|
|
<button
|
|
onClick={handleBackToGrid}
|
|
className="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-emerald-600 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Zurueck zur Uebersicht
|
|
</button>
|
|
{renderError(detailError, () => loadDetail(selectedSlug))}
|
|
</>
|
|
) : (
|
|
<>
|
|
{renderDetailHeader()}
|
|
{renderDetailContent()}
|
|
</>
|
|
)}
|
|
</div>
|
|
) : industries.length === 0 && !error ? (
|
|
renderEmptyState()
|
|
) : (
|
|
renderGrid()
|
|
)}
|
|
|
|
{/* Toast notification */}
|
|
{renderToast()}
|
|
</div>
|
|
)
|
|
}
|