refactor(admin): split evidence, import, portfolio pages
Extract components and hooks from oversized pages into colocated _components/ and _hooks/ subdirectories to enforce the 500-LOC hard cap. page.tsx files reduced to 205, 121, and 136 LOC respectively. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
167
admin-compliance/app/sdk/risks/_components/RiskForm.tsx
Normal file
167
admin-compliance/app/sdk/risks/_components/RiskForm.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { RiskLikelihood, RiskImpact, calculateRiskScore, getRiskSeverityFromScore } from '@/lib/sdk'
|
||||
|
||||
export interface RiskFormData {
|
||||
title: string
|
||||
description: string
|
||||
category: string
|
||||
likelihood: RiskLikelihood
|
||||
impact: RiskImpact
|
||||
}
|
||||
|
||||
export function RiskForm({
|
||||
onSubmit,
|
||||
onCancel,
|
||||
initialData,
|
||||
}: {
|
||||
onSubmit: (data: RiskFormData) => void
|
||||
onCancel: () => void
|
||||
initialData?: Partial<RiskFormData>
|
||||
}) {
|
||||
const [formData, setFormData] = useState<RiskFormData>({
|
||||
title: initialData?.title || '',
|
||||
description: initialData?.description || '',
|
||||
category: initialData?.category || 'technical',
|
||||
likelihood: initialData?.likelihood || 3,
|
||||
impact: initialData?.impact || 3,
|
||||
})
|
||||
|
||||
const score = calculateRiskScore(formData.likelihood, formData.impact)
|
||||
const severity = getRiskSeverityFromScore(score)
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
{initialData ? 'Risiko bearbeiten' : 'Neues Risiko'}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.title}
|
||||
onChange={e => setFormData({ ...formData, title: e.target.value })}
|
||||
placeholder="z.B. Datenverlust durch Systemausfall"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={e => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="Beschreiben Sie das Risiko..."
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
|
||||
<select
|
||||
value={formData.category}
|
||||
onChange={e => setFormData({ ...formData, category: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
>
|
||||
<option value="technical">Technisch</option>
|
||||
<option value="organizational">Organisatorisch</option>
|
||||
<option value="legal">Rechtlich</option>
|
||||
<option value="operational">Operativ</option>
|
||||
<option value="strategic">Strategisch</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Wahrscheinlichkeit (1-5)
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={5}
|
||||
value={formData.likelihood}
|
||||
onChange={e => setFormData({ ...formData, likelihood: Number(e.target.value) as RiskLikelihood })}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||
<span>Sehr unwahrscheinlich</span>
|
||||
<span className="font-bold">{formData.likelihood}</span>
|
||||
<span>Sehr wahrscheinlich</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Auswirkung (1-5)</label>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={5}
|
||||
value={formData.impact}
|
||||
onChange={e => setFormData({ ...formData, impact: Number(e.target.value) as RiskImpact })}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||
<span>Gering</span>
|
||||
<span className="font-bold">{formData.impact}</span>
|
||||
<span>Katastrophal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`p-4 rounded-lg ${
|
||||
severity === 'CRITICAL'
|
||||
? 'bg-red-50 border border-red-200'
|
||||
: severity === 'HIGH'
|
||||
? 'bg-orange-50 border border-orange-200'
|
||||
: severity === 'MEDIUM'
|
||||
? 'bg-yellow-50 border border-yellow-200'
|
||||
: 'bg-green-50 border border-green-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Berechneter Risikoscore:</span>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-sm font-bold ${
|
||||
severity === 'CRITICAL'
|
||||
? 'bg-red-100 text-red-700'
|
||||
: severity === 'HIGH'
|
||||
? 'bg-orange-100 text-orange-700'
|
||||
: severity === 'MEDIUM'
|
||||
? 'bg-yellow-100 text-yellow-700'
|
||||
: 'bg-green-100 text-green-700'
|
||||
}`}
|
||||
>
|
||||
{score} ({severity})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center justify-end gap-3">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSubmit(formData)}
|
||||
disabled={!formData.title}
|
||||
className={`px-6 py-2 rounded-lg font-medium transition-colors ${
|
||||
formData.title
|
||||
? 'bg-purple-600 text-white hover:bg-purple-700'
|
||||
: 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user