b4613e26f3
backend-lehrer (10 files): - game/database.py (785 → 5), correction_api.py (683 → 4) - classroom_engine/antizipation.py (676 → 5) - llm_gateway schools/edu_search already done in prior batch klausur-service (12 files): - orientation_crop_api.py (694 → 5), pdf_export.py (677 → 4) - zeugnis_crawler.py (676 → 5), grid_editor_api.py (671 → 5) - eh_templates.py (658 → 5), mail/api.py (651 → 5) - qdrant_service.py (638 → 5), training_api.py (625 → 4) website (6 pages): - middleware (696 → 8), mail (733 → 6), consent (628 → 8) - compliance/risks (622 → 5), export (502 → 5), brandbook (629 → 7) studio-v2 (3 components): - B2BMigrationWizard (848 → 3), CleanupPanel (765 → 2) - dashboard-experimental (739 → 2) admin-lehrer (4 files): - uebersetzungen (769 → 4), manager (670 → 2) - ChunkBrowserQA (675 → 6), dsfa/page (674 → 5) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
99 lines
3.5 KiB
TypeScript
99 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import type { Risk } from './types'
|
|
import { RISK_COLORS, RISK_BG_COLORS, calculateRiskLevel } from './types'
|
|
|
|
interface RiskMatrixProps {
|
|
risks: Risk[]
|
|
onEditRisk: (risk: Risk) => void
|
|
}
|
|
|
|
export default function RiskMatrix({ risks, onEditRisk }: RiskMatrixProps) {
|
|
const matrix: Record<number, Record<number, Risk[]>> = {}
|
|
for (let l = 1; l <= 5; l++) {
|
|
matrix[l] = {}
|
|
for (let i = 1; i <= 5; i++) {
|
|
matrix[l][i] = []
|
|
}
|
|
}
|
|
risks.forEach((risk) => {
|
|
if (matrix[risk.likelihood] && matrix[risk.likelihood][risk.impact]) {
|
|
matrix[risk.likelihood][risk.impact].push(risk)
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Risk Matrix (Likelihood x Impact)</h3>
|
|
|
|
<div className="overflow-x-auto">
|
|
<div className="inline-block">
|
|
{/* Column headers (Impact) */}
|
|
<div className="flex ml-16">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<div key={i} className="w-24 text-center text-sm font-medium text-slate-500 pb-2">
|
|
Impact {i}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Matrix rows */}
|
|
{[5, 4, 3, 2, 1].map((likelihood) => (
|
|
<div key={likelihood} className="flex items-center">
|
|
<div className="w-16 text-sm font-medium text-slate-500 text-right pr-2">
|
|
L{likelihood}
|
|
</div>
|
|
{[1, 2, 3, 4, 5].map((impact) => {
|
|
const level = calculateRiskLevel(likelihood, impact)
|
|
const cellRisks = matrix[likelihood][impact]
|
|
|
|
return (
|
|
<div
|
|
key={impact}
|
|
className={`w-24 h-20 border m-0.5 rounded flex flex-col items-center justify-center ${RISK_BG_COLORS[level]}`}
|
|
>
|
|
{cellRisks.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 justify-center">
|
|
{cellRisks.map((r) => (
|
|
<button
|
|
key={r.id}
|
|
onClick={() => onEditRisk(r)}
|
|
className={`px-2 py-0.5 text-xs font-medium rounded text-white ${RISK_COLORS[r.inherent_risk] || 'bg-slate-500'} hover:opacity-80`}
|
|
title={r.title}
|
|
>
|
|
{r.risk_id}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="flex gap-4 mt-6 pt-4 border-t">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-green-500 rounded" />
|
|
<span className="text-sm text-slate-600">Low (1-5)</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-yellow-500 rounded" />
|
|
<span className="text-sm text-slate-600">Medium (6-11)</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-orange-500 rounded" />
|
|
<span className="text-sm text-slate-600">High (12-19)</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-red-500 rounded" />
|
|
<span className="text-sm text-slate-600">Critical (20-25)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|