refactor(admin): split sdk-flow page.tsx into colocated components

Extract BetriebOverviewPanel, DetailPanel, FlowCanvas, FlowToolbar,
StepTable, useFlowGraph hook and helpers into _components/ so page.tsx
drops from 1019 to 156 LOC (under the 300 soft target).

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

admin-compliance/app/sdk/sdk-flow/_components/FlowToolbar.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { SDK_FLOW_STEPS, FLOW_PACKAGES } from '../flow-data'
+import { PACKAGE_ORDER, type PackageFilter } from './helpers'
+
+export function FlowToolbar({
+  packageFilter,
+  setPackageFilter,
+  setSelectedStep,
+  showDb,
+  setShowDb,
+  showRag,
+  setShowRag,
+}: {
+  packageFilter: PackageFilter
+  setPackageFilter: (f: PackageFilter) => void
+  setSelectedStep: (s: null) => void
+  showDb: boolean
+  setShowDb: (v: boolean) => void
+  showRag: boolean
+  setShowRag: (v: boolean) => void
+}) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+      <div className="flex flex-wrap items-center gap-2">
+        {/* Package Filter */}
+        <button
+          onClick={() => {
+            setPackageFilter('alle')
+            setSelectedStep(null)
+          }}
+          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+            packageFilter === 'alle'
+              ? 'bg-slate-800 text-white'
+              : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
+          }`}
+        >
+          Alle ({SDK_FLOW_STEPS.length})
+        </button>
+        {PACKAGE_ORDER.map(pkgId => {
+          const pkg = FLOW_PACKAGES[pkgId]
+          const count = SDK_FLOW_STEPS.filter(s => s.package === pkgId).length
+          return (
+            <button
+              key={pkgId}
+              onClick={() => {
+                setPackageFilter(packageFilter === pkgId ? 'alle' : pkgId)
+                setSelectedStep(null)
+              }}
+              className="px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-1.5"
+              style={{
+                background:
+                  packageFilter === pkgId ? pkg.color.border : pkg.color.bg,
+                color: packageFilter === pkgId ? 'white' : pkg.color.text,
+              }}
+            >
+              <span
+                className="w-2.5 h-2.5 rounded-full"
+                style={{ background: pkg.color.border }}
+              />
+              {pkg.nameShort} ({count})
+            </button>
+          )
+        })}
+
+        {/* Separator */}
+        <div className="w-px h-6 bg-slate-200 mx-1" />
+
+        {/* Toggles */}
+        <button
+          onClick={() => setShowDb(!showDb)}
+          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+            showDb
+              ? 'bg-slate-700 text-white'
+              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+          }`}
+        >
+          DB-Tabellen
+        </button>
+        <button
+          onClick={() => setShowRag(!showRag)}
+          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+            showRag
+              ? 'bg-green-600 text-white'
+              : 'bg-green-50 text-green-700 hover:bg-green-100'
+          }`}
+        >
+          RAG-Collections
+        </button>
+      </div>
+    </div>
+  )
+}