refactor(admin): split roadmap page.tsx into colocated components

Split 876-LOC page.tsx into 146 LOC with 7 colocated components
(RoadmapCard, CreateRoadmapModal, CreateItemModal, ImportWizard,
RoadmapDetailView split into header + items table), plus _types.ts,
_constants.ts, and _api.ts. Behavior preserved.

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

admin-compliance/app/sdk/roadmap/_components/RoadmapItemsTable.tsx

@@ -0,0 +1,69 @@
+import type { RoadmapItem } from '../_types'
+import { itemStatusColors, itemStatusLabels, priorityColors, categoryLabels } from '../_constants'
+
+export function RoadmapItemsTable({
+  items,
+  onStatusChange,
+  onDelete,
+}: {
+  items: RoadmapItem[]
+  onStatusChange: (itemId: string, newStatus: string) => void
+  onDelete: (itemId: string) => void
+}) {
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+      <table className="w-full">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Titel</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Kategorie</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Prioritaet</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Zustaendig</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aufwand</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aktion</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200">
+          {items.map(item => (
+            <tr key={item.id} className="hover:bg-gray-50">
+              <td className="px-4 py-3">
+                <div className="font-medium text-gray-900">{item.title}</div>
+                {item.regulation_ref && <div className="text-xs text-gray-500">{item.regulation_ref}</div>}
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-600">
+                {categoryLabels[item.category] || item.category}
+              </td>
+              <td className="px-4 py-3">
+                <span className={`px-2 py-0.5 text-xs rounded-full ${priorityColors[item.priority] || 'bg-gray-100 text-gray-700'}`}>
+                  {item.priority}
+                </span>
+              </td>
+              <td className="px-4 py-3">
+                <select
+                  value={item.status}
+                  onChange={e => onStatusChange(item.id, e.target.value)}
+                  className={`px-2 py-0.5 text-xs rounded-full border-0 ${itemStatusColors[item.status] || 'bg-gray-100 text-gray-700'}`}
+                >
+                  {Object.entries(itemStatusLabels).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+                </select>
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-600">
+                {item.assignee_name || '-'}
+                {item.department && <div className="text-xs text-gray-400">{item.department}</div>}
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-600">{item.effort_days}d</td>
+              <td className="px-4 py-3">
+                <button onClick={() => onDelete(item.id)}
+                  className="text-xs text-red-500 hover:text-red-700">Loeschen</button>
+              </td>
+            </tr>
+          ))}
+          {items.length === 0 && (
+            <tr><td colSpan={7} className="px-4 py-8 text-center text-gray-500">Keine Items</td></tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}