feat(dsfa): Add complete 8-section DSFA module with sidebar navigation
Implement DSFA optimization plan based on DSK Kurzpapier Nr. 5: - Section 0: ThresholdAnalysisSection (WP248, Art. 35 Abs. 3, KI-Trigger) - Section 5: StakeholderConsultationSection (Art. 35 Abs. 9) - Section 6: Art36Warning for authority consultation (Art. 36) - Section 7: ReviewScheduleSection (Art. 35 Abs. 11) - DSFASidebar with progress tracking for all 8 sections - Extended DSFASectionProgress for sections 0, 6, 7 Replaces tab navigation with sidebar layout (1/4 + 3/4 grid). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
BreakPilot Dev
@@ -21,8 +21,17 @@ import {
|
||||
removeDSFARisk,
|
||||
addDSFAMitigation,
|
||||
updateDSFAMitigationStatus,
|
||||
updateDSFA,
|
||||
} from '@/lib/sdk/dsfa/api'
|
||||
import { RiskMatrix, ApprovalPanel } from '@/components/sdk/dsfa'
|
||||
import {
|
||||
RiskMatrix,
|
||||
ApprovalPanel,
|
||||
DSFASidebar,
|
||||
ThresholdAnalysisSection,
|
||||
StakeholderConsultationSection,
|
||||
Art36Warning,
|
||||
ReviewScheduleSection,
|
||||
} from '@/components/sdk/dsfa'
|
||||
|
||||
// =============================================================================
|
||||
// SECTION EDITORS
|
||||
@@ -1013,7 +1022,7 @@ export default function DSFAEditorPage() {
|
||||
const [dsfa, setDSFA] = useState<DSFA | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [activeSection, setActiveSection] = useState(1)
|
||||
const [activeSection, setActiveSection] = useState(0) // Start at Section 0: Threshold Analysis
|
||||
const [saveMessage, setSaveMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
|
||||
|
||||
// Load DSFA data
|
||||
@@ -1111,6 +1120,26 @@ export default function DSFAEditorPage() {
|
||||
needs_update: 'bg-orange-100 text-orange-700',
|
||||
}
|
||||
|
||||
// Handler for generic DSFA updates (used by new section components)
|
||||
const handleGenericUpdate = useCallback(async (data: Record<string, unknown>) => {
|
||||
if (!dsfa) return
|
||||
|
||||
setIsSaving(true)
|
||||
setSaveMessage(null)
|
||||
|
||||
try {
|
||||
const updated = await updateDSFA(dsfaId, data as Partial<DSFA>)
|
||||
setDSFA(updated)
|
||||
setSaveMessage({ type: 'success', text: 'Abschnitt gespeichert' })
|
||||
setTimeout(() => setSaveMessage(null), 3000)
|
||||
} catch (error) {
|
||||
console.error('Failed to update DSFA:', error)
|
||||
setSaveMessage({ type: 'error', text: 'Fehler beim Speichern' })
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}, [dsfa, dsfaId])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
@@ -1162,64 +1191,24 @@ export default function DSFAEditorPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Main Content: 2/3 + 1/3 Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - 2/3 */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Section Tabs */}
|
||||
{/* Main Content: Sidebar + Content Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
{/* Left Column - Sidebar (1/4) */}
|
||||
<div className="lg:col-span-1">
|
||||
<DSFASidebar
|
||||
dsfa={dsfa}
|
||||
activeSection={activeSection}
|
||||
onSectionChange={setActiveSection}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Content (3/4) */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
{/* Section Content Card */}
|
||||
<div className="bg-white rounded-xl border border-gray-200">
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="flex -mb-px overflow-x-auto">
|
||||
{DSFA_SECTIONS.map((section) => {
|
||||
const progress = dsfa.section_progress
|
||||
const isComplete = section.number === 1 ? progress.section_1_complete :
|
||||
section.number === 2 ? progress.section_2_complete :
|
||||
section.number === 3 ? progress.section_3_complete :
|
||||
section.number === 4 ? progress.section_4_complete :
|
||||
progress.section_5_complete
|
||||
|
||||
return (
|
||||
<button
|
||||
key={section.number}
|
||||
onClick={() => setActiveSection(section.number)}
|
||||
className={`
|
||||
flex items-center gap-2 px-4 py-4 text-sm font-medium border-b-2 transition-colors whitespace-nowrap
|
||||
${activeSection === section.number
|
||||
? 'border-purple-600 text-purple-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<span className={`
|
||||
w-6 h-6 rounded-full flex items-center justify-center text-xs
|
||||
${isComplete
|
||||
? 'bg-green-100 text-green-600'
|
||||
: activeSection === section.number
|
||||
? 'bg-purple-100 text-purple-600'
|
||||
: 'bg-gray-100 text-gray-500'
|
||||
}
|
||||
`}>
|
||||
{isComplete ? (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
section.number
|
||||
)}
|
||||
</span>
|
||||
{section.titleDE}
|
||||
{!section.required && (
|
||||
<span className="text-xs text-gray-400">(optional)</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Section Header */}
|
||||
{sectionConfig && (
|
||||
<div className="p-4 bg-gray-50 border-b border-gray-200">
|
||||
<div className="p-4 bg-gray-50 border-b border-gray-200 rounded-t-xl">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
@@ -1236,6 +1225,16 @@ export default function DSFAEditorPage() {
|
||||
|
||||
{/* Section Content */}
|
||||
<div className="p-6">
|
||||
{/* Section 0: Threshold Analysis (NEW) */}
|
||||
{activeSection === 0 && (
|
||||
<ThresholdAnalysisSection
|
||||
dsfa={dsfa}
|
||||
onUpdate={handleGenericUpdate}
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sections 1-4: Existing */}
|
||||
{activeSection === 1 && (
|
||||
<Section1Editor
|
||||
dsfa={dsfa}
|
||||
@@ -1264,72 +1263,100 @@ export default function DSFAEditorPage() {
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Section 5: Stakeholder Consultation (NEW) */}
|
||||
{activeSection === 5 && (
|
||||
<Section5Editor
|
||||
<StakeholderConsultationSection
|
||||
dsfa={dsfa}
|
||||
onUpdate={(data) => handleSectionUpdate(5, data)}
|
||||
onUpdate={handleGenericUpdate}
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Section 6: DPO & Authority Consultation */}
|
||||
{activeSection === 6 && (
|
||||
<div className="space-y-6">
|
||||
{/* Original Section 5 Editor (DPO Opinion) */}
|
||||
<Section5Editor
|
||||
dsfa={dsfa}
|
||||
onUpdate={(data) => handleSectionUpdate(5, data)}
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
|
||||
{/* Art. 36 Warning (NEW) */}
|
||||
<div className="border-t border-gray-200 pt-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Art. 36 Behoerdenkonsultation
|
||||
</h3>
|
||||
<Art36Warning
|
||||
dsfa={dsfa}
|
||||
onUpdate={handleGenericUpdate}
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Section 7: Review & Maintenance (NEW) */}
|
||||
{activeSection === 7 && (
|
||||
<ReviewScheduleSection
|
||||
dsfa={dsfa}
|
||||
onUpdate={handleGenericUpdate}
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - 1/3 Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Approval Panel */}
|
||||
<ApprovalPanel
|
||||
dsfa={dsfa}
|
||||
onSubmitForReview={handleSubmitForReview}
|
||||
onApprove={handleApprove}
|
||||
onReject={handleReject}
|
||||
isSubmitting={isSaving}
|
||||
userRole="editor"
|
||||
/>
|
||||
|
||||
{/* Quick Info */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-4">Informationen</h3>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Erstellt am</span>
|
||||
<span className="text-gray-900">
|
||||
{new Date(dsfa.created_at).toLocaleDateString('de-DE')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Zuletzt aktualisiert</span>
|
||||
<span className="text-gray-900">
|
||||
{new Date(dsfa.updated_at).toLocaleDateString('de-DE')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Risiken</span>
|
||||
<span className="text-gray-900">{(dsfa.risks || []).length}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Massnahmen</span>
|
||||
<span className="text-gray-900">{(dsfa.mitigations || []).length}</span>
|
||||
</div>
|
||||
{/* Bottom Actions Row */}
|
||||
<div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center gap-2">
|
||||
{activeSection > 0 && (
|
||||
<button
|
||||
onClick={() => setActiveSection(activeSection - 1)}
|
||||
className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" 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
|
||||
</button>
|
||||
)}
|
||||
{activeSection < 7 && (
|
||||
<button
|
||||
onClick={() => setActiveSection(activeSection + 1)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
|
||||
>
|
||||
Weiter
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Export Options */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-4">Export</h3>
|
||||
<div className="space-y-2">
|
||||
<button className="w-full flex items-center gap-3 px-4 py-2 text-left text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
|
||||
{/* Quick Info */}
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<span>Risiken: {(dsfa.risks || []).length}</span>
|
||||
<span>Massnahmen: {(dsfa.mitigations || []).length}</span>
|
||||
<span>Version: {dsfa.version || 1}</span>
|
||||
</div>
|
||||
|
||||
{/* Export */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
|
||||
<svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
|
||||
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
|
||||
</svg>
|
||||
Als PDF exportieren
|
||||
PDF
|
||||
</button>
|
||||
<button className="w-full flex items-center gap-3 px-4 py-2 text-left text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
|
||||
<button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
|
||||
<svg className="w-5 h-5 text-blue-500" 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>
|
||||
Als JSON exportieren
|
||||
JSON
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user