Initial commit: breakpilot-compliance - Compliance SDK Platform
Services: Admin-Compliance, Backend-Compliance, AI-Compliance-SDK, Consent-SDK, Developer-Portal, PCA-Platform, DSMS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Boenisch
@@ -0,0 +1,193 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import type { Risk, RiskLikelihood, RiskImpact } from '@breakpilot/compliance-sdk-types'
|
||||
|
||||
export interface RiskMatrixProps {
|
||||
risks: Risk[]
|
||||
onRiskClick?: (risk: Risk) => void
|
||||
className?: string
|
||||
style?: React.CSSProperties
|
||||
}
|
||||
|
||||
export function RiskMatrix({ risks, onRiskClick, className, style }: RiskMatrixProps) {
|
||||
const getColor = (likelihood: number, impact: number): string => {
|
||||
const score = likelihood * impact
|
||||
if (score >= 20) return '#dc2626' // Critical - Red
|
||||
if (score >= 12) return '#f97316' // High - Orange
|
||||
if (score >= 6) return '#f59e0b' // Medium - Yellow
|
||||
return '#16a34a' // Low - Green
|
||||
}
|
||||
|
||||
const getCellRisks = (likelihood: RiskLikelihood, impact: RiskImpact): Risk[] => {
|
||||
return risks.filter(r => r.likelihood === likelihood && r.impact === impact)
|
||||
}
|
||||
|
||||
const containerStyle: React.CSSProperties = {
|
||||
fontFamily: 'system-ui, -apple-system, sans-serif',
|
||||
...style,
|
||||
}
|
||||
|
||||
const gridStyle: React.CSSProperties = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '60px repeat(5, 1fr)',
|
||||
gridTemplateRows: '30px repeat(5, 60px)',
|
||||
gap: '2px',
|
||||
backgroundColor: '#e5e5e5',
|
||||
padding: '2px',
|
||||
borderRadius: '8px',
|
||||
}
|
||||
|
||||
const cellStyle: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#fff',
|
||||
position: 'relative',
|
||||
}
|
||||
|
||||
const headerStyle: React.CSSProperties = {
|
||||
...cellStyle,
|
||||
fontWeight: 600,
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
}
|
||||
|
||||
const likelihoodLabels = ['Sehr niedrig', 'Niedrig', 'Mittel', 'Hoch', 'Sehr hoch']
|
||||
const impactLabels = ['1', '2', '3', '4', '5']
|
||||
|
||||
return (
|
||||
<div style={containerStyle} className={className}>
|
||||
<div style={{ display: 'flex', marginBottom: '10px' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<span style={{ fontWeight: 600 }}>Risikomatrix</span>
|
||||
<span style={{ marginLeft: '15px', color: '#666', fontSize: '14px' }}>
|
||||
{risks.length} Risiken
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '10px', fontSize: '12px' }}>
|
||||
<span>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
backgroundColor: '#16a34a',
|
||||
borderRadius: '2px',
|
||||
marginRight: '4px',
|
||||
}}
|
||||
/>
|
||||
Niedrig
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
backgroundColor: '#f59e0b',
|
||||
borderRadius: '2px',
|
||||
marginRight: '4px',
|
||||
}}
|
||||
/>
|
||||
Mittel
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
backgroundColor: '#f97316',
|
||||
borderRadius: '2px',
|
||||
marginRight: '4px',
|
||||
}}
|
||||
/>
|
||||
Hoch
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
backgroundColor: '#dc2626',
|
||||
borderRadius: '2px',
|
||||
marginRight: '4px',
|
||||
}}
|
||||
/>
|
||||
Kritisch
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={gridStyle}>
|
||||
{/* Header row */}
|
||||
<div style={headerStyle} />
|
||||
{impactLabels.map((label, i) => (
|
||||
<div key={`impact-${i}`} style={headerStyle}>
|
||||
Auswirkung {label}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Data rows (reversed so high likelihood is at top) */}
|
||||
{[5, 4, 3, 2, 1].map(likelihood => (
|
||||
<React.Fragment key={`row-${likelihood}`}>
|
||||
<div style={headerStyle}>{likelihoodLabels[likelihood - 1]}</div>
|
||||
{[1, 2, 3, 4, 5].map(impact => {
|
||||
const cellRisks = getCellRisks(likelihood as RiskLikelihood, impact as RiskImpact)
|
||||
return (
|
||||
<div
|
||||
key={`cell-${likelihood}-${impact}`}
|
||||
style={{
|
||||
...cellStyle,
|
||||
backgroundColor: getColor(likelihood, impact),
|
||||
opacity: cellRisks.length > 0 ? 1 : 0.3,
|
||||
cursor: cellRisks.length > 0 ? 'pointer' : 'default',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (cellRisks.length > 0 && onRiskClick) {
|
||||
onRiskClick(cellRisks[0])
|
||||
}
|
||||
}}
|
||||
>
|
||||
{cellRisks.length > 0 && (
|
||||
<div
|
||||
style={{
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontWeight: 600,
|
||||
fontSize: '12px',
|
||||
color: '#1a1a1a',
|
||||
}}
|
||||
>
|
||||
{cellRisks.length}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: '10px',
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
<span>Wahrscheinlichkeit →</span>
|
||||
<span>Auswirkung →</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user