feat(sdk): vendor-compliance cross-module integration — VVT, obligations, TOM, loeschfristen
Integrate the vendor-compliance module with four DSGVO modules to eliminate data silos and resolve the VVT processor tab's ephemeral state problem. - Reposition vendor-compliance sidebar from seq 4200 to 2500 (after VVT) - VVT: replace ephemeral ProcessorRecord state with Vendor-API fetch (read-only) - Obligations: add linked_vendor_ids (JSONB) + compliance check #12 MISSING_VENDOR_LINK - TOM: add vendor TOM-controls cross-reference table in overview tab - Loeschfristen: add linked_vendor_ids (JSONB) + vendor picker + document section - Migrations: 069_obligations_vendor_link.sql, 070_loeschfristen_vendor_link.sql - Tests: 12 new backend tests (125 total pass) - Docs: update obligations.md + vendors.md with cross-module integration Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -44,6 +44,16 @@ export default function TOMPage() {
|
||||
const [tab, setTab] = useState<Tab>('uebersicht')
|
||||
const [selectedTOMId, setSelectedTOMId] = useState<string | null>(null)
|
||||
const [complianceResult, setComplianceResult] = useState<TOMComplianceCheckResult | null>(null)
|
||||
const [vendorControls, setVendorControls] = useState<Array<{
|
||||
vendorId: string
|
||||
vendorName: string
|
||||
controlId: string
|
||||
controlName: string
|
||||
domain: string
|
||||
status: string
|
||||
lastTestedAt?: string
|
||||
}>>([])
|
||||
const [vendorControlsLoading, setVendorControlsLoading] = useState(false)
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Compliance check (auto-run when derivedTOMs change)
|
||||
@@ -55,6 +65,39 @@ export default function TOMPage() {
|
||||
}
|
||||
}, [state?.derivedTOMs])
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Vendor controls cross-reference (fetch when overview tab is active)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
useEffect(() => {
|
||||
if (tab !== 'uebersicht') return
|
||||
setVendorControlsLoading(true)
|
||||
Promise.all([
|
||||
fetch('/api/sdk/v1/vendor-compliance/control-instances?limit=500').then(r => r.ok ? r.json() : null),
|
||||
fetch('/api/sdk/v1/vendor-compliance/vendors?limit=500').then(r => r.ok ? r.json() : null),
|
||||
]).then(([ciData, vendorData]) => {
|
||||
const instances = ciData?.data?.items || []
|
||||
const vendors = vendorData?.data?.items || []
|
||||
const vendorMap = new Map<string, string>()
|
||||
for (const v of vendors) {
|
||||
vendorMap.set(v.id, v.name)
|
||||
}
|
||||
// Filter for TOM-domain controls
|
||||
const tomControls = instances
|
||||
.filter((ci: any) => ci.domain === 'TOM' || ci.controlId?.startsWith('VND-TOM'))
|
||||
.map((ci: any) => ({
|
||||
vendorId: ci.vendorId || ci.vendor_id,
|
||||
vendorName: vendorMap.get(ci.vendorId || ci.vendor_id) || 'Unbekannt',
|
||||
controlId: ci.controlId || ci.control_id,
|
||||
controlName: ci.controlName || ci.control_name || ci.controlId || ci.control_id,
|
||||
domain: ci.domain || 'TOM',
|
||||
status: ci.status || 'UNKNOWN',
|
||||
lastTestedAt: ci.lastTestedAt || ci.last_tested_at,
|
||||
}))
|
||||
setVendorControls(tomControls)
|
||||
}).catch(() => {}).finally(() => setVendorControlsLoading(false))
|
||||
}, [tab])
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Computed / memoised values
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -377,6 +420,60 @@ export default function TOMPage() {
|
||||
|
||||
{/* Active tab content */}
|
||||
<div>{renderActiveTab()}</div>
|
||||
|
||||
{/* Vendor-Controls cross-reference (only on overview tab) */}
|
||||
{tab === 'uebersicht' && vendorControls.length > 0 && (
|
||||
<div className="mt-6 bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-gray-900">Auftragsverarbeiter-Controls (Art. 28)</h3>
|
||||
<p className="text-sm text-gray-500 mt-0.5">TOM-relevante Controls aus dem Vendor Register</p>
|
||||
</div>
|
||||
<a href="/sdk/vendor-compliance" className="text-sm text-purple-600 hover:text-purple-700 font-medium">
|
||||
Zum Vendor Register →
|
||||
</a>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-2 px-3 text-xs font-medium text-gray-500 uppercase">Vendor</th>
|
||||
<th className="text-left py-2 px-3 text-xs font-medium text-gray-500 uppercase">Control</th>
|
||||
<th className="text-left py-2 px-3 text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||
<th className="text-left py-2 px-3 text-xs font-medium text-gray-500 uppercase">Letzte Pruefung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{vendorControls.map((vc, i) => (
|
||||
<tr key={`${vc.vendorId}-${vc.controlId}-${i}`} className="hover:bg-gray-50">
|
||||
<td className="py-2.5 px-3 font-medium text-gray-900">{vc.vendorName}</td>
|
||||
<td className="py-2.5 px-3">
|
||||
<span className="font-mono text-xs text-gray-500">{vc.controlId}</span>
|
||||
<span className="ml-2 text-gray-700">{vc.controlName !== vc.controlId ? vc.controlName : ''}</span>
|
||||
</td>
|
||||
<td className="py-2.5 px-3">
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
vc.status === 'PASS' ? 'bg-green-100 text-green-700' :
|
||||
vc.status === 'PARTIAL' ? 'bg-yellow-100 text-yellow-700' :
|
||||
vc.status === 'FAIL' ? 'bg-red-100 text-red-700' :
|
||||
'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{vc.status === 'PASS' ? 'Bestanden' :
|
||||
vc.status === 'PARTIAL' ? 'Teilweise' :
|
||||
vc.status === 'FAIL' ? 'Nicht bestanden' :
|
||||
vc.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2.5 px-3 text-gray-500">
|
||||
{vc.lastTestedAt ? new Date(vc.lastTestedAt).toLocaleDateString('de-DE') : '\u2014'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user