feat(tom): audit document, compliance checks, 25 controls, canonical control mapping

Phase A: TOM document HTML generator (12 sections, inline CSS, A4 print)
Phase B: TOMDocumentTab component (org-header form, revisions, print/download)
Phase C: 11 compliance checks with severity-weighted scoring
Phase D: MkDocs documentation for TOM module
Phase E: 25 new controls (63 → 88) in 13 categories

Canonical Control Mapping (three-layer architecture):
- Migration 068: tom_control_mappings + tom_control_sync_state tables
- 6 API endpoints: sync, list, by-tom, stats, manual add, delete
- Category mapping: 13 TOM categories → 17 canonical categories
- Frontend: sync button + coverage card (Overview), drill-down (Editor),
  belegende Controls count (Document)
- 20 tests (unit + API with mocked DB)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-compliance/app/sdk/tom/page.tsx

@@ -1,18 +1,19 @@
 'use client'
 
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useState, useCallback, useMemo, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { useSDK } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 import { useTOMGenerator } from '@/lib/sdk/tom-generator/context'
 import { DerivedTOM } from '@/lib/sdk/tom-generator/types'
-import { TOMOverviewTab, TOMEditorTab, TOMGapExportTab } from '@/components/sdk/tom-dashboard'
+import { TOMOverviewTab, TOMEditorTab, TOMGapExportTab, TOMDocumentTab } from '@/components/sdk/tom-dashboard'
+import { runTOMComplianceCheck, type TOMComplianceCheckResult } from '@/lib/sdk/tom-compliance'
 
 // =============================================================================
 // TYPES
 // =============================================================================
 
-type Tab = 'uebersicht' | 'editor' | 'generator' | 'gap-export'
+type Tab = 'uebersicht' | 'editor' | 'generator' | 'gap-export' | 'tom-dokument'
 
 interface TabDefinition {
   key: Tab
@@ -24,6 +25,7 @@ const TABS: TabDefinition[] = [
   { key: 'editor', label: 'Detail-Editor' },
   { key: 'generator', label: 'Generator' },
   { key: 'gap-export', label: 'Gap-Analyse & Export' },
+  { key: 'tom-dokument', label: 'TOM-Dokument' },
 ]
 
 // =============================================================================
@@ -41,6 +43,17 @@ export default function TOMPage() {
 
   const [tab, setTab] = useState<Tab>('uebersicht')
   const [selectedTOMId, setSelectedTOMId] = useState<string | null>(null)
+  const [complianceResult, setComplianceResult] = useState<TOMComplianceCheckResult | null>(null)
+
+  // ---------------------------------------------------------------------------
+  // Compliance check (auto-run when derivedTOMs change)
+  // ---------------------------------------------------------------------------
+
+  useEffect(() => {
+    if (state?.derivedTOMs && Array.isArray(state.derivedTOMs) && state.derivedTOMs.length > 0) {
+      setComplianceResult(runTOMComplianceCheck(state))
+    }
+  }, [state?.derivedTOMs])
 
   // ---------------------------------------------------------------------------
   // Computed / memoised values
@@ -316,6 +329,17 @@ export default function TOMPage() {
     />
   )
 
+  // ---------------------------------------------------------------------------
+  // Tab 5 – TOM-Dokument
+  // ---------------------------------------------------------------------------
+
+  const renderTOMDokument = () => (
+    <TOMDocumentTab
+      state={state}
+      complianceResult={complianceResult}
+    />
+  )
+
   // ---------------------------------------------------------------------------
   // Tab content router
   // ---------------------------------------------------------------------------
@@ -330,6 +354,8 @@ export default function TOMPage() {
         return renderGenerator()
       case 'gap-export':
         return renderGapExport()
+      case 'tom-dokument':
+        return renderTOMDokument()
       default:
         return renderUebersicht()
     }