feat(template-rule-editor): tenant override UI (Phase 2.1)

Adds the "Meine Overrides" tab in /sdk/template-rule-editor — the
mechanism by which a Kanzlei tells the system "yes, the global
recommendation says required, but for MY mandanten this is only
optional / or disabled entirely (because we have an equivalent
control elsewhere)".

Components:
- TenantOverrideList.tsx (398 LOC): tabular view with search filter,
  add/edit/delete operations; one row per override showing Rule Title,
  Original Classification, My Override Classification (or "Deaktiviert"
  badge for disabled), Reason, Created-by/at; sticky table header.
- OverrideDialog (inline): rule picker (locked in edit mode),
  classification radio group (required/recommended/optional/disabled),
  mandatory reason textarea, shows the original source_citation as
  context above the radio group.
- ConfirmDialog (inline): delete confirmation.

Page integration:
- New Tab system at top of /sdk/template-rule-editor:
  [Globale Regeln (n)] | [Meine Overrides (n)]
- TabButton helper component (border-bottom indicator).
- loadOverrides on mount.
- handleUpsertOverride / handleDeleteOverride reload overrides after
  success.

Backend integration (already in place since Phase 1):
- GET    /api/sdk/v1/compliance/tenant-rule-overrides
- POST   /api/sdk/v1/compliance/tenant-rule-overrides   (upsert)
- DELETE /api/sdk/v1/compliance/tenant-rule-overrides/{id}

Verified end-to-end against live Mac Mini backend:
  Baseline:     whistleblower_policy in required (for 250_999 MA)
  Add override (optional + reason): moves to optional bucket with
    override_applied=true and reason concatenation
    "Trifft zu: ... · Quelle: ... · Tenant-Override: required → optional (Bei meinen Tier-1-Mandanten ...)"
  Delete: 204

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/template-rule-editor/page.tsx

@@ -17,20 +17,26 @@ import StepHeader from '@/components/sdk/StepHeader/StepHeader'
 import { useRuleEditorActions } from './_hooks/useRuleEditorActions'
 import type {
   ApprovalHistoryEntry, Classification, Rule, RuleCondition, RuleVersion,
+  TenantRuleOverride,
 } from './_types'
 import RuleList from './_components/RuleList'
 import RuleEditor from './_components/RuleEditor'
+import TenantOverrideList from './_components/TenantOverrideList'
+
+type Tab = 'rules' | 'overrides'
 
 export default function TemplateRuleEditorPage() {
   useSDK()
 
   const actions = useRuleEditorActions()
 
+  const [tab, setTab] = useState<Tab>('rules')
   const [rules, setRules] = useState<Rule[]>([])
   const [liveVersionsByRule, setLiveVersionsByRule] = useState<Record<string, RuleVersion | undefined>>({})
   const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null)
   const [selectedVersions, setSelectedVersions] = useState<RuleVersion[]>([])
   const [selectedHistory, setSelectedHistory] = useState<ApprovalHistoryEntry[]>([])
+  const [overrides, setOverrides] = useState<TenantRuleOverride[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -156,6 +162,31 @@ export default function TemplateRuleEditorPage() {
     }
   }
 
+  const loadOverrides = useCallback(async () => {
+    try {
+      const list = await actions.listOverrides()
+      setOverrides(list)
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }, [actions])
+
+  useEffect(() => { loadOverrides() }, [])
+
+  const handleUpsertOverride = async (payload: {
+    rule_id: string
+    override_classification: Classification | null
+    reason: string
+  }) => {
+    await actions.upsertOverride(payload)
+    await loadOverrides()
+  }
+
+  const handleDeleteOverride = async (overrideId: string) => {
+    await actions.deleteOverride(overrideId)
+    await loadOverrides()
+  }
+
   const selectedRule = rules.find((r) => r.id === selectedRuleId)
 
   return (
@@ -174,32 +205,76 @@ export default function TemplateRuleEditorPage() {
         <div className="p-5 text-sm text-gray-500">Lade Regeln…</div>
       )}
       {!loading && (
-        <div className="flex-1 grid grid-cols-[320px_1fr] overflow-hidden">
-          <RuleList
-            rules={rules}
-            versionsByRule={liveVersionsByRule}
-            selectedRuleId={selectedRuleId}
-            onSelectRule={setSelectedRuleId}
-          />
-          {selectedRule ? (
-            <RuleEditor
-              rule={selectedRule}
-              versions={selectedVersions}
-              history={selectedHistory}
-              onCreateDraft={handleCreateDraft}
-              onUpdateDraft={handleUpdateDraft}
-              onSubmitForReview={handleSubmitForReview}
-              onApprove={handleApprove}
-              onPublish={handlePublish}
-              onReject={handleReject}
-            />
-          ) : (
-            <div className="h-full grid place-items-center text-sm text-gray-500">
-              Wähle links eine Regel zum Bearbeiten.
+        <>
+          <nav className="px-5 border-b border-gray-200 bg-white flex gap-1">
+            <TabButton active={tab === 'rules'} onClick={() => setTab('rules')}>
+              Globale Regeln <span className="text-xs text-gray-500">({rules.length})</span>
+            </TabButton>
+            <TabButton active={tab === 'overrides'} onClick={() => setTab('overrides')}>
+              Meine Overrides <span className="text-xs text-gray-500">({overrides.length})</span>
+            </TabButton>
+          </nav>
+          {tab === 'rules' && (
+            <div className="flex-1 grid grid-cols-[320px_1fr] overflow-hidden">
+              <RuleList
+                rules={rules}
+                versionsByRule={liveVersionsByRule}
+                selectedRuleId={selectedRuleId}
+                onSelectRule={setSelectedRuleId}
+              />
+              {selectedRule ? (
+                <RuleEditor
+                  rule={selectedRule}
+                  versions={selectedVersions}
+                  history={selectedHistory}
+                  onCreateDraft={handleCreateDraft}
+                  onUpdateDraft={handleUpdateDraft}
+                  onSubmitForReview={handleSubmitForReview}
+                  onApprove={handleApprove}
+                  onPublish={handlePublish}
+                  onReject={handleReject}
+                />
+              ) : (
+                <div className="h-full grid place-items-center text-sm text-gray-500">
+                  Wähle links eine Regel zum Bearbeiten.
+                </div>
+              )}
             </div>
           )}
-        </div>
+          {tab === 'overrides' && (
+            <div className="flex-1 overflow-hidden">
+              <TenantOverrideList
+                rules={rules}
+                liveVersionsByRule={liveVersionsByRule}
+                overrides={overrides}
+                onUpsert={handleUpsertOverride}
+                onDelete={handleDeleteOverride}
+              />
+            </div>
+          )}
+        </>
       )}
     </div>
   )
 }
+
+function TabButton({
+  active, onClick, children,
+}: {
+  active: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+        active
+          ? 'border-amber-500 text-gray-900'
+          : 'border-transparent text-gray-600 hover:text-gray-800 hover:border-gray-300'
+      }`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}