Benjamin_Boenisch/breakpilot-compliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin): split compliance-hub, obligations, document-generator pages

Browse Source 
Each page.tsx was >1000 LOC; extract components to _components/ and hooks
to _hooks/ so page files stay under 500 LOC (164 / 255 / 243 respectively).
Zero behavior changes — logic relocated verbatim.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-04-16 17:10:14 +02:00
parent c43d9da6d0
commit 2ade65431a
15 changed files with 1607 additions and 2948 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
admin-compliance/app/sdk/obligations/_components/ObligationDetail.tsx
View File

@@ -83,6 +83,19 @@ export default function ObligationDetail({ obligation, onClose, onStatusChange,
</div>
)}
{obligation.linked_vendor_ids && obligation.linked_vendor_ids.length > 0 && (
<div>
<span className="text-gray-500">Verknuepfte Auftragsverarbeiter</span>
<div className="flex flex-wrap gap-1 mt-1">
{obligation.linked_vendor_ids.map(id => (
<a key={id} href="/sdk/vendor-compliance" className="px-2 py-0.5 text-xs bg-indigo-50 text-indigo-700 rounded hover:bg-indigo-100 transition-colors">
{id}
</a>
))}
</div>
</div>
)}
{obligation.notes && (
<div>
<span className="text-gray-500">Notizen</span>

12
admin-compliance/app/sdk/obligations/_components/ObligationModal.tsx
View File

@@ -154,6 +154,18 @@ export default function ObligationModal({
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Verknuepfte Auftragsverarbeiter</label>
<input
type="text"
value={form.linked_vendor_ids}
onChange={e => update('linked_vendor_ids', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
placeholder="Kommagetrennt: Vendor-ID-1, Vendor-ID-2"
/>
<p className="text-xs text-gray-400 mt-1">IDs der Auftragsverarbeiter aus dem Vendor Register</p>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
<textarea

19
admin-compliance/app/sdk/obligations/_components/StatsGrid.tsx
View File

@@ -3,15 +3,22 @@
import React from 'react'
import type { ObligationStats } from '../_types'
export default function StatsGrid({ stats }: { stats: ObligationStats | null }) {
export default function StatsGrid({
stats,
complianceScore,
}: {
stats: ObligationStats | null
complianceScore: number | string | null
}) {
const items = [
{ label: 'Ausstehend', value: stats?.pending ?? 0, color: 'text-gray-600', border: 'border-gray-200' },
{ label: 'In Bearbeitung',value: stats?.in_progress ?? 0, color: 'text-blue-600', border: 'border-blue-200' },
{ label: 'Ueberfaellig', value: stats?.overdue ?? 0, color: 'text-red-600', border: 'border-red-200' },
{ label: 'Abgeschlossen', value: stats?.completed ?? 0, color: 'text-green-600', border: 'border-green-200'},
{ label: 'Ausstehend', value: stats?.pending ?? 0, color: 'text-gray-600', border: 'border-gray-200' },
{ label: 'In Bearbeitung', value: stats?.in_progress ?? 0, color: 'text-blue-600', border: 'border-blue-200' },
{ label: 'Ueberfaellig', value: stats?.overdue ?? 0, color: 'text-red-600', border: 'border-red-200' },
{ label: 'Abgeschlossen', value: stats?.completed ?? 0, color: 'text-green-600', border: 'border-green-200' },
{ label: 'Compliance-Score', value: complianceScore ?? '—', color: 'text-purple-600', border: 'border-purple-200' },
]
return (
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
{items.map(s => (
<div key={s.label} className={`bg-white rounded-xl border ${s.border} p-5`}>
<div className={`text-xs ${s.color}`}>{s.label}</div>

222
admin-compliance/app/sdk/obligations/_hooks/useObligations.ts Normal file
View File

@@ -0,0 +1,222 @@
'use client'
import { useState, useEffect, useCallback, useMemo } from 'react'
import { useSDK } from '@/lib/sdk'
import { buildAssessmentPayload } from '@/lib/sdk/scope-to-facts'
import type { ApplicableRegulation } from '@/lib/sdk/compliance-scope-types'
import type { Obligation, ObligationComplianceCheckResult } from '@/lib/sdk/obligations-compliance'
import { runObligationComplianceCheck } from '@/lib/sdk/obligations-compliance'
import {
API, UCCA_API, mapPriority,
type ObligationFormData, type ObligationStats,
} from '../_types'
type Tab = 'uebersicht' | 'editor' | 'profiling' | 'gap-analyse' | 'pflichtenregister'
export function useObligations() {
const { state: sdkState } = useSDK()
const [obligations, setObligations] = useState<Obligation[]>([])
const [stats, setStats] = useState<ObligationStats | null>(null)
const [filter, setFilter] = useState('all')
const [regulationFilter, setRegulationFilter] = useState('all')
const [searchQuery, setSearchQuery] = useState('')
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [showModal, setShowModal] = useState(false)
const [editObligation, setEditObligation] = useState<Obligation | null>(null)
const [detailObligation, setDetailObligation] = useState<Obligation | null>(null)
const [profiling, setProfiling] = useState(false)
const [applicableRegs, setApplicableRegs] = useState<ApplicableRegulation[]>([])
const [activeTab, setActiveTab] = useState<Tab>('uebersicht')
const complianceResult = useMemo<ObligationComplianceCheckResult | null>(() => {
if (obligations.length === 0) return null
return runObligationComplianceCheck(obligations)
}, [obligations])
const loadData = useCallback(async () => {
setLoading(true)
setError(null)
try {
const params = new URLSearchParams({ limit: '200' })
if (filter !== 'all' && ['pending', 'in-progress', 'completed', 'overdue'].includes(filter)) {
params.set('status', filter)
}
if (filter === 'critical' || filter === 'high') {
params.set('priority', filter)
}
if (searchQuery) params.set('search', searchQuery)
const [listRes, statsRes] = await Promise.all([
fetch(`${API}?${params}`),
fetch(`${API}/stats`),
])
if (listRes.ok) {
const data = await listRes.json()
setObligations(data.obligations || [])
}
if (statsRes.ok) {
setStats(await statsRes.json())
}
} catch {
setError('Verbindung zum Backend fehlgeschlagen')
} finally {
setLoading(false)
}
}, [filter, searchQuery])
useEffect(() => {
loadData()
}, [loadData])
const handleCreate = async (form: ObligationFormData) => {
const res = await fetch(API, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: form.title,
description: form.description || null,
source: form.source,
source_article: form.source_article || null,
deadline: form.deadline || null,
status: form.status,
priority: form.priority,
responsible: form.responsible || null,
linked_systems: form.linked_systems ? form.linked_systems.split(',').map(s => s.trim()).filter(Boolean) : [],
linked_vendor_ids: form.linked_vendor_ids ? form.linked_vendor_ids.split(',').map(s => s.trim()).filter(Boolean) : [],
notes: form.notes || null,
}),
})
if (!res.ok) throw new Error('Erstellen fehlgeschlagen')
await loadData()
}
const handleUpdate = async (id: string, form: ObligationFormData) => {
const res = await fetch(`${API}/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: form.title,
description: form.description || null,
source: form.source,
source_article: form.source_article || null,
deadline: form.deadline || null,
status: form.status,
priority: form.priority,
responsible: form.responsible || null,
linked_systems: form.linked_systems ? form.linked_systems.split(',').map(s => s.trim()).filter(Boolean) : [],
linked_vendor_ids: form.linked_vendor_ids ? form.linked_vendor_ids.split(',').map(s => s.trim()).filter(Boolean) : [],
notes: form.notes || null,
}),
})
if (!res.ok) throw new Error('Aktualisierung fehlgeschlagen')
await loadData()
if (detailObligation?.id === id) {
const updated = await fetch(`${API}/${id}`)
if (updated.ok) setDetailObligation(await updated.json())
}
}
const handleStatusChange = async (id: string, newStatus: string) => {
const res = await fetch(`${API}/${id}/status`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status: newStatus }),
})
if (!res.ok) return
const updated = await res.json()
setObligations(prev => prev.map(o => o.id === id ? updated : o))
if (detailObligation?.id === id) setDetailObligation(updated)
fetch(`${API}/stats`).then(r => r.json()).then(setStats).catch(() => {})
}
const handleDelete = async (id: string) => {
const res = await fetch(`${API}/${id}`, { method: 'DELETE' })
if (!res.ok && res.status !== 204) throw new Error('Loeschen fehlgeschlagen')
setObligations(prev => prev.filter(o => o.id !== id))
setDetailObligation(null)
fetch(`${API}/stats`).then(r => r.json()).then(setStats).catch(() => {})
}
const handleAutoProfiling = async () => {
setProfiling(true)
setError(null)
try {
const profile = sdkState.companyProfile
const scopeState = sdkState.complianceScope
const scopeAnswers = scopeState?.answers || []
const scopeDecision = scopeState?.decision || null
let payload: Record<string, unknown>
if (profile) {
payload = buildAssessmentPayload(profile, scopeAnswers, scopeDecision) as unknown as Record<string, unknown>
} else {
payload = {
employee_count: 50,
industry: 'technology',
country: 'DE',
processes_personal_data: true,
is_controller: true,
uses_processors: true,
determined_level: scopeDecision?.determinedLevel || 'L2',
}
}
const res = await fetch(`${UCCA_API}/assess-from-scope`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
})
if (!res.ok) throw new Error(`HTTP ${res.status}`)
const data = await res.json()
const regs: ApplicableRegulation[] = data.overview?.applicable_regulations || data.applicable_regulations || []
setApplicableRegs(regs)
const rawObls = data.overview?.obligations || data.obligations || []
if (rawObls.length > 0) {
const autoObls: Obligation[] = rawObls.map((o: Record<string, unknown>) => ({
id: o.id as string,
title: o.title as string,
description: (o.description as string) || '',
source: (o.regulation_id as string || '').toUpperCase(),
source_article: '',
deadline: null,
status: 'pending' as const,
priority: mapPriority(o.priority as string),
responsible: (o.responsible as string) || '',
linked_systems: [],
rule_code: 'auto-profiled',
}))
setObligations(prev => {
const existingIds = new Set(prev.map(p => p.id))
const newOnes = autoObls.filter(a => !existingIds.has(a.id))
return [...prev, ...newOnes]
})
}
} catch (e) {
setError(e instanceof Error ? e.message : 'Auto-Profiling fehlgeschlagen')
} finally {
setProfiling(false)
}
}
const filteredObligations = obligations.filter(o => {
if (regulationFilter !== 'all') {
const src = o.source?.toLowerCase() || ''
const key = regulationFilter.toLowerCase()
if (!src.includes(key)) return false
}
return true
})
return {
sdkState, obligations, stats, filter, regulationFilter, searchQuery,
loading, error, showModal, editObligation, detailObligation,
profiling, applicableRegs, activeTab, complianceResult, filteredObligations,
setFilter, setRegulationFilter, setSearchQuery,
setShowModal, setEditObligation, setDetailObligation, setActiveTab,
loadData, handleCreate, handleUpdate, handleStatusChange, handleDelete, handleAutoProfiling,
}
}

3
admin-compliance/app/sdk/obligations/_types.ts
View File

@@ -13,6 +13,7 @@ export interface Obligation {
priority: 'critical' | 'high' | 'medium' | 'low'
responsible: string
linked_systems: string[]
linked_vendor_ids?: string[]
assessment_id?: string
rule_code?: string
notes?: string
@@ -40,6 +41,7 @@ export interface ObligationFormData {
priority: string
responsible: string
linked_systems: string
linked_vendor_ids: string
notes: string
}
@@ -53,6 +55,7 @@ export const EMPTY_FORM: ObligationFormData = {
priority: 'medium',
responsible: '',
linked_systems: '',
linked_vendor_ids: '',
notes: '',
}

1058
admin-compliance/app/sdk/obligations/page.tsx
View File

File diff suppressed because it is too large Load Diff